功能類

html-webpack-plugin

自動(dòng)生成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

倆個(gè)插件效果一致，都是生成編譯結(jié)果的資源單，只是資源單的數(shù)據(jù)結(jié)構(gòu)不一致而已。

webpack-manifest-plugin 基本用法：

module.exports = {plugins: [new ManifestPlugin()] }

assets-webpack-plugin 基本用法：

module.exports = {plugins: [new AssetsPlugin()] }

clean-webpack-plugin

在編譯之前清理指定目錄指定內(nèi)容。

基本用法：

// 清理目錄 const pathsToClean = ['dist','build' ]// 清理參數(shù) const cleanOptions = {exclude: ['shared.js'], // 跳過(guò)文件 } module.exports = {// ...plugins: [new CleanWebpackPlugin(pathsToClean, cleanOptions)] }

compression-webpack-plugin

提供帶 Content-Encoding 編碼的壓縮版的資源

基本用法：

module.exports = {plugins: [new CompressionPlugin()] }

progress-bar-webpack-plugin

編譯進(jìn)度條插件

基本用法：

module.exports = {//...plugins: [new ProgressBarPlugin()] }

代碼相關(guān)類

webpack.ProvidePlugin

自動(dòng)加載模塊，如 $ 出現(xiàn)，就會(huì)自動(dòng)加載模塊；$ 默認(rèn)為'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樣式，對(duì)比：

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文件名})] }

編譯結(jié)果優(yōu)化類

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: { // 丑化參數(shù)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 壓縮優(yōu)化器cssProcessorOptions: { discardComments: { removeAll: true } } // 去除所有注釋})]} };

webpack-md5-hash

使你的chunk根據(jù)內(nèi)容生成md5，用這個(gè)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會(huì)在production的模式下自動(dòng)開啟，默認(rèn)情況下，webpack會(huì)將 node_modules 下的所有模塊定義為異步加載模塊，并分析你的 entry、動(dòng)態(tài)加載（import()、require.ensure）模塊，找出這些模塊之間共用的node_modules下的模塊，并將這些模塊提取到單獨(dú)的chunk中，在需要的時(shí)候異步加載到頁(yè)面當(dāng)中，其中默認(rèn)配置如下：

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數(shù)priority: -20,reuseExistingChunk: true}}}} };

編譯優(yōu)化類

DllPlugin && DllReferencePlugin && autodll-webpack-plugin

dllPlugin 將模塊預(yù)先編譯，DllReferencePlugin 將預(yù)先編譯好的模塊關(guān)聯(lián)到當(dāng)前編譯中，當(dāng) webpack 解析到這些模塊時(shí)，會(huì)直接使用預(yù)先編譯好的模塊。

autodll-webpack-plugin 相當(dāng)于 dllPlugin 和 DllReferencePlugin 的簡(jiǎn)化版，其實(shí)本質(zhì)也是使用 dllPlugin && DllReferencePlugin，它會(huì)在第一次編譯的時(shí)候?qū)⑴渲煤玫男枰A(yù)先編譯的模塊編譯在緩存中，第二次編譯的時(shí)候，解析到這些模塊就直接使用緩存，而不是去編譯這些模塊。

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), // 引進(jìn)dllPlugin編譯的json文件name: 'vendor_library' // 全局變量名，與dllPlugin聲明的一致}] }

autodll-webpack-plugin 基本用法：

module.exports = {plugins: [new AutoDllPlugin({inject: true, // 與 html-webpack-plugin 結(jié)合使用，注入html中filename: '[name].js',entry: {vendor: ['react','react-dom']}})] }

happypack && thread-loader

多線程編譯，加快編譯速度，thread-loader不可以和 mini-css-extract-plugin 結(jié)合使用。

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 將構(gòu)建的統(tǒng)計(jì)信息寫入文件，該文件可在 http://webpack.github.io/anal...，并根據(jù)分析結(jié)果，可使用 PrefetchPlugin 對(duì)部分模塊進(jìn)行預(yù)解析編譯（本人也不理解這個(gè)plugin，據(jù)說(shuō)優(yōu)化效果不明顯，有興趣的同學(xué)請(qǐng)見 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

統(tǒng)計(jì)編譯過(guò)程中，各loader和plugin使用的時(shí)間。

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");const smp = new SpeedMeasurePlugin();const webpackConfig = {plugins: [new MyPlugin(),new MyOtherPlugin()] } module.exports = smp.wrap(webpackConfig);

轉(zhuǎn)載自：https://segmentfault.com/a/11...

總結(jié)

以上是生活随笔為你收集整理的webpackPlugin插件总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。