Webpack Aurelia:找不到ID为my app的模块

我们正在更新webpack以使用版本4（目前使用的是3.8.1），但我们遇到了以下错误：

找不到ID为：my app的模块

这是引导文件：

bootstrap(async (aurelia: Aurelia) => {
  aurelia.use
      .standardConfiguration()
      .plugin(PLATFORM.moduleName('aurelia-dialog'), config => {
        config.useDefaults();
        config.settings.startingZIndex = 2000;
      })
      .plugin(PLATFORM.moduleName('aurelia-validation'), config => {
        config.customValidator(AjvValidator);
      });

  if (debugMode) {
    aurelia.use.developmentLogging();
  }

  await aurelia.start();
  await aurelia.setRoot(PLATFORM.moduleName('my-app'), document.getElementById('root'));
});

目录结构是

src -|
     |- ...directories (views, repositories, etc)
     |- bootstrap.ts
     |- my-app.html
     |- my-app.ts

如果我尝试将

my app

设置为目录（带有

index.ts

和

index.html

文件），则错误会发生一些变化：

找不到ID为my app.html的模块

我尝试使用

getViewStrategy

指向

index.html

，但没有成功

如果在引导代码中，我更改为

PLATFORM.moduleName（'my-app/index'）

，则错误变为：

找不到ID为“我的应用程序/索引”的模块

在这种情况下，正确的设置是什么

其他信息：

• 我们正在使用aurelia网页包-plugin@3.0.0（NPM的最新版本）
• 这是start命令：

  webpack dev server--config webpack.dev.config.js

  ，build命令中也会发生错误

这是基本网页包配置：

module.exports = (options) => ({
  context: path.resolve(__dirname, 'src'),
  mode: options.mode,
  entry: [
    'regenerator-runtime/runtime',
    'reflect-metadata',
    'babel-polyfill',
    'event-source-polyfill',
    `./scss/main-${options.product}.scss`,
    `./bootstrap-${options.product}.ts`
  ],
  output: Object.assign({
    sourceMapFilename: '[file].map'
  }, options.output),
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.tsx?$/,
        loader: 'source-map-loader'
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => {
                return [
                  require('autoprefixer')({
                    browsers: ['> 5%', 'last 2 versions']
                  })
                ];
              }
            }
          },
          'sass-loader'
        ]
      },
      {
        test: /\.tsx?$/,
        use: ['babel-loader', 'ts-loader']
      },
      {
        test: /\.html$/,
        use: options.product === PRODUCTS.styleguide.name ? ['raw-loader', 'highlightjs-loader'] : ['raw-loader']
      },
      {
        test: /\.(svg|png|ico)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'file-loader',
            options: {
              hash: 'sha512',
              digest: 'hex',
              name: options.imageNamePattern
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true,
              optipng: {
                optimizationLevel: 7
              },
              gifsicle: {
                interlaced: false
              },
              mozjpeg: {
                bypassOnDebug: true
              }
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2)$/,
        loader: 'url-loader?limit=100000'
      }
    ]
  },
  plugins: options.plugins.concat([
    new AureliaPlugin({aureliaApp: undefined}/* {aureliaApp: undefined, includeAll: 'src'} */),
    // To strip all locales except “en”
    new MomentLocalesPlugin(),
    new webpack.IgnorePlugin(/regenerator|nodent|js-beautify/, /ajv/),
    new webpack.ProvidePlugin({
      // make fetch available
      fetch: 'exports-loader?self.fetch!whatwg-fetch'
    }),
    // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
    // inside your code for any environment checks; UglifyJS will automatically
    // drop any unreachable code.
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    })
  ]),
  resolve: {
    alias: {
      ajv: path.join(__dirname, 'node_modules', 'ajv', 'dist', 'ajv.bundle.js'),
      pikaday: path.join(__dirname, 'node_modules', 'pikaday', 'pikaday.js'),
      'moment-timezone': path.join(
        __dirname,
        'node_modules',
        'moment-timezone',
        'builds',
        'moment-timezone-with-data.js'
      ),
      'raven-js': path.join(
        __dirname,
        'node_modules',
        'raven-js',
        'dist',
        'raven.js'
      )
    },
    extensions: ['.ts', '.js', '.scss', '.html'],
    modules: [srcDir, 'node_modules']
  },
  devtool: options.devtool,
  target: 'web', // Make web variables accessible to webpack, e.g. window
  performance: options.performance || {},
  optimization: {
    namedModules: true,
    splitChunks: {
      name: 'vendor',
      minChunks: 2
    }
  }
})

---

感觉您正在以webpack无法解析我的应用程序的方式对root/baseUrl进行别名/配置？你能四处看看是否有这样的配置吗？

我也有同样的问题。对我来说，这是因为我在本地安装了插件，使用npm install/path。发布插件后，我能够正常使用它，如文档中所述。

感谢您的建议。我没有注意到任何不规则的东西。然而，在检查我的捆绑包代码时，我注意到，应该缺少的目标代码实际上是捆绑包的一部分，并引用如下内容：

/***/“我的应用程序？90d4”：/**********************************！****/my-app.ts***！\************************************************/*！找不到静态导出*/***/

很抱歉格式设置不好…我在您的

AureliaPlugin

中看到

includeal

，您可以删除它吗，也可以从配置中删除

上下文

，因为您似乎只是在使用默认值。我认为

includeAll

会在您的捆绑包中引起冲突，所以我尝试了几种方法，删除

context

会使它不知道引导文件在哪里，不向

AureliaPlugin传递任何内容会使网页包构建失败：
无法解析模块“main”
，同时传递一个空对象。如果我在对象中放入一个键，则没有生成错误，但仍然使用模块ID维护运行时错误。最后，我尝试将
？90d4
附加到
setRoot（PLATFORM.moduleName（'my-app'））
，它确实加载了ts文件（我在其中放入了控制台日志），但由于找不到
我的app？90d4.html
（在构建中，HTML文件的映射方式不同：
my app？87da
）你混合了ts加载器和babel加载器，这就是问题所在吗？你能试试吗。如果你仍然无法解决这个问题，我建议创建一个全新的项目，并将json包、webpack config包复制到Debuggi上。我已经设法通过使用CLI创建一个新的起点，并将基本结构复制到我的项目中现在，我必须弄清楚CSS和图像，因为它与我们之前所做的有所不同，但现在的情况比两天前要好。谢谢你的帮助