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 development
            pngquant: {
                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'
            }
    ])