详解基于DllPlugin和DllReferencePlugin的webpack构建优化(2)

//head 标签 <link type="text/css" href="https://www.jb51.net/article/static/dll/vendor.dll.css" > //body 标签 <script src="https://www.jb51.net/article/static/dll/vendor.dll.js"></script>

修改webpack.base.conf.js

plugins: [ ..., new webpack.DllReferencePlugin({ context: __dirname, manifest: require('../static/dll/vendor-mainfest.json') // 指向生成的json文件 }) ]

执行

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

你也可以将该语句放入npm run 中.'build:dll:report' 是为了优化dll依赖关系,添加的另外一条命令.上文已经提过,我们可以借用BundleAnalyzerPlugin插件查看当前包的依赖情况,和包体组成情况.

//package.json "scripts":{ "build:dll": "webpack --config ./build/webpack.dll.conf.js", "build:dll:report": "npm run build:dll --report" }