webpack.DllPlugin与webpack.DllReferencePlugin不生效

Question

webpack.dll.config.js代码如下：

const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {

  vendor: ['vue-router','vuex','iview','axios','vue']

},
output: {

path: path.resolve(base.path),
filename: '[name].dll.js',
library: '[name]_library'

},
plugins: [

new webpack.DllPlugin({
  path: path.resolve('../dist', '[name]-manifest.json'),
  name: '[name]_library'
})

]
};

在webpack.prod.config.js中添加代码:

plugins: [

new webpack.DllReferencePlugin({
  manifest: require('../dist/vendor-manifest.json')
})

]

package.json文件中添加：
"scripts": {

"build:dll": "webpack --config build/webpack.dll.config.js"

},

基于vue-cli，代码如上所示，npm run build:dll 能正常把依赖单独打包出来，关键是npm run build打包还是会把这些依赖打包进去，感觉没生效？哪里有问题吗？

Answer 1

如你是部分的包无法被DLLReference引用,这个答案可能不适合你的情况

你的问题可能是由于webpack的context设置有误导致的
举个例子

client
    | my app codes....
dist
     | - index.bundle.js
     | - manifest.json
     | - vendor.js
scripts
     | - webpack.config.js
     | - webpack.dll.config.js

// webpack.dll.config.js
module.exports={
  context:path.resolve(__dirname, '../client')
plugins:[new webpack.DllPlugin({
      path: path.resolve(__dirname, '../dist'),
      name: 'vendor'
})]
}

// webpack.config.js
module.exports={
  context:path.resolve(__dirname, '../client')
}

最后生成的

// manifest.json
{ 
  "name":"vendor",
  "content":{"../node_modules/react/index.js"......

注意../node_modules,对于client文件夹下的代码,它们去importreact包就会用这个路径../node_modules/react
正是因为我配置了context:path.resolve(__dirname, '../client')所以才生成这样的结果,如果没配,则会是

{ 
  "name":"vendor",
  "content":{"./node_modules/react/index.js"......

那样DLLReference就会找不到react包

Answer 2

也是这个问题。解决了么？

Answer 3

dll打包配置教程，望有助，亲测可用，我写的~~哈哈哈