Webpack拋出錯誤與pkg依賴關係從應用程序拆分供應商的列表

Question

我試圖在我的webpack配置中爲prod構建實現代碼拆分 - 從應用程序代碼中分離供應商文件。但是，當我嘗試建立，我得到以下錯誤：

ERROR in multi bootstrap font-awesome jquery popper.js progress-bar-webpack-plugin vue vue-resource vue-router vuex 

上市基本上包在我的依賴關係。 這裏是什麼，我在我的Webpack.dist.conf文件的一個片段：

const pkg = require('../package.json'); 
output: { 
    path: path.join(process.cwd(), conf.paths.dist), 
    filename: '[name]-[hash].js' 
}, 
entry: { 
    app: `./${conf.path.src('index')}`, 
    vendor: Object.keys(pkg.dependencies) 
} 

編輯 我發現，這個問題是與字體真棒。當我從vendor.js中刪除font-awesome時，事情開始正常工作。仍然不知道什麼是錯誤的font-awesome導致這個錯誤。

Answer 1

我嘗試使用webpack-dll-bundle-plugin將供應商與應用分開。它像一個魅力:)

希望它有幫助。

樣品webpack.config.js

const path = require('path'); 
const join = path.join.bind(path, __dirname); 
const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin; 
const pkg = require('./package.json'); 
const webpack = require('webpack'); 

module.exports = { 
    entry: { 
     main: './src/scripts/main.js' 
    }, 
    output: { 
     path: path.resolve('./client'), 
     filename: '[name].js', 
     publicPath: '/client/', 
     chunkFilename: '[name].js' 
    }, 
    cache: true, 
    module: { 
     loaders: [{ 
       test: /\.js$/, 
       loader: 'babel-loader', 
       // exclude: [path.join(__dirname, 'node_modules'), path.join(__dirname, './src', 'scripts', 'routes')], 
       exclude: [path.join(__dirname, 'node_modules')], 
       query: { 
        cacheDirectory: true, 
        presets: ['react', 'es2015'], 
        compact: false 
       } 
      } 
     ] 
    }, 
    plugins: [ 
     new DllBundlesPlugin({ 
      bundles: { 
       vendor: Object.keys(pkg.dependencies) 
      }, 
      dllDir: join('client', 'vendor'), 
      webpackConfig: { 
       plugins: [ 
        new webpack.optimize.UglifyJsPlugin({ 
         comments: false 
        }) 
       ] 
      } 
     }) 

    ], 
    resolve: {} 
}; 

的package.json：

"dependencies": { 
    "classnames": "^2.2.5", 
    "es6-map": "^0.1.4", 
    "es6-promise": "^4.0.5", 
    "file-saver": "^1.3.3", 
    "guid": "0.0.12", 
    "jquery": "^3.1.1", 
    "lodash": "^4.17.4", 
    "moment": "^2.14.1", 
    "prop-types": "^15.6.0", 
    "react": "^15.4.2", 
    "react-addons-transition-group": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-draggable-tab": "^0.8.1", 
    "xml-writer": "^1.7.0" 
    }