webpack.DllPlugin和webpack.DllReferencePlugin静态资源预编译插件

  • 现在因为有HMR局部热更新,所以dllPlugin这两个插件用得少了,不过还是记录一下配置方法,可能以后会再次使用。
  • 这两个插件可以对第三方NPM包预编译,生成*.dll.js,在项目启动和开发中不停的反复Ctrl+S的时候,webpack就不需要每次都重新编译那些固定不变的NPM包了,大大提升编译速度。

    1.

    新建一个webpack.dll.config.js :
    (我是创建在根目录下的)

const path = require("path");
const webpack = require("webpack");
const pkg = require('./package.json'); // 引入package.json
module.exports = {
    entry: {
        vendor: Object.keys(pkg.dependencies) // 遍历package.json的所有依赖包
    },
    output: {
        path: path.join(__dirname, 'dll'), // 生成的文件存放路径
        filename: '[name].dll.js', // 生成的文件名字(默认为vendor.dll.js)
        library: '[name]_library'  // 生成文件的映射关系,与下面DllPlugin中配置对应
    },
    plugins: [
        new webpack.DllPlugin({
            // 会生成一个json文件,里面是关于dll.js的一些配置信息
            path: path.join(__dirname, 'dll', '[name]-manifest.json'),
            name: '[name]_library', // 与上面output中配置对应
            context: __dirname // 上下文环境路径(必填,为了与DllReferencePlugin存在与同一上下文中)
        })
    ]
};

2.

原webpack.dev.config.js (即开发环境所用到的webpack配置文件):
在plugins字段中增加DllReferencePlugin插件

plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname, // 与DllPlugin中的那个context保持一致
            /** 
                下面这个地址对应webpack.dll.config.js中生成的那个json文件的路径
                这样webpack打包时,会检测此文件中的映射,不会把存在映射的包打包进bundle.js
            **/
            manifest: require('./dll/vendor-manifest.json')
        }),
        // ...
    ]

3. 引入index.html

需要在项目index.html中引入上面生成的dll.js文件

<script src="/vendor.dll.js"></script>
// 注意1: vendor.dll.js必须在bundle.js之前引入,因为bundle.js依赖vendor.dll.js。
// 注意2: 这个路径啊,我因为用的是webpack-dev-middleware自定义的服务,所以需要我自己提供/vendor.dll.js的访问。我使用的是express,所以我配置了:app.use(express.static('dll')); 所以访问路径直接就是"/vendor.dll.js"
// 如果用的webpack.dev.server,好像就不用担心这个

4.

package.json文件中添加一条用于预编译的指令:

"scripts": {
    "dll": "webpack -p --config webpack.dll.config.js --progress --profile --colors",
    "start": "node server.js",
  }

5

执行npm run dll,打包好dll
再执行npm run start, 运行开发环境
就OK了

唯一麻烦的是,每次有依赖包升级或加入了新的包,都得手动run dll一下。
但有个优秀的自动化插件可以解决:
autodll-webpack-plugin,可以全自动化,但webpack4.0+之后,作者还没有更新完毕,目前(2018/04/25)使用会报错

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页