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

您的libs不应该是条目。他们用Webpack的话来称呼“供应商”。

请参阅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文件

1 个答案:

请参阅minimum working example repo。