Webpack 在从应用程序中拆分供应商时抛出 pkg 依赖项列表错误答案

【问题标题】：Webpack throws error with list of pkg dependencies on splitting vendor from appWebpack 在从应用程序中拆分供应商时抛出 pkg 依赖项列表错误
【发布时间】：2018-03-16 13:33:25
【问题描述】：

我正在尝试在我的 webpack 配置中为 prod 构建实现代码拆分 - 将供应商文件与应用程序代码分开。但是当我尝试构建时，出现以下错误：

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

基本上列出了我的依赖项中的包。这是我的 Webpack.dist.conf 文件中的 sn-p：

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 有什么问题。

【问题讨论】：

标签： javascript webpack font-awesome webpack-2 code-splitting

【解决方案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"
  }

【讨论】：