模式
提供 mode 配置选项，告知 webpack 使用相应模式的内置优化
-
在配置中设置选项
module.exports = { mode: 'production' }; -
从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 模块能够以各种方式表达它们的依赖关系，几个例子如下：
- ES2015
import语句 - CommonJS
require()语句 - AMD
define和require语句 - css/sass/less 文件中的
@import语句。 - 样式(
url(...))或 HTML 文件(``)中的图片链接
模块解析
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、构建目标、模块热替换