js文件压缩
webpack 4 内置了uglifyjs-webpack-plugin
,js默认是压缩过的
css文件压缩
使用optimize-css-assets-webpack-plugin
和 cssnano
预处理器
plugins: [
// 把css提取成单独的文件
new MiniCssExtractPlugin({
filename: '[name]_[contenthash:8].css'
}),
// css压缩
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano')
}),
]
html 文件压缩
使用 html-webpack-plugin
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src/search.html'), // 文件目录
filename: 'search.html', // 打包出来的html文件名称
chunks: ['search'], // 指定生成的html使用哪些chunk
inject: true, // true,打包出来的chunk:js、css会自动注入到这个chunk里面
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false
}
}),
]