什么是 loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 chunk）可以直接引用的模块。
使用 loader
在你的应用程序中，有三种使用 loader 的方式：
配置（推荐）：在 webpack.config.js 文件中指定 loader
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
内联：在每个 import 语句中显式指定 loader
import Styles from 'style-loader!css-loader?modules!./styles.css';
CLI：在 shell 命令中指定它们
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
loader 的路径解析
loader 可以是绝对路径、相对路径，也可以是模块路径，相对路径相对于 context 选项（该选项默认值为配置文件所在的目录），模块路径采用模块解析规则。一般 loader 都是通过 npm 安装到 node_modules 目录中，因此一般都是通过模块路径来引用 loader。
module.exports = {
context: path.resolve(__dirname),
module: {
rules: [
{
test: /\.css$/,
use: ['./node_modules/style-loader', 'css-loader']
}
]
}
}
module.rules
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.js$/,
include: [
path.resolve(__dirname, 'src')
],
exclude: [
path.resolve(__dirname, 'src/node_modules'),
path.resolve(__dirname, 'src/libs')
]
}
]
}
匹配规则
module.rules 是匹配规则数组，数组中的每一项为一条匹配规则对象，以下称为 rule。每条 rule 包括匹配条件和匹配结果。
对于依赖图中的每个模块的绝对路径，都按照 module.rules 中的 rule 依次进行匹配。如果模块的绝对路径满足某个 rule 的匹配条件，则对该模块应用该 rule 的 匹配结果中指定的 loader 进行预处理。? 如果模块路径满足多个 rule 的匹配条件 ?
匹配条件
匹配条件包括 test include exclude 选项，每个选项为一个匹配条件，选项的值可以是：
- 字符串：字符串的值一般为绝对路径。如果模块的绝对路径以该字符串开头，则满足该条匹配条件。
- 正则表达式：如果模块的绝对路径 url.test(reg) 返回 true，则满足该条匹配条件。
- 数组：数组元素为字符串或正则表达式，每个元素为一个匹配条件，至少需要满足一个匹配条件。
如果某个 rule 同时有多个匹配条件选项，则模块的绝对路径必须同时满足所有的匹配条件，才会对模块应用匹配结果。test 和 include 具有相同的作用，都是必须匹配选项。exclude 是必不匹配选项（优先于 test 和 include）。
最佳实践：
- 只在 test 中使用正则表达式。
- 在 include 和 exclude 中使用绝对路径数组。
- 尽量避免 exclude，更倾向于使用 include。
实例：
{
test: /\.js$/,
include: [
path.resolve(__dirname, 'src')
],
exclude: [
path.resolve(__dirname, 'src/node_modules'),
path.resolve(__dirname, 'src/libs')
]
}
以上代码为一条 rule，如果某个模块不在 ./src/node_modules/ 和 ./src/libs/ 目录下，并且在 ./src/ 目录下，并且模块名以 .js 结尾，则满足该条 rule 的匹配条件。
匹配结果
匹配结果包括 use 选项，指定应用的 loader，选项的值可以是：
- 字符串
- 对象
- 数组：数组元素为字符串或对象，从后往前应用 loader
实例：
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader'
},
{
test: /\.(jpe?g|png|gif)$/,
use: {
loader: 'file-loader',
options: {...}
}
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {...}
}
]
}
]
}
先对 css 文件应用 css-loader，再应用 style-loader，css-loader 的输出作为 style-loader 的输入。
