使用 Webpack 4.x 的 Aurelia 应用程序示例是什么？

Question

我正在尝试将 aurelia-webpack-plugin 版本 3.0.0-rc.1 与 Webpack 4.5 集成。这是我的 webpack 配置的样子：

const {AureliaPlugin} = require('aurelia-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpackConfig = {
  entry: {
    main: "aurelia-bootstrapper",
  },
  module: {
    rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader"
        },
        {
          test: /\.html$/,
          loader:'html-loader',
          exclude: path.resolve('src/index.html')
        },
        {
          test: /\.less$/i,
          use: ["style-loader", "css-loader", "less-loader"]
        },
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"]
        },
    ]
  },
  output: {
    path: path.resolve('./dist'),
    filename: '[name].js',
    sourceMapFilename: '[name].js.map',
    chunkFilename: "[name].js",
  },
  plugins: [
    new AureliaPlugin({ aureliaApp: "app", dist: 'native-modules' }),
    new HtmlWebpackPlugin({
        template: 'index.html',
        chunksSortMode: 'dependency'
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  resolve: {
    extensions: [".ts", ".js"],
    modules: ["./src", "./node_modules"],
  },
 devtool: 'cheap-module-source-map',
  mode: 'development',
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    disableHostCheck: true,
    publicPath: '/',
    inline: true,
    port: 9000,
    hot: true,
    host: 'localhost',
    clientLogLevel: 'info',
    contentBase: './',
    watchOptions: {
      ignored: /node_modules/
    },
    historyApiFallback: true
  },
};

module.exports = webpackConfig;

我的 index.html 看起来像这样：

<!DOCTYPE html>
<html>
<head>
</head>
<body aurelia-app="main">
</body>
</html>

当我运行 webpack-dev-server --config build/webpack.hmr.js 时，我在浏览器中收到此错误：

aurelia-loader-webpack.js:187 Uncaught (in promise) Error: Unable to find module with ID: aurelia-framework
    at WebpackLoader.<anonymous> (aurelia-loader-webpack.js:187)
    at step (aurelia-loader-webpack.js:36)
    at Object.next (aurelia-loader-webpack.js:17)
    at aurelia-loader-webpack.js:11
    at new Promise (<anonymous>)
    at ./node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js.__awaiter (aurelia-loader-webpack.js:7)
    at WebpackLoader../node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js.WebpackLoader._import (aurelia-loader-webpack.js:152)
    at WebpackLoader.<anonymous> (aurelia-loader-webpack.js:252)
    at step (aurelia-loader-webpack.js:36)
    at Object.next (aurelia-loader-webpack.js:17)

库版本： 3.0.0-rc.1
操作系统： Windows10
节点版本： 8.9.0
NPM 版本： 5.5.1
Webpack 版本 4.5.0
浏览器： Chrome65
语言： ESNext

似乎没有任何关于集成了 aurelia-webpack-plugin 的 Webpack 4 配置的文档，所以我在这里有些摸不着头脑。任何想法我做错了什么？

Answer 1

从 0.33.0 开始，Aurelia CLI 创建的默认 Aurelia 应用程序使用 Webpack 4。你可以让它生成一个应用程序，然后看看它是如何工作的。

使用 Webpack 4.x 的 Aurelia 应用程序示例是什么？

What's an example of an Aurelia app using Webpack 4.x?

webpack

aurelia