webpack核心概念-模式/loader/插件及其他

模式

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化

  1. 在配置中设置选项

    module.exports = {
  mode: 'production'
};

  2. 从cli参数中传递

    webpack --mode=production

loader

一个Web工程通常会包含HTML、JS、CSS、模板、图片、字体等多种类型的静态资源，并且这些资源之间都存在着某种联系。比如在CSS中可能会引用图片和字体。

对于Webpack来说，所有这些静态资源都是模块，我们可以像加载一个JS文件一样去加载它们
。loader本质上都是一个函数：output=loader(input)

应用

1. 安装

npm install --save-dev css-loader

2. 配置

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
    ]
  }
};
  • test可接收一个正则表达式或者一个元素为正则表达式的数组，只有正则匹配上的模块才会使用这条规则。在本例中以/\.css$/来匹配所有以.css结尾的文件。
  • use可接收一个数组，数组包含该规则所使用的loader。在本例中只配置了一个css-loader

特性

  • loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
  • loader 也能够使用 options 对象进行配置。

插件plugins

插件目的在于解决 loader 无法实现的其他事
。由于插件可以携带参数/选项，你必须在 webpack 配置中向 plugins 属性传入 new 实例。

应用

1.安装

npm install --save-dev html-webpack-plugin

2.配置

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const path = require('path');

module.exports = {
   entry:'./src/main.js',
   output:{
       filename:'bundle.js',
       path: path.resolve(__dirname, 'dist')
   },
    
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

配置

由于webpack 配置是标准的 Node.js CommonJS 模块，你可以做到以下事情：

  • 通过 require(...) 导入其他文件
  • 通过 require(...) 使用 npm 的工具函数
  • 使用 JavaScript 控制流表达式，例如 ?: 操作符
  • 对常用值使用常量或变量
  • 编写并执行函数来生成部分配置

同时避免

  • 在使用 webpack 命令行接口(CLI)时访问命令行接口(CLI)参数
  • 导出不确定的值（调用 webpack 两次应该产生同样的输出文件）
  • 编写很长的配置（应该将配置拆分为多个文件）

基本配置示例

var path = require('path');

module.exports = {
  mode: 'development',
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

模块

在模块化编程中，开发者将程序分解成离散功能块，并称之为模块。

每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。

精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

什么是 webpack 模块？

对比 Node.js 模块，webpack 模块能够以各种方式表达它们的依赖关系，几个例子如下：

模块解析

resolver 是一个库(library)，用于帮助找到模块的绝对路径。

所依赖的模块可以是来自应用程序代码或第三方的库。resolver 帮助 webpack 找到 bundle 中需要引入的模块代码，这些代码在包含在每个 require/import 语句中。

当打包模块时，webpack 使用 enhanced-resolve 来解析文件路径，包括三种类型的路径：

1.绝对路径

import "/home/me/file";
import "C:\\Users\\me\\file";

2.相对路径

import "../src/file1";
import "./file2";

3.模块路径

import "module";
import "module/lib/file";

缓存

每个文件系统访问都被缓存，以便更快触发对同一文件的多个并行或串行请求。在观察模式下，只有修改过的文件会从缓存中摘出。如果关闭观察模式，在每次编译前清理缓存。

有关上述配置的更多信息，请查看解析 API学习。

依赖图

任何时候，一个文件依赖于另一个文件，webpack 就把此视为文件之间有 依赖关系 。

这使得 webpack 可以接收非代码资源(non-code asset)（例如图像或 web 字体），并且可以把它们作为 依赖 提供给你的应用程序。

从 入口起点 开始，webpack 递归地构建一个 依赖图 ，这个依赖图包含着应用程序所需的每个模块，然后将所有这些模块打包为少量的 bundle - 通常只有一个 - 可由浏览器加载。

官方文档提供的概念还包括manifest、构建目标、模块热替换

posted @ 2020-09-01 14:55  sanhuamao  阅读(243)  评论(0)  编辑  收藏  举报