vue-loader 中使用DLLPlugin打包的小坑

前一篇文章说了通过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',  // 保持原样    
    }
  }
}