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

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

• http-proxy-middleware
  • webpack本地開發的時候，設置代理，后來是使用到proxyTable來解決代替了。
• html-webpack-plugin
  • 它會用于生成一個html文件，并將最終生成的js，css以及一些靜態資源文件以script和link的形式動態插入其中。你可以自定義這個html也可以讓插件生成一個新的html。
• extract-text-webpack-plugin
  • 會將你項目中的css都單獨打包，不會內嵌到js 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文件進行優化和最小化操作
  • 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文件進行壓縮并且結合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
  • 對資源進行拷貝，例如一些靜態資源直接拷貝到打包后的文件夾中
  • new CopyWebpackPlugin([{from :'html',to:'html'},{context: 'global/img',from: '**/*',to:'img/common'},{from: 'img',to:'img'},{from :'global/lib/es5-shim-sham.js'} ])

?

總結

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

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