I'm trying to integrate the aurelia-webpack-plugin version 3.0.0-rc.1 with Webpack 4.5. Here is what my webpack configuration looks like:
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;
My index.html looks like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body aurelia-app="main">
</body>
</html>
When I run webpack-dev-server --config build/webpack.hmr.js
, I get this error in the browser:
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)
Library Version: 3.0.0-rc.1
Operating System: Windows 10
Node Version: 8.9.0
NPM Version: 5.5.1
Webpack Version 4.5.0
Browser: Chrome 65
Language: ESNext
There doesn't seem to be any documentation for a Webpack 4 configuration that integrates the aurelia-webpack-plugin so I'm somewhat shooting in the dark here. Any ideas what I'm doing wrong?
The default Aurelia application created by the Aurelia CLI uses Webpack 4 as of 0.33.0
. You can have it generate an app and then look at how it works.