鍍金池/ 問答/HTML/ webpack.DllPlugin與webpack.DllReferencePl

webpack.DllPlugin與webpack.DllReferencePlugin不生效

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 能正常把依賴單獨(dú)打包出來，關(guān)鍵是npm run build打包還是會把這些依賴打包進(jìn)去，感覺沒生效？哪里有問題嗎？

回答
編輯回答
互擼娃

dll打包配置教程，望有助，親測可用，我寫的~~哈哈哈

2017年11月15日 00:01
編輯回答
過客

也是這個問題。解決了么？

2018年1月10日 18:06
編輯回答
淺淺

如你是部分的包無法被DLLReference引用,這個答案可能不適合你的情況

你的問題可能是由于webpack的context設(shè)置有誤導(dǎo)致的
舉個例子

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文件夾下的代碼,它們?nèi)?code>importreact包就會用這個路徑../node_modules/react
正是因為我配置了context:path.resolve(__dirname, '../client')所以才生成這樣的結(jié)果,如果沒配,則會是

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

那樣DLLReference就會找不到react包

2018年3月31日 14:06