Minimal webpack setup for Aurelia without easy-webpack

Question

I want to setup a minimal webpack configuration that supports Aurelia and Babel (for ES2016). I want to acheive this without using easy-webpack (the official skeleton from aurelia is depending on easy-webpack but I want to use the plain webpack).

Any idea how to setup minimal webpack + aurelia + babel correctly?

Answer 1

Update 06-June-2017: The steps mentioned here are outdated and irrelevant because the official skeleton has removed the dependency on easy-webpack. I am keeping this for historical reasons only.

---

Update 9-Nov-2016: For a better version of this solution, see this or this.

---

Ok, here is the full process based on the Aurelia official webpack skeleton.

After downloading skeleton-esnext-webpack from Aurelia github, we will replace any reference to @easy-webpack with the standard webpack modules.

In package.json, remove all modules in "devDependencies" that starts with @easy-webpack:

    "@easy-webpack/config-aurelia": "^2.0.1",
    "@easy-webpack/config-babel": "^2.0.2",
    "@easy-webpack/config-common-chunks-simple": "^2.0.1",
    "@easy-webpack/config-copy-files": "^1.0.0",
    "@easy-webpack/config-css": "^2.3.2",
    "@easy-webpack/config-env-development": "^2.1.1",
    "@easy-webpack/config-env-production": "^2.1.0",
    "@easy-webpack/config-external-source-maps": "^2.0.1",
    "@easy-webpack/config-fonts-and-images": "^1.2.1",
    "@easy-webpack/config-generate-index-html": "^2.0.1",
    "@easy-webpack/config-global-bluebird": "^1.2.0",
    "@easy-webpack/config-global-jquery": "^1.2.0",
    "@easy-webpack/config-global-regenerator": "^1.2.0",
    "@easy-webpack/config-html": "^2.0.2",
    "@easy-webpack/config-json": "^2.0.2",
    "@easy-webpack/config-test-coverage-istanbul": "^2.0.2",
    "@easy-webpack/config-uglify": "^2.1.0",
    "@easy-webpack/core": "^1.3.2",

and replace them with the following:

    "aurelia-webpack-plugin": "^1.1.0",
    "copy-webpack-plugin": "^3.0.1",
    "html-webpack-plugin": "^2.22.0",
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-polyfill": "^6.16.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.4",
    "sourcemap-istanbul-instrumenter-loader": "^0.2.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",

and use the following content for webpack.config.js:

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
var project = require('./package.json');

const DEBUG = true;
const title = 'Aurelia Navigation Skeleton';
const baseUrl = '/';
const rootDir = path.resolve();
const srcDir = path.resolve('src');
const outDir = path.resolve('dist');

const aureliaBootstrap = [
    'aurelia-bootstrapper-webpack',
    'aurelia-polyfills',
    'aurelia-pal-browser',
    'regenerator-runtime',
];

const aureliaModules = Object.keys(project.dependencies).filter(dep => dep.startsWith('aurelia-'));

module.exports = {
    //debug: true,
    //devtool: 'source-map',
    entry: {
        'app': [], // <-- this array will be filled by the aurelia-webpack-plugin
        'aurelia-bootstrap': aureliaBootstrap,
        'aurelia-modules': aureliaModules.filter(pkg => aureliaBootstrap.indexOf(pkg) === -1)
    },
    output: {
        path: outDir,
        filename: '[name]-bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/, // or include: path.resolve('src'),
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'stage-1'],
                    plugins: ['transform-decorators-legacy']
                }
            }, {
                test: /\.html$/,
                exclude: /index\.html$/,
                loader: 'html-loader'
            }, {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader']
            }, {
                test: /\.(png|jpe?g|gif|svg|eot|woff|woff2|ttf)(\?\S*)?$/,
                loader: 'url-loader?limit=100000&name=[name].[ext]'
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            regeneratorRuntime: 'regenerator-runtime', // to support await/async syntax
            Promise: 'bluebird', // because Edge browser has slow native Promise object
            $: 'jquery', // because 'bootstrap' by Twitter depends on this
            jQuery: 'jquery', // just an alias
            'window.jQuery': 'jquery' // this doesn't expose jQuery property for window, but exposes it to every module
        }),
        new HtmlWebpackPlugin({
            title: title,
            template: 'index.html',
            chunksSortMode: 'dependency'
        }),
        new AureliaWebpackPlugin({
            root: rootDir,
            src: srcDir,
            title: title,
            baseUrl: baseUrl
        }),
        new CopyWebpackPlugin([{
            from: 'favicon.ico',
            to: 'favicon.ico'
        }]),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['aurelia-modules', 'aurelia-bootstrap']
        }),
        /*new webpack.optimize.UglifyJsPlugin({
            beautify: DEBUG ? true : false,
            mangle: DEBUG ? false : {screw_ie8 : true, keep_fnames: true},
            dead_code: DEBUG ? false : true,
            unused: DEBUG ? false : true,
            deadCode: DEBUG ? false : true,
            comments: DEBUG ? true : false,
            compress: {
                screw_ie8: true,
                keep_fnames: true,
                drop_debugger: false,
                dead_code: false,
                unused: false,
                warnings: DEBUG ? true : false
            }
        }),*/
    ]
};

Now index.html need to be adjusted a little bit:

<!DOCTYPE html>
<html>
  <head>
    <title><%- htmlWebpackPlugin.options.title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="<%- htmlWebpackPlugin.options.baseUrl %>">
    <!-- imported CSS are concatenated and added automatically -->
  </head>
  <body aurelia-app="main">
    <div class="splash">
      <div class="message"><%- htmlWebpackPlugin.options.title %></div>
      <i class="fa fa-spinner fa-spin"></i>
    </div>
    <% if (webpackConfig.debug) { %>
    <!-- Webpack Dev Server reload -->
    <script src="/webpack-dev-server.js"></script>
    <% } %>
  </body>
</html>

After these steps, you can do the normal npm install and run npm start.

Hope this will help someone who wants to use the standard webpack rather than @easy-webpack.