共计 6598 个字符，预计需要花费 17 分钟才能阅读完成。
功能类
html-webpack-plugin
自动生成 html，基本用法：
new HtmlWebpackPlugin({
filename: ‘index.html’, // 生成文件名
template: path.join(process.cwd(), ‘./index.html’) // 模班文件
})
copy-webpack-plugin
拷贝资源插件
基本用法：
new CopyWebpackPlugin([
{
from: path.join(process.cwd(), ‘./vendor/’),
to: path.join(process.cwd(), ‘./dist/’),
ignore: [‘*.json’]
}
])
webpack-manifest-plugin && assets-webpack-plugin
俩个插件效果一致，都是生成编译结果的资源单，只是资源单的数据结构不一致而已。
webpack-manifest-plugin 基本用法：
module.exports = {
plugins: [
new ManifestPlugin()
]
}
assets-webpack-plugin 基本用法：
module.exports = {
plugins: [
new AssetsPlugin()
]
}
clean-webpack-plugin
在编译之前清理指定目录指定内容。
基本用法：
// 清理目录
const pathsToClean = [
‘dist’,
‘build’
]
// 清理参数
const cleanOptions = {
exclude: [‘shared.js’], // 跳过文件
}
module.exports = {
// …
plugins: [
new CleanWebpackPlugin(pathsToClean, cleanOptions)
]
}
compression-webpack-plugin
提供带 Content-Encoding 编码的压缩版的资源
基本用法：
module.exports = {
plugins: [
new CompressionPlugin()
]
}
progress-bar-webpack-plugin
编译进度条插件
基本用法：
module.exports = {
//…
plugins: [
new ProgressBarPlugin()
]
}
代码相关类
webpack.ProvidePlugin
自动加载模块，如 $ 出现，就会自动加载模块；$ 默认为 ’jquery’ 的 exports
用法：
new webpack.ProvidePlugin({
$: ‘jquery’,
})
webpack.DefinePlugin
定义全局常量
用法：
new webpack.DefinePlugin({
‘process.env’: {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
})
mini-css-extract-plugin && extract-text-webpack-plugin
提取 css 样式，对比：
mini-css-extract-plugin 为 webpack4 及以上提供的 plugin，支持 css chunkextract-text-webpack-plugin 只能在 webpack3 及一下的版本使用，不支持 css chunk
基本用法 extract-text-webpack-plugin：
const ExtractTextPlugin = require(“extract-text-webpack-plugin”);
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: “style-loader”,
use: “css-loader”
})
}
]
},
plugins: [
new ExtractTextPlugin(“styles.css”),
]
}
基本用法 mini-css-extract-plugin：
const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: ‘/’ // chunk publicPath
}
},
“css-loader”
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: “[name].css”, // 主文件名
chunkFilename: “[id].css” // chunk 文件名
})
]
}
编译结果优化类
wbepack.IgnorePlugin
忽略 regExp 匹配的模块
用法：
new webpack.IgnorePlugin(/^./locale$/, /moment$/)
uglifyjs-webpack-plugin
代码丑化，用于 js 压缩
用法：
module.exports = {
//…
optimization: {
minimizer: [new UglifyJsPlugin({
cache: true, // 开启缓存
parallel: true, // 开启多线程编译
sourceMap: true, // 是否 sourceMap
uglifyOptions: {// 丑化参数
comments: false,
warnings: false,
compress: {
unused: true,
dead_code: true,
collapse_vars: true,
reduce_vars: true
},
output: {
comments: false
}
}
}]
}
};
optimize-css-assets-webpack-plugin
css 压缩，主要使用 cssnano 压缩器
用法：
module.exports = {
//…
optimization: {
minimizer: [new OptimizeCssAssetsPlugin({
cssProcessor: require(‘cssnano’), // css 压缩优化器
cssProcessorOptions: {discardComments: { removeAll: true} } // 去除所有注释
})]
}
};
webpack-md5-hash
使你的 chunk 根据内容生成 md5，用这个 md5 取代 webpack chunkhash。
var WebpackMd5Hash = require(‘webpack-md5-hash’);
module.exports = {
// …
output: {
//…
chunkFilename: “[chunkhash].[id].chunk.js”
},
plugins: [
new WebpackMd5Hash()
]
};
SplitChunksPlugin
CommonChunkPlugin 的后世，用于 chunk 切割。
webpack 把 chunk 分为两种类型，一种是初始加载 initial chunk，另外一种是异步加载 async chunk，如果不配置 SplitChunksPlugin，webpack 会在 production 的模式下自动开启，默认情况下，webpack 会将 node_modules 下的所有模块定义为异步加载模块，并分析你的 entry、动态加载（import()、require.ensure）模块，找出这些模块之间共用的 node_modules 下的模块，并将这些模块提取到单独的 chunk 中，在需要的时候异步加载到页面当中，其中默认配置如下：
module.exports = {
//…
optimization: {
splitChunks: {
chunks: ‘async’, // 异步加载 chunk
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: ‘~’, // 文件名中 chunk 分隔符
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/, //
priority: -10
},
default: {
minChunks: 2, // 最小的共享 chunk 数
priority: -20,
reuseExistingChunk: true
}
}
}
}
};
编译优化类
DllPlugin && DllReferencePlugin && autodll-webpack-plugin
dllPlugin 将模块预先编译，DllReferencePlugin 将预先编译好的模块关联到当前编译中，当 webpack 解析到这些模块时，会直接使用预先编译好的模块。
autodll-webpack-plugin 相当于 dllPlugin 和 DllReferencePlugin 的简化版，其实本质也是使用 dllPlugin && DllReferencePlugin，它会在第一次编译的时候将配置好的需要预先编译的模块编译在缓存中，第二次编译的时候，解析到这些模块就直接使用缓存，而不是去编译这些模块。
dllPlugin 基本用法：
const output = {
filename: ‘[name].js’,
library: ‘[name]_library’,
path: ‘./vendor/’
}
module.exports = {
entry: {
vendor: [‘react’, ‘react-dom’] // 我们需要事先编译的模块，用 entry 表示
},
output: output,
plugins: [
new webpack.DllPlugin({// 使用 dllPlugin
path: path.join(output.path, `${output.filename}.json`),
name: output.library // 全局变量名，也就是 window 下 的 [output.library]
})
]
}
DllReferencePlugin 基本用法：
const manifest = path.resolve(process.cwd(), ‘vendor’, ‘vendor.js.json’)
module.exports = {
plugins: [
new webpack.DllReferencePlugin({
manifest: require(manifest), // 引进 dllPlugin 编译的 json 文件
name: ‘vendor_library’ // 全局变量名，与 dllPlugin 声明的一致
}
]
}
autodll-webpack-plugin 基本用法：
module.exports = {
plugins: [
new AutoDllPlugin({
inject: true, // 与 html-webpack-plugin 结合使用，注入 html 中
filename: ‘[name].js’,
entry: {
vendor: [
‘react’,
‘react-dom’
]
}
})
]
}
happypack && thread-loader
多线程编译，加快编译速度，thread-loader 不可以和 mini-css-extract-plugin 结合使用。
happypack 基本用法：
const HappyPack = require(‘happypack’);
const os = require(‘os’);
const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length });
const happyLoaderId = ‘happypack-for-react-babel-loader’;
module.exports = {
module: {
rules: [{
test: /\.jsx?$/,
loader: ‘happypack/loader’,
query: {
id: happyLoaderId
},
include: [path.resolve(process.cwd(), ‘src’)]
}]
},
plugins: [new HappyPack({
id: happyLoaderId,
threadPool: happyThreadPool,
loaders: [‘babel-loader’]
})]
}
thread-loader 基本用法:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(“src”),
use: [
“thread-loader”,
// your expensive loader (e.g babel-loader)
“babel-loader”
]
}
]
}
}
hard-source-webpack-plugin && cache-loader
使用模块编译缓存，加快编译速度。
hard-source-webpack-plugin 基本用法：
module.exports = {
plugins: [
new HardSourceWebpackPlugin()
]
}
cache-loader 基本用法：
module.exports = {
module: {
rules: [
{
test: /\.ext$/,
use: [
‘cache-loader’,
…loaders
],
include: path.resolve(‘src’)
}
]
}
}
编译分析类
webpack-bundle-analyzer
编译模块分析插件
基本用法：
new BundleAnalyzerPlugin({
analyzerMode: ‘server’,
analyzerHost: ‘127.0.0.1’,
analyzerPort: 8889,
reportFilename: ‘report.html’,
defaultSizes: ‘parsed’,
generateStatsFile: false,
statsFilename: ‘stats.json’,
statsOptions: null,
logLevel: ‘info’
}),
stats-webpack-plugin && PrefetchPlugin
stats-webpack-plugin 将构建的统计信息写入文件，该文件可在 http://webpack.github.io/anal…，并根据分析结果，可使用 PrefetchPlugin 对部分模块进行预解析编译（本人也不理解这个 plugin，据说优化效果不明显，有兴趣的同学请见 how-to-optimize-webpacks-build-time-using-prefetchplugin-analyse-tool）。
stats-webpack-plugin 基本用法：
module.exports = {
plugins: [
new StatsPlugin(‘stats.json’, {
chunkModules: true,
exclude: [/node_modules[\\\/]react/]
})
]
};
PrefetchPlugin 基本用法：
module.exports = {
plugins: [
new webpack.PrefetchPlugin(‘/web/’, ‘app/modules/HeaderNav.jsx’),
new webpack.PrefetchPlugin(‘/web/’, ‘app/pages/FrontPage.jsx’)
];
}
speed-measure-webpack-plugin
统计编译过程中，各 loader 和 plugin 使用的时间。
const SpeedMeasurePlugin = require(“speed-measure-webpack-plugin”);
const smp = new SpeedMeasurePlugin();
const webpackConfig = {
plugins: [
new MyPlugin(),
new MyOtherPlugin()
]
}
module.exports = smp.wrap(webpackConfig);
转载自：https://segmentfault.com/a/11…
