js 文件压缩 webpack 内置 uglifyjs-webpack-plugin
css 文件压缩 安装 optimize-css-assets-webpack-plugin,同时安装 cssnano
// webpack 4
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
plugins: [
new OptimizeCSSAssetsPlugin ({
assetNameRegExp:/\.css$/g,
cssProcessor:require('cssnano') // css 预处理器
})
]
};
// webpack 5
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
optimization: {
minimizer: [
new CssMinimizerPlugin(),
],
},
};
html 文件压缩 安装 html-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src/index.html'),
filename: 'index.html',
chunks: ['index'],
inject: true,
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false
}
})
]
};