一. 配置多入口打包
webpack.config.js:
module.exports = {
mode: 'none',
entry: {
index: './src/index.js',
album: './src/album.js',
},
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, 'output')
},
plugins: [
new htmlWebpackPlugin({
title: 'Index Page',
chunks: ['index'],
}),
new htmlWebpackPlugin({
title: 'My Album Page',
text: '一个标题',
filename: 'album.html',
template: './src/album.html',
chunks: ['album'],
}),
]
}
二. 开启多入口打包公共模块提取
module.exports = {
optimization: {
splitChunks: {
// 开启公共模块提取
cacheGroups: {
default: {
name: 'common',
chunks: 'all',
minChunks: 2,
}
}
}
},
}
三. 开启css文件单独打包,以<link>标签引入(当样式大于150kb时更适用),并压缩
插件名称 | 作用 |
mini-css-extract-plugin | 将css文件单独打包,并以<link>标签形式引入 |
optimize-css-assets-webpack-plugin | 将单独打包的css文件,进行压缩 |
terser-webpack-plugin | 将打包的js文件,进行压缩 |
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, // 将css文件单独打包,用link标签形式引入
'css-loader',
]
}
]
},
optimization: {
minimizer: [
new TerserPlugin(), // 压缩js包
new OptimizeCssAssetsPlugin(), // 压缩css包
]
}
}
本文 完。