Question

我正在尝试将我的Aurelia应用程序从System.js + JSPM移植到Webpack。该应用有多个输入htmls：index.html，index2.html。

由于我是Webpack的新手，我从aurelia skeletons using easy-webpack开始，并尝试逐渐添加我的应用程序特定代码。

对于单一条目index.html的最基本情况，骨架效果很好。我还将我的本地模块添加为node_modules，并在app中使用了相同的内容。

但是，我无法为多个输入htmls正确设置配置。这就是我的webpack.config.js（显示它被修改的部分）的样子：

const baseConfig = {
  entry: {
    'app': [/* this is filled by the aurelia-webpack-plugin */],
    'aurelia-bootstrap': coreBundles.bootstrap,
    'aurelia': coreBundles.aurelia.filter(pkg => coreBundles.bootstrap.indexOf(pkg) === -1),
    'some-common-script': path.resolve('src/some-common-script.js'),
    'index1-script': path.resolve('src/index1-script'), //needed exclusively in index.html
    'index2-script': path.resolve('src/index2-script') //needed exclusively in index2.html
  }, ...
 };

switch (ENV) {
  ...
  default:
  case 'development':
    process.env.NODE_ENV = 'development';
    config = generateConfig(
      baseConfig,
      ...
      require('@easy-webpack/config-common-chunks-simple')
       ({ appChunkName: 'app', firstChunk: 'aurelia-bootstrap' }),      
      require('@easy-webpack/config-generate-index-html')
       ({ minify: false, overrideOptions: { excludeChunks: ["index2-script"] } }),
      require('@easy-webpack/config-generate-index-html')
       ({
         minify: false, overrideOptions: {
         chunks: ['some-common-script', 'index2-script'],
         filename: 'index2.html',
         template: 'index2.html',
         }
      }),...
    );
    break;
}

module.exports = config;

问题如下：

如果我从默认index2-script中排除config-generate-index-html，则index.html中添加脚本的顺序将变为app.bundle.js, aurelia-bootstrap.bundle.js, ...，而不是aurelia-bootstrap.bundle.js, app.bundle.js, ...，导致Uncaught ReferenceError: webpackJsonp is not defined...。
根据我的理解，导致错误为easy-webpack/config-common-chunks-simple（webpack.optimize.CommonsChunkPlugin的包装器）将初始和公共代码打包到aurelia-bootstrap.bundle.js（“bootstrap”块）。因此，我尝试了没有require('@easy-webpack/config-common-chunks-simple')({ appChunkName: 'app', firstChunk: 'aurelia-bootstrap' })，但反而得到了
- aurelia-metadata.js和
- webpack:///webpack/bootstrap <hash>，似乎因为找不到模块而引发。

我对接下来应该尝试的事情感到很困惑。请建议。

如何使用webpack / easy-webpack配置多个入口点htmls？

0 个答案: