webpack配置（二）
支持SCSS
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: cssLoaders(
{
loader: 'sass-loader',
options: {
additionalData: `
@import "src/scss-vars.scss";
`,
sassOptions: {
includePaths: [__dirname]
},
},
},
),
},
]
}
};
在生产环境提取单独的CSS文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
})
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
}
自动生成HTML页面
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
chunks: ['main'],
templateContent: `
<html>
<body>
<div id="root"></div>
</body>
</html>
`
})
]
}
Webpack 优化之单独打包 runtime
module.exports = {
optimization: {
runtimeChunk: 'single',
},
}
当我们修改代码以外的东西，重新打包，那么改变的只有runtime.xx.js文件，index.js/main.js不会重新打包，避免用户重新请求重复的代码。
Webpack 优化之用 splitChunks 将 node 依赖单独打包
module.exports = {
optimization: {
moduleIds: 'deterministic', // 固定moduleIds
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
priority: 10,
minSize: 0, /* 如果不写 0，由于 React 文件尺寸太小，会直接跳过 */
test: /[\\/]node_modules[\\/]/, // 为了匹配 /node_modules/ 或 \node_modules\
name: 'vendors', // 文件名
chunks: 'all', // all 表示同步加载和异步加载，async 表示异步加载，initial 表示同步加载
// 这三行的整体意思就是把两种加载方式的来自 node_modules 目录的文件打包为 vendors.xxx.js
// 其中 vendors 是第三方的意思
}
},
},
},
}
Webpack 优化之 common 插件
module.exports = {
optimization: {
moduleIds: 'deterministic', // 固定moduleIds
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
common: {
priority: 5,
minSize: 0,
// 符合条件的打包到common.xxxx.js中
minChunks: 2, // 被两个及以上文件同时引用的算是common
chunks: 'all', // 不管是同步还是异步
name: 'common' // 打包出来的名字
}
},
},
},
}
