1.包括3个重要的概念(test,include,exclude条件匹配;应用规则,重置顺序)
module: {
// 不去解析这些文件,提高构建性能
noParse: /jquery|lodash/, //不去解析jquery 和lodash的库的依赖,提高打包效率,这个属性也可以是函数
// 从 webpack 3.0.0 开始
noParse: function(content) {
return /jquery|lodash/.test(content);
},
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties', '@babel/plugin-syntax-dynamic-import'],
},
},
},
{
test: /\.(css|scss|sass)$/,
// exclude: /(node_modules|bower_components)/,
use: [{
loader: MiniCssExtractPlugin.loader,
}, {
loader: 'css-loader',
options: {
minimize: true,
},
},
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: ['last 15 versions'],
}),
pxtorem({
rootValue: 100,
replace: true,
propList: ['*'],
}),
],
},
},
{
loader: 'sass-loader',
}],
}, {
test: /\.(png|jpg|gif|eot|woff2|woff|ttf)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 5200000,
},
},
],
}]
}