• happypack?能使得webpack進行node多線程構(gòu)建項目，從而提高構(gòu)建速度
  • const os = require('os') const HappyPack = require('happypack') const happThreadPool = HappyPack.ThreadPool({size: os.cpus().length}) // 采用多進程，進程數(shù)由CPU核數(shù)決定plugins:[new HappyPack({id: 'js',cache: true,loaders: ['babel-loader?cacheDirectory=true'],threadPool: happThreadPool}), ]
• dllplugin
  • 把所有的webpack的依賴關(guān)系到處成一個.json文件，然后可以下次接著用，類似于maven功能。
• commons-chunk-plugin
  • 的作用是用來提取項目中公共依賴模塊到一個新的chunk�，一般用于抽離類庫node_modules。
• webpack-dev-server
  • 用于跟著服務(wù)器啟用一個localhost/webpack-dev-server/ ，用于熱更新。
• webpack-dev-middleware

  • 在webpack-cli中我們會啟動開發(fā)模式webpack --wactch來觀察代碼的改動從而進行重新構(gòu)建。類似的，webpack-dev-middleware起了一個中間件的作用，用它輸出的文件會存在內(nèi)存里，構(gòu)建速度相當(dāng)快，所以�可以利用它配合服務(wù)器（如express）作為靜態(tài)資源服務(wù)器（本地）用于開發(fā)

• http-proxy-middleware
  • webpack本地開發(fā)的時候，設(shè)置代理，后來是使用到proxyTable來解決代替了。
• html-webpack-plugin
  • 它會用于生成一個html文件，并將最終生成的js，css以及一些靜態(tài)資源文件以script和link的形式動態(tài)插入其中。你可以自定義這個html也可以讓插件生成一個新的html。
• extract-text-webpack-plugin
  • 會將你項目中的css都單獨打包，不會內(nèi)嵌到j(luò)s bunlde中，這樣css和js即可并行加載，而代價就是額外的http請求。
  • module: {rules: [{test: /\.css$/,loader: ExtractTextPlugin.extract('style-loader', 'css-loader')}] }, plugins: [new ExtractTextPlugin({filename: 'css/[name].[contenthash].css'}) ]
• optimize-css-assets-webpack-plugin
  • optimize-css-assets-webpack-plugin對css文件進行優(yōu)化和最小化操作
  • plugins: [new OptimizeCssAssetsPlugin({assetNameRegExp: /\.optimize\.css$/g,cssProcessor: require('cssnano'),cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },canPrint: true}) ]
• uglifyjs-webpack-plugin
  • uglifyjs-webpack-plugin對js文件進行壓縮并且結(jié)合tree shaking刪除未引用代碼
  • plugins: [new webpack.optimize.UglifyJsPlugin({compress: {warnings: false,drop_console: true},sourceMap: true}) ]
• imagemin-webapack-plugin
  • imagemin-webapack-plugin顧名思義就是對項目中的圖片進行壓縮～
  • plugins: [new ImageminPlugin({test: /\.(jpe?g|png|gif|svg)$/i,disable: process.env.NODE_ENV !== 'production', // Disable during developmentpngquant: {quality: '90-100'},gifsicle: {optimizationLevel: 2,interlaced: true},optipng: {optimizationLevel: 4,},jpegtran: {progressive: true}}), ]
• copy-webpack-plugin
  • 對資源進行拷貝，例如一些靜態(tài)資源直接拷貝到打包后的文件夾中
  • new CopyWebpackPlugin([{from :'html',to:'html'},{context: 'global/img',from: '**/*',to:'img/common'},{from: 'img',to:'img'},{from :'global/lib/es5-shim-sham.js'} ])

?

總結(jié)

以上是生活随笔為你收集整理的webpack Plugins列表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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