功能类
html-webpack-plugin
自动生成html,基本用法:
1 | new HtmlWebpackPlugin({ |
copy-webpack-plugin
拷贝资源插件
基本用法:
1 | new CopyWebpackPlugin([ |
webpack-manifest-plugin && assets-webpack-plugin
俩个插件效果一致,都是生成编译结果的资源单,只是资源单的数据结构不一致而已。
webpack-manifest-plugin 基本用法:
1 | module.exports = { |
assets-webpack-plugin 基本用法:
1 | module.exports = { |
clean-webpack-plugin
在编译之前清理指定目录指定内容。
基本用法:
1 | // 清理目录 |
compression-webpack-plugin
提供带 Content-Encoding 编码的压缩版的资源。
基本用法:
1 | module.exports = { |
progress-bar-webpack-plugin
编译进度条插件
基本用法:
1 | module.exports = { |
代码相关类
webpack.ProvidePlugin
自动加载模块,如 $ 出现,就会自动加载模块;$ 默认为’jquery’的exports
用法:
1 | new webpack.ProvidePlugin({ |
webpack.DefinePlugin
定义全局常量
用法:
1 | new webpack.DefinePlugin({ |
mini-css-extract-plugin && extract-text-webpack-plugin
提取css样式,对比:
- mini-css-extract-plugin 为webpack4及以上提供的plugin,支持css chunk
- extract-text-webpack-plugin 只能在webpack3 及一下的版本使用,不支持css chunk
基本用法 extract-text-webpack-plugin:
1 | const ExtractTextPlugin = require("extract-text-webpack-plugin"); |
基本用法 mini-css-extract-plugin:
1 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); |
编译结果优化类
wbepack.IgnorePlugin
忽略regExp匹配的模块
用法:
1 | new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) |
uglifyjs-webpack-plugin
代码丑化,用于js压缩
用法:
1 | module.exports = { |
optimize-css-assets-webpack-plugin
css压缩,主要使用 cssnano 压缩器
用法:
1 | module.exports = { |
webpack-md5-hash
使你的chunk根据内容生成md5,用这个md5取代 webpack chunkhash。
1 | var WebpackMd5Hash = require('webpack-md5-hash'); |
SplitChunksPlugin
CommonChunkPlugin 的后世,用于chunk切割。
webpack 把 chunk 分为两种类型,一种是初始加载initial chunk,另外一种是异步加载 async chunk,如果不配置SplitChunksPlugin,webpack会在production的模式下自动开启,默认情况下,webpack会将 node_modules 下的所有模块定义为异步加载模块,并分析你的 entry、动态加载(import()、require.ensure)模块,找出这些模块之间共用的node_modules下的模块,并将这些模块提取到单独的chunk中,在需要的时候异步加载到页面当中,其中默认配置如下:
1 | module.exports = { |
编译优化类
DllPlugin && DllReferencePlugin && autodll-webpack-plugin
dllPlugin 将模块预先编译,DllReferencePlugin 将预先编译好的模块关联到当前编译中,当 webpack 解析到这些模块时,会直接使用预先编译好的模块。
autodll-webpack-plugin 相当于 dllPlugin 和 DllReferencePlugin 的简化版,其实本质也是使用 dllPlugin && DllReferencePlugin,它会在第一次编译的时候将配置好的需要预先编译的模块编译在缓存中,第二次编译的时候,解析到这些模块就直接使用缓存,而不是去编译这些模块。
dllPlugin 基本用法:
1 | const output = { |
DllReferencePlugin 基本用法:
1 | const manifest = path.resolve(process.cwd(), 'vendor', 'vendor.js.json') |
autodll-webpack-plugin 基本用法:
1 | module.exports = { |
happypack && thread-loader
多线程编译,加快编译速度,thread-loader不可以和 mini-css-extract-plugin 结合使用。
happypack 基本用法:
1 |
|
thread-loader 基本用法:
1 | module.exports = { |
hard-source-webpack-plugin && cache-loader
使用模块编译缓存,加快编译速度。
hard-source-webpack-plugin 基本用法:
1 | module.exports = { |
cache-loader 基本用法:
1 | module.exports = { |
编译分析类
webpack-bundle-analyzer
编译模块分析插件
基本用法:
1 | new BundleAnalyzerPlugin({ |
stats-webpack-plugin && PrefetchPlugin
stats-webpack-plugin 将构建的统计信息写入文件,该文件可在 http://webpack.github.io/analyse中上传进行编译分析,并根据分析结果,可使用 PrefetchPlugin 对部分模块进行预解析编译(本人也不理解这个plugin,据说优化效果不明显,有兴趣的同学请见 how-to-optimize-webpacks-build-time-using-prefetchplugin-analyse-tool)。
stats-webpack-plugin 基本用法:
1 | module.exports = { |
PrefetchPlugin 基本用法:
1 | module.exports = { |
speed-measure-webpack-plugin
统计编译过程中,各loader和plugin使用的时间。
1 | const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); |