webpack Plugins列表

• 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列表的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。