Question

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

我希望有一个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的名称从common更改为vendor，并在所有文件中包含common捆绑包，然后再添加其他捆绑包。如果使用CommonsChunkPlugin，则只有公共包将包含核心webpack模块加载器帮助程序函数，因此必须将其嵌入到每个页面中。

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

在Webpack中调用多个入口点

1 个答案: