HotModuleReplacementPlugin

模块热更新插件,是webpack模块自带的，所以引入webpack后，在plugins配置项中直接使用即可。

 plugins: [   new webpack.HotModuleReplacementPlugin(), // 热更新插件 ]

html-webpack-plugin

生成 html 文件。将 webpack 中entry配置的相关入口 chunk 和 extract-text-webpack-plugin抽取的 css 样式 插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个 html 文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中。

（福利推荐：阿里云、腾讯云、华为云服务器最新限时优惠活动，云服务器1核2G仅88元/年、2核4G仅698元/3年，点击这里立即抢购>>>）

 plugins: [   new HtmlWebpackPlugin({     filename: 'index.html?userCode=wrvvs1rm',     template: path.join(__dirname, '/index.html?userCode=wrvvs1rm'),     minify: {       // 压缩HTML文件       removeComments: true, // 移除HTML中的注释       collapseWhitespace: true, // 删除空白符与换行符       minifyCSS: true, // 压缩内联css     },     inject: true,   }), ]

clean-webpack-plugin

用于在打包前清理上一次项目生成的 bundle 文件，它会根据 output.path 自动清理文件夹；这个插件在生产环境用的频率非常高，因为生产环境经常会通过 hash 生成很多 bundle 文件，如果不进行清理的话每次都会生成新的，导致文件夹非常庞大。

 plugins: [   new HtmlWebpackPlugin({     template: path.join(__dirname, '/index.html?userCode=wrvvs1rm'),   }),   new CleanWebpackPlugin(), // 所要清理的文件夹名称 ]

extract-text-webpack-plugin

将 css 成生文件，而非内联 。该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中引起页面样式加载错乱的现象

 plugins: [   // 将css分离到/dist文件夹下的css文件夹中的index.css   new ExtractTextPlugin('css/index.css'), ]

purifycss-webpack

有时候我们 css 写得多了或者重复了，这就造成了多余的代码，我们希望在生产环境进行去除。

const PurifyCssWebpack = require('purifycss-webpack') // 引入PurifyCssWebpack插件 const glob = require('glob') // 引入glob模块,用于扫描全部html文件中所引用的css  module.exports = merge(common, {   plugins: [     new PurifyCssWebpack({       paths: glob.sync(path.join(__dirname, 'src/*.html?userCode=wrvvs1rm')),     }),   ], })

optimize-css-assets-webpack-plugin

我们希望减小 css 打包后的体积，可以用到 optimize-css-assets-webpack-plugin。

 optimization: {   minimizer: [     // 压缩css     new OptimizeCSSAssetsPlugin({})   ]

compression-webpack-plugin

所有现代浏览器都支持 gzip 压缩，启用 gzip 压缩可大幅缩减传输资源大小，从而缩短资源下载时间，减少首次白屏时间，提升用户体验。

gzip 对基于文本格式文件的压缩效果最好（如：CSS、JavaScript 和 HTML），在压缩较大文件时往往可实现高达 70-90% 的压缩率，对已经压缩过的资源（如：图片）进行 gzip 压缩处理，效果很不好。

 plugins: [   new CompressionPlugin({     // gzip压缩配置     test: /.js$|.html?userCode=wrvvs1rm$|.css/, // 匹配文件名     threshold: 10240, // 对超过10kb的数据进行压缩     deleteOriginalAssets: false, // 是否删除原文件   }), ]

UglifyJsPlugin

uglifyJsPlugin 是 vue-cli 默认使用的压缩代码方式，用来对 js 文件进行压缩，从而减小 js 文件的大小，加速 load 速度。它使用的是单线程压缩代码，打包时间较慢，所以可以在开发环境将其关闭，生产环境部署时再把它打开。

 plugins: [   new UglifyJsPlugin({     uglifyOptions: {       compress: {         warnings: false       }     },     sourceMap: true,  //是否启用文件缓存     parallel: true   //使用多进程并行运行来提高构建速度   })

你还在原价购买阿里云、腾讯云、华为云、天翼云产品？那就亏大啦！现在申请成为四大品牌云厂商VIP用户，可以3折优惠价购买云服务器等云产品，并且可享四大云服务商产品终身VIP优惠价，还等什么？赶紧点击下面对应链接免费申请VIP客户吧：

1、点击这里立即申请成为腾讯云VIP客户

2、点击这里立即注册成为天翼云VIP客户

3、点击这里立即申请成为华为云VIP客户

4、点击这里立享阿里云产品终身VIP优惠价

喜欢 (0)赏

[[email protected]]

分享 (0)