功能類

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 chunk
extract-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, // 是否sourceMapuglifyOptions: { // 丑化參數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', // 異步加載chunkminSize: 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({ // 使用dllPluginpath: 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...

總結

以上是生活随笔為你收集整理的webpackPlugin插件总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。