什么是 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 的输入。
网友评论