前一篇文章说了通过DllPlugin DllReferencePlugin 实现依赖包分开打包并注入到代码中, 近期使用的时候发现了一个坑， 在此说明
问题描述：
dllPlugin将vue, vuex, vue-route 等打入 vue-bucket.dll.js 内， 然后用DllReferencePlugin在webpack.base.conf.js 中声明。 结果vue依然被webpack打包进到vendor.js中。
问题代码
// config/index.js
modulex.exports = {
...
library: {
'vueBucket_v1_0': [
"vue", // 有问题的依赖
"vue-lazyload",
"vue-resource",
"vue-router",
"vuex",
"vuex-router-sync",
]
},
}
// build/webpack.base.conf.js
module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js',
}
}
}
查找原因
- 在webpack.base.conf.js 中有一段配置。 将alias vue$注释掉之后发现vendor.js的体积变小了很多。 发现有效果
module.exports = {
...
alias: {
'vue$': 'vue/dist/vue.common.js' // 将这一段注释掉
}
}
-
但是项目根本跑不起来。
报错信息 google之后发现vue的node_module中package.json文件的中main指向的却不是vue.common.js文件。 main指向的是 dist/vue.runtime.common.js 文件。 这就是问题所在
{
"name": "vue",
"version": "2.4.4",
"description": "Reactive, component-oriented view layer for modern web interfaces.",
// 注意下面这几行
"main": "dist/vue.runtime.common.js",
"module": "dist/vue.runtime.esm.js",
"unpkg": "dist/vue.js",
"typings": "types/index.d.ts",
...
}
解法
- library中的依赖包需要和代码中引用的依赖包指向同一个文件，这样子DllPlugin和DllReferencePlugin才可以正确的配合
// config/index.js
modulex.exports = {
...
library: {
'vueBucket_v1_0': [
"vue/dist/vue.common.js", // vue替换成"vue/dist/vue.common.js"
"vue-lazyload",
"vue-resource",
"vue-router",
"vuex",
"vuex-router-sync",
]
},
}
// build/webpack.base.conf.js
module.exports = {
...
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js', // 保持原样
}
}
}
