webpack常用插件篇plugins

以下是常用插件列表

1.happypack
2.dllplugin
3.commons-chunk-plugin
4.webpack-dev-server
5.webpack-dev-middleware
6.webpack-hot-middleware（HMR）
7.webpack-hot-server-middleware
8.http-proxy-middleware
9.html-webpack-plugin
10.extract-text-webpack-plugin
11.optimize-css-assets-webpack-plugin
12.uglifyjs-webpack-plugin
13.imagemin-webapack-plugin
14.copy-webpack-plugin

加快构建速度类

happyPack

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

DLL字面意思了解一下

DLL(Dynamic Link Library)文件为动态链接库文件，又称“应用程序拓展”，是软件文件类型。 在Windows中，许多应用程序并不是一个完整的可执行文件，它们被分割成一些相对独立的动态链接库，即DLL文件，放置于系统中。 当我们执行某一个程序时，相应的DLL文件就会被调用

我们在项目中一定会引入不少第三方的库，例如一些框架啊工具啊啥的，我们一般来说不会去改动这些文件，所以我们期盼的效果是在不改动这些库文件的情况下，打包一次就够了。这时有个牛逼的插件出现了——DLLPlugin。
DLLPlugin和DllReferencePlugin需要结合一起使用，首先需要独立建一个配置文件。
webpack.dll.conf.js

{
    entry: {
        vendor: [
            "vue",
            "vue-router",
            "vuex"
        ]
    },
    output: {
        path: path.join(__dirname, '../static/'), // 输出的路径
        filename: '[name].dll.js', // 输出的文件，将会根据entry命名为vendor.dll.js
        library: '[name]_library' // 暴露出的全局变量名
    },
    plugins: [
        new webpack.DllPlugin({
        path: path.join(__dirname, '../static/', '[name]-mainfest.json'), // 描述依赖对应关系的json文件
        name: '[name]_library', 
        context: __dirname // 执行的上下文环境，对之后DllReferencePlugin有用
        })
    ]
}

这会生成一个manifest.json文件，存储各个模块与库文件的对应关系，然后在原配置文件中加上DllReferencePlugin

plugins: [
    new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: require('../static/vendor-mainfest.json') // 指向这个json
    })
]

最后运行以下命令行将库文件打包好

webpack --config ./build/webpack.dll.conf.js

再打包我们原先的业务代码，大功告成～！

commons-chunk-plugin

commons-chunk-plugin的作用是用来提取项目中公共依赖模块到一个新的chunk，一般用于抽离类库node_modules。

协助开发类

webpack-dev-middleware

在webpack-cli中我们会启动开发模式webpack --wactch来观察代码的改动从而进行重新构建。类似的，webpack-dev-middleware起了一个中间件的作用，用它输出的文件会存在内存里，构建速度相当快，所以可以利用它配合服务器（如express）作为静态资源服务器（本地）用于开发。

webpack-dev-server

webpack-dev-server大家可能会比较熟悉，它本身就是一个express服务器，它就是封装了webpack-dev-middleware，还可以用到下面将会提及的HMR。

webpack-hot-middleware（HMR）

webpack-hot-middleware结合了webpack-dev-middleware，实现了浏览器无刷新更新

webpack-hot-server-middleware

emmmm就是webpack-hot-middleware和webpack-dev-middleware的结合版，我也只是听说。。并没有用过。

http-proxy-middleware

认识到这个插件的缘由是我在vue-cli（webpack模式）中进行本地开发时遇到了跨域问题，后来是使用到proxyTable来解决了这个问题。

在更进一步的了解得知proxyTable是作为http-proxy-middleware插件的配置选项，在express服务器中作为接口代理的功能。

构建基础类

html-webpack-plugin

这个插件大多读者都应该很熟悉，它会用于生成一个html文件，并将最终生成的js，css以及一些静态资源文件以script和link的形式动态插入其中。你可以自定义这个html也可以让插件生成一个新的html。

对于多页面应用，可以通过配置多个html-webpack-plugin生成多个html文件。
const glob = require(‘glob’)

function htmlWebpackConfigs () {
    var configs = []
    glob.sync('./src/apps/**/*.html').forEach(htmlPath => {
        const chunk = htmlPath.split('./src/apps/')[1].split('/index.html')[0]
        const filename = chunk + '.html'
        const htmlConf = {
          filename: filename,
          template: htmlPath,
          chunks: ['vendors', chunk]
        }
        configs.push(new HtmlWebpackPlugin(htmlConf))
    })
    return configs
}

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

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'
        }
])

优化压缩类

extract-text-webpack-plugin

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
        }
    }),
]