webpack学习笔记——插件篇plugins

前言

这篇文章纯粹是作为笔记记录的方式分享我平时项目中常用的一些插件，以及提供一些我觉得不错的博文链接～

以下是常用插件列表，假如你都知道的话就可以直接跳过这篇文章啦

happypack
dllplugin
commons-chunk-plugin
webpack-dev-server
webpack-dev-middleware
webpack-hot-middleware（HMR）
webpack-hot-server-middleware
http-proxy-middleware
html-webpack-plugin
extract-text-webpack-plugin
optimize-css-assets-webpack-plugin
uglifyjs-webpack-plugin
imagemin-webapack-plugin
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

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

资料分享：使用 HappyPack 和 DllPlugin 来提升你的 Webpack 构建速度

commons-chunk-plugin

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

关于commons-chunk-plugin更详细的使用和配置以及与DllPlugin的异同之处，有两篇不错的文章分享给大家～

知多一点 webpack 的 CommonsChunkPlugin

webpack分离第三方库(CommonsChunkPlugin并不是分离第三方库的好办法DllPlugin科学利用浏览器缓存）

协助开发类

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的结合版，我也只是听说。。并没有用过。

详细分析推荐一下文章～

webpack官网介绍

webpack-dev-server和webpack-dev-middleware的区别

Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc

http-proxy-middleware

easonhuang123 / blog