知识点:
1、loader加载顺序是 从右到左,从下到上
2、多个loader用use
use: [‘style-loader’, ‘css-loader’]
3、exclude和include的搭配使用可以缩小匹配的范围
4、如果觉得loader自带顺序导致格式混乱的话,或者觉得不方便可以指定 enforce的值来指定loader的顺序
参数 | 说明 |
---|---|
pre | 优先处理 |
normal | 正常处理(默认,可不写) |
inline | 其次处理 |
post | 最后处理 |
5、使用oneOf提升效率,大部分文件我们预期只被一个rules匹配。
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/[name].js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
// loader的配置
{
test: /\.css$/,
// 多个loader用use
use: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
// 排除node_modules下的js文件
exclude: /node_modules/,
// 只检查 src 下的js文件
include: resolve(__dirname, 'src'),
// 优先执行
enforce: 'pre',
// 单个loader用loader
loader: 'eslint-loader',
options: {}
},
{
// 以下配置只会生效一个
oneOf: []
}
]
},
plugins: [new HtmlWebpackPlugin()],
mode: 'development'
};