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
操作系统 Windows 10
节点版本： 8.9.0
NPM版本： 5.5.1
Webpack版本 4.5.0
浏览器： Chrome 65
语言： ESNext

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

Answer 1

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

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

1 个答案: