共计 2319 个字符,预计需要花费 6 分钟才能阅读完成。
webpack4
plugin
clean-webpack-plugin
html-webpack-plugin
mini-css-extract-plugin
terser-webpack-plugin(webpack4 内置)
optimize-css-assets-webpack-plugin
webpack-bundle-analyzer
clean-webpack-plugin
清除文件插件
new cleanWebpackPlugin(
[resolve(‘dist’), resolve(‘build’)], {
root: __dirname,
exclude: [‘test.html’], // 排除
verbose: true, // Write logs to console.
dry: false, // Use boolean “true” to test/emulate delete. (will not remove files).
watch: false, // If true, remove files on recompile.
beforeEmit: false // 在将文件发送到输出目录之前执行清理
})
html-webpack-plugin
自动帮你生成一个 html 文件,并且引用相关的 assets 文件(如 css, js)。
如果你既指定了 template 选项,又指定了 title 选项,那么 webpack 会选择哪一个?事实上,这时候会选择你指定的模板文件的 title, 即使你的模板文件中未设置 title。
new htmlWebpackPlugin({
title: ‘testooo’, // html 文件的标题
filename: ‘detail.html’, // 生成 html 文件的文件名。默认为 index.html.
template: `./src/detail.html`, // 根据自己的指定的模板文件来生成特定的 html 文件
chunks: [‘index’, ‘vendor’], // 主要是针对多入口 (entry) 文件。当你有多个入口文件的时候,对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。默认引用所有
inject: ‘body’, // true 默认值,script 标签位于 html 文件的 body 底部 注入选项
hash: true, // hash 选项的作用是 给生成的 js 文件一个独特的 hash 值 xx.js?xxxxxx
// 对 html 文件进行压缩
minify: {
removeAttributeQuotes:true,
removeComments: true,
collapseWhitespace: true,
removeScriptTypeAttributes:true,
removeStyleLinkTypeAttributes:true
}
})
mini-css-extract-plugin
分离 css: 此插件将 CSS 提取到单独的文件中。
它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。它支持 CSS 和 SourceMaps 的按需加载。
extract-text-webpack-plugin,只支持 webpack 4 以下提取 CSS 文件, webpack 4 以上用 mini-css-extract-plugin
terser-webpack-plugin(webpack4 内置)
webpack 4 中删除了 webpack.optimize.CommonsChunkPlugin, 并且使用 optimization 中的 splitChunk 来替代, 下面的配置代替了之前的 CommonsChunkPlugin 配置,同意能提取 JS 和 CSS 文件
压缩的配置也移动到了 optimization 选项下,值得注意的是压缩工具换成了 terser-webpack-plugin,这是 webpack 官方也推荐使用的
module.exports = {
optimization: {
splitChunks: {
vendors: {
name: ‘venders’,
chunks: ‘all’,
minChunks: chunks.length
}
}
}
optimize-css-assets-webpack-plugin
webpack5 很可能会内置 css 压缩, 为了压缩输出,可使用 optimize-css-assets-webpack-plugin 插件。
默认只压缩 js,所以通过设置 optimization.minimizer 覆盖默认的压缩配置,应确保指定了一个 JS 的压缩配置, 否则默认配置就被覆盖了,就不再压缩 js 了。
类似 extract-text-webpack-plugin,通过 optimization.splitChunks.cacheGroups 可以将 css 提取到一个文件中。
module.exports = {
minimizer: [
new terserPlugin({// 压缩 js
cache: true,
parallel: true
}),
new optimizeCSSAssetsPlugin({// 压缩 css
cssProcessorOptions: {
safe: true
}
})
],
optimization: {
cacheGroups: {
styles: {
name: ‘styles’,
test: /\.scss|css$/,
chunks: ‘all’, // merge all the css chunk to one file
enforce: true
}
}
}
}
webpack-bundle-analyzer
通过使用 webpack-bundle-analyzer 可以看到项目各模块的大小,可以按需优化
图片来自于 webpack-bundle-analyzer 的 github