javascript - 在 Webpack 中调用多个入口点

Question

我使用带有 typescript 和 babel 的 webpack 来管理我的客户端 Web 应用程序。

我想要一个用于第 3 方脚本的 vendor.js 文件、一个 main.js 文件以及我可以根据需要加载的每页脚本以提供特定的页面的功能。

所有脚本都按照我的预期进行编译，但实际上只有 vendor.js 文件被调用。其他的被编译，但从未被调用。

下面是我的 webpack.config.js 文件。

'use strict';

let webpack = require('webpack');

module.exports = {
  entry: {
    main: './assets/js/main.ts',
    "single-page": './assets/js/src/new-loan.ts',
    vendor: [
      "svg4everybody"
    ]
  },
  output: {
    filename: './public/assets/js/[name].js'
  },
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: Infinity
    })
  ],
  module: {
    loaders: [{
      test: /\.ts(x?)$/,
      loader: 'babel-loader!ts-loader',
      exclude: /node_modules/
    }]
  }
}

以及页面特定文件之一的示例。理想情况下，加载后，该文件会在页面上触发alert通知。

webpackJsonp([1],[
/* 0 */
/***/ function(module, exports) {

    'use strict';

    alert('test');

/***/ }
]);

我可以看到/为什么/警报没有触发(模块函数从未被调用)，但我不知道如何配置 webpack 以使其按照我希望的方式工作。

感谢您的帮助。

Answer 1

我发现 CommonsChunkPlugin 正在覆盖您配置中的 vendor 包。尝试将 CommonsChunkPlugin 的名称从 vendor 更改为 common，并在所有文件中包含 common 包，在所有其他捆绑之前。如果您使用 CommonsChunkPlugin，则只有公共(public)包才会包含核心 webpack 模块加载器辅助函数，因此它必须嵌入到每个页面中。

new webpack.optimize.CommonsChunkPlugin({
  name: "common",
  minChunks: Infinity
})