无法使用 Webpack 连接多个 JS 文件

Question

我在我的项目中使用 Webpack 2 来转换和捆绑 ReactJS 文件以及一些其他任务。这是我的配置：

var webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var config = {
    module: {
      loaders: [
        {
          exclude: /(node_modules)/,
          loader: "babel-loader",
          query: {
            presets: ["es2015", "react"]
          }
        },
        {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ["css-loader", "sass-loader"]
          })
        }
      ]
    },
    plugins: [
      new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
      new ExtractTextPlugin({
        filename: "../../public/dist/main.css"
      })
    ],
};
var indexConfig = Object.assign({}, config, {
    name: "index",
    entry: "./public/javascripts/build/index.js",
    output: {
       path: __dirname + "/public/dist",
       filename: "index.min.js",
    },
});
var aboutConfig = Object.assign({}, config, {
    name: "about",
    entry: "./public/javascripts/build/about.js",
    output: {
       path: __dirname + "/public/dist",
       filename: "about.min.js"
    },
});

// Return Array of Configurations
module.exports = [
    indexConfig, aboutConfig
];

很明显，我正在为 JS 使用多个构建配置，每个页面一个。现在，我需要添加一些 Bootstrap JS 到我还需要 JQuery 和 Tether 的组合中。因此，我的库文件夹中有以下 3 个文件：

jquery-3.2.1.min.js
tether.min.js
bootstrap.min.js

我需要将这 3 个文件与 Webpack 发出的主要 JS 文件（例如 index.min.js 等）连接并捆绑在一起。为此，我修改了我的 entry 项目：

entry: {
  a: "./public/javascripts/lib/jquery-3.2.1.min.js",
  b: "./public/javascripts/lib/tether.min.js",
  b: "./public/javascripts/lib/bootstrap.min.js",
  c: "./public/javascripts/build/index.js"
}

但是，这样做会引发以下错误：

ERROR in chunk a [entry]
    index.min.js
    Conflict: Multiple assets emit to the same filename index.min.js

    ERROR in chunk b [entry]
    index.min.js
    Conflict: Multiple assets emit to the same filename index.min.js

    ERROR in chunk c [entry]
    index.min.js
    Conflict: Multiple assets emit to the same filename index.min.js

显然这是因为 Webpack 需要多个条目项的多个输出文件。有什么办法可以克服这个问题吗？说明类似问题的 existing question 目前似乎没有任何可接受的答案。

更新:

尝试按照 terales 的建议使用 Commons chunk 插件，但是这次 Webpack 抛出了以下错误：

ERROR in multi jquery tether bootstrap
    Module not found: Error: Can't resolve 'jquery' in '/home/ubuntu/panda'
     @ multi jquery tether bootstrap

    ERROR in multi jquery tether bootstrap
    Module not found: Error: Can't resolve 'tether' in '/home/ubuntu/panda'
     @ multi jquery tether bootstrap

    ERROR in multi jquery tether bootstrap
    Module not found: Error: Can't resolve 'bootstrap' in '/home/ubuntu/panda'
     @ multi jquery tether bootstrap

    ERROR in chunk vendor [entry]
    index.min.js
    Conflict: Multiple assets emit to the same filename index.min.js

Answer 1

你的库不应该是条目。他们用 Webpack 的术语称为 "vendors"。

参见minimum working example repo。

在您的代码中，您应该隐含地 extract common vendor chunk：

var config = {
    entry: {                       // <-- you could make two entries
        index: './index.js',       //     in a more Webpack's way,
        about: './about.js'        //     instead of providing array of confings
    },
    output: {
        filename: '[name].min.js',
        path: __dirname + '/dist'
    },
    module: {
        loaders: [
            // Fix error 'JQuery is not defined' if any
            { test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" },
        ]
    },
    plugins: [
        // this assumes your vendor imports exist in the node_modules directory
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function (module) {
                return module.context && module.context.indexOf('node_modules') !== -1;
            }
        })
    ]
};

无法使用 Webpack 连接多个 JS 文件

Unable to concatenate multiple JS files using Webpack

webpack-2

参见minimum working example repo。