feat(webpack): update to webpack 4

Author: JeroenVinke

build/tasks/update-dependenciesjs.js

@@ -3,6 +3,8 @@ const latestVersion = require('latest-version');
 const fs = require('fs');
 const path = require('path');
 
+const ignore = ['text', 'gulp', 'extract-text-webpack-plugin'];
+
 gulp.task('update-cli-dependenciesjs', function(done) {
   let deps = getDepsJSON();
   updateCLIVersion(deps);
@@ -15,14 +17,14 @@ gulp.task('update-cli-dependenciesjs', function(done) {
 gulp.task('update-all-dependenciesjs', function() {
   let deps = getDepsJSON();
   let p = Promise.resolve();
-  let lookup = Object.keys(deps);
+  let lookup = Object.keys(deps).filter(x => !ignore.contains(x));
 
   // for all entries in dependencies.json, lookup the latest version and update the json file
   for (let i = 0; i < lookup.length; i++) {
     p = p.then(() => {
       return latestVersion(lookup[i])
       .then(ver => {
-        console.log('Latest version of ' + lookup[i] + ' is: ' + ver);
+        console.log(`Latest version of ${lookup[i]} (currently ${deps[lookup[i]]}) is: ${ver}`);
         deps[lookup[i]] = '^' + ver;
       });
     });

lib/commands/new/buildsystems/webpack/index.js

@@ -52,6 +52,7 @@ module.exports = function(project, options) {
     'extract-text-webpack-plugin',
     'aurelia-webpack-plugin',
     'webpack',
+    'webpack-cli',
     'webpack-dev-server',
     'expose-loader',
     'style-loader',

lib/commands/new/buildsystems/webpack/transpilers/typescript.js

@@ -12,7 +12,7 @@ module.exports = function(project) {
         ProjectItem.resource('system.d.ts', 'content/custom_typings_webpack/system.d.ts')
       )
   ).addToDevDependencies(
-    'awesome-typescript-loader',
+    'ts-loader',
     'ts-node',
     '@types/node',
     '@types/lodash',

lib/commands/new/buildsystems/webpack/unit-test-runners/jest.js

@@ -88,7 +88,7 @@ module.exports = function(project) {
       ],
       testEnvironment: 'node',
       moduleNameMapper: {
-        'aurelia-(.*)': '<rootDir>/node_modules/$1'
+        'aurelia-(.*)': '<rootDir>/node_modules/aurelia-$1'
       },
       collectCoverage: true,
       collectCoverageFrom: [
@@ -103,8 +103,7 @@ module.exports = function(project) {
         'lcov',
         'text',
         'html'
-      ],
-      mapCoverage: true
+      ]
     };
   }
 };

lib/dependencies.json

@@ -1,107 +1,109 @@
 {
-  "@types/jasmine": "^2.2.0",
-  "@types/jest": "19.2.4",
-  "@types/lodash": "^4.14.69",
-  "@types/node": "^6.0.45",
-  "@types/webpack": "^3.0.4",
-  "aspnet-webpack": "^2.0.1",
-  "aurelia-animator-css": "^1.0.2",
-  "aurelia-bootstrapper": "^2.1.1",
+  "@types/jasmine": "^2.8.6",
+  "@types/jest": "^22.1.4",
+  "@types/lodash": "^4.14.104",
+  "@types/node": "^9.4.6",
+  "@types/webpack": "^3.8.8",
+  "aspnet-webpack": "^2.0.3",
+  "aurelia-animator-css": "^1.0.4",
+  "aurelia-bootstrapper": "^2.2.0",
   "aurelia-cli": "^0.32.0",
   "aurelia-loader-nodejs": "^1.0.1",
-  "aurelia-pal-nodejs": "1.0.0-beta.3.0.0",
-  "aurelia-protractor-plugin": "^1.0.5",
-  "aurelia-testing": "^1.0.0-beta.3.0.1",
-  "aurelia-tools": "^1.0.0",
-  "aurelia-webpack-plugin": "^2.0.0-rc.4",
-  "autoprefixer": "^6.3.6",
-  "awesome-typescript-loader": "^3.2.1",
-  "babel-core": "^6.25.0",
-  "babel-eslint": "^6.0.4",
-  "babel-jest": "github:JeroenVinke/babel-jest",
-  "babel-loader": "^7.0.0",
-  "babel-plugin-istanbul": "4.1.4",
-  "babel-plugin-syntax-flow": "^6.8.0",
-  "babel-plugin-transform-class-properties": "6.24.1",
+  "aurelia-pal-nodejs": "^1.0.0-beta.3.0.0",
+  "aurelia-protractor-plugin": "^1.0.6",
+  "aurelia-testing": "^1.0.0-beta.4.0.0",
+  "aurelia-tools": "^2.0.0",
+  "aurelia-webpack-plugin": "^3.0.0-rc.1",
+  "aurelia-polyfills": "^1.3.0",
+  "autoprefixer": "^8.1.0",
+  "babel-core": "^6.26.0",
+  "babel-eslint": "^8.2.2",
+  "babel-jest": "^22.4.1",
+  "babel-loader": "^7.1.3",
+  "babel-plugin-istanbul": "^4.1.5",
+  "babel-plugin-syntax-flow": "^6.18.0",
+  "babel-plugin-transform-class-properties": "^6.24.1",
   "babel-plugin-transform-decorators-legacy": "^1.3.4",
-  "babel-plugin-transform-es2015-modules-amd": "^6.8.0",
-  "babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
-  "babel-plugin-transform-flow-strip-types": "^6.8.0",
-  "babel-polyfill": "^6.9.1",
-  "babel-preset-env": "1.5.2",
-  "babel-preset-es2015": "^6.13.2",
-  "babel-preset-stage-1": "^6.5.0",
-  "babel-register": "^6.24.0",
-  "bluebird": "^3.4.1",
-  "browser-sync": "^2.13.0",
-  "clean-webpack-plugin": "^0.1.17",
-  "connect-history-api-fallback": "^1.2.0",
-  "copy-webpack-plugin": "4.0.1",
-  "cross-env": "5.0.1",
-  "css-loader": "0.28.4",
-  "debounce": "^1.0.2",
+  "babel-plugin-transform-es2015-modules-amd": "^6.24.1",
+  "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+  "babel-plugin-transform-flow-strip-types": "^6.22.0",
+  "babel-polyfill": "^6.26.0",
+  "babel-preset-env": "^1.6.1",
+  "babel-preset-es2015": "^6.24.1",
+  "babel-preset-stage-1": "^6.24.1",
+  "babel-register": "^6.26.0",
+  "bluebird": "^3.5.1",
+  "browser-sync": "^2.23.6",
+  "clean-webpack-plugin": "^0.1.18",
+  "connect-history-api-fallback": "^1.5.0",
+  "copy-webpack-plugin": "^4.5.0",
+  "cross-env": "^5.1.3",
+  "css-loader": "^0.28.10",
+  "debounce": "^1.1.0",
   "del": "^3.0.0",
-  "event-stream": "^3.3.3",
-  "expose-loader": "0.7.3",
-  "extract-text-webpack-plugin": "3.0.0",
-  "file-loader": "0.11.2",
+  "event-stream": "^3.3.4",
+  "expose-loader": "^0.7.4",
+  "extract-text-webpack-plugin": "next",
+  "file-loader": "^1.1.11",
   "gulp": "github:gulpjs/gulp#4.0",
-  "gulp-babel": "^6.1.2",
-  "gulp-changed-in-place": "^2.0.3",
-  "gulp-eslint": "^2.0.0",
-  "gulp-htmlmin": "^3.0.0",
-  "gulp-less": "^3.1.0",
-  "gulp-notify": "^2.2.0",
-  "gulp-plumber": "^1.1.0",
-  "gulp-postcss": "6.1.1",
+  "gulp-babel": "^7.0.1",
+  "gulp-changed-in-place": "^2.3.0",
+  "gulp-eslint": "^4.0.2",
+  "gulp-htmlmin": "^4.0.0",
+  "gulp-less": "^4.0.0",
+  "gulp-notify": "^3.2.0",
+  "gulp-plumber": "^1.2.0",
+  "gulp-postcss": "7.0.1",
   "gulp-rename": "^1.2.2",
   "gulp-sass": "^3.1.0",
-  "gulp-sourcemaps": "^2.0.0-alpha",
-  "gulp-stylus": "^2.5.0",
-  "gulp-tslint": "^5.0.0",
-  "gulp-typescript": "^3.1.4",
+  "gulp-sourcemaps": "^2.6.4",
+  "gulp-stylus": "^2.7.0",
+  "gulp-tslint": "^8.1.3",
+  "gulp-typescript": "^4.0.1",
   "gulp-util": "^3.0.8",
-  "gulp-watch": "^4.3.11",
-  "html-minifier": "^3.2.3",
-  "html-webpack-plugin": "2.30.1",
-  "istanbul-instrumenter-loader": "^2.0.0",
-  "jasmine-core": "^2.4.1",
-  "jest": "20.0.4",
-  "jest-jasmine2": "21.2.1",
-  "jest-cli": "20.0.4",
+  "gulp-watch": "^5.0.0",
+  "html-minifier": "^3.5.9",
+  "html-webpack-plugin": "^3.0.4",
+  "istanbul-instrumenter-loader": "^3.0.0",
+  "jasmine-core": "^3.1.0",
+  "jest": "^22.4.2",
+  "jest-jasmine2": "^22.4.2",
+  "jest-cli": "^22.4.2",
   "jest-matchers": "^20.0.3",
-  "json-loader": "0.5.7",
-  "html-loader": "0.4.5",
-  "karma": "^0.13.22",
-  "karma-babel-preprocessor": "^6.0.1",
+  "json-loader": "^0.5.7",
+  "html-loader": "^0.5.5",
+  "karma": "^2.0.0",
+  "karma-babel-preprocessor": "^7.0.0",
   "karma-chrome-launcher": "^2.2.0",
-  "karma-coverage-istanbul-reporter": "^1.3.0",
-  "karma-jasmine": "^1.0.2",
+  "karma-coverage-istanbul-reporter": "^1.4.1",
+  "karma-jasmine": "^1.1.1",
   "karma-sourcemap-loader": "^0.3.7",
-  "karma-typescript-preprocessor": "^0.2.1",
-  "minimatch": "^3.0.2",
-  "node-sass": "4.5.3",
-  "nps": "^5.7.1",
-  "nps-utils": "1.2.0",
-  "opn": "^5.1.0",
-  "protractor": "^5.1.2",
-  "requirejs": "^2.3.2",
-  "sass-loader": "^6.0.6",
-  "style-loader": "0.18.2",
-  "stylus": "0.54.5",
-  "systemjs": "0.20.13",
-  "systemjs-plugin-text": "0.0.9",
+  "karma-typescript-preprocessor": "^0.3.1",
+  "minimatch": "^3.0.4",
+  "node-sass": "^4.7.2",
+  "nps": "^5.8.1",
+  "nps-utils": "^1.5.0",
+  "opn": "^5.2.0",
+  "protractor": "^5.3.0",
+  "requirejs": "^2.3.5",
+  "sass-loader": "^6.0.7",
+  "style-loader": "^0.20.2",
+  "stylus": "^0.54.5",
+  "systemjs": "^0.21.0",
+  "systemjs-plugin-text": "0.0.11",
   "text": "github:requirejs/text#latest",
-  "through2": "^2.0.1",
-  "ts-jest": "20.0.6",
-  "ts-node": "^3.2.0",
-  "tslint": "^3.11.0",
-  "typescript": ">=1.9.0-dev || ^2.0.0",
-  "uglify-js": "^3.0.19",
-  "url-loader": "0.5.8",
-  "vinyl-fs": "^2.4.3",
-  "wait-on": "2.0.2",
-  "webpack": "3.5.5",
-  "webpack-dev-server": "2.7.1",
-  "webpack-hot-middleware": "^2.18.2"
-}
+  "through2": "^2.0.3",
+  "ts-jest": "22.4.1",
+  "ts-node": "^5.0.1",
+  "ts-loader": "^4.0.1",
+  "tslint": "^5.9.1",
+  "typescript": "^2.7.2",
+  "uglify-js": "^3.3.12",
+  "url-loader": "^1.0.1",
+  "vinyl-fs": "^3.0.2",
+  "wait-on": "^2.1.0",
+  "webpack": "^4.0.1",
+  "webpack-cli": "^2.0.9",
+  "webpack-dev-server": "^3.1.0",
+  "webpack-hot-middleware": "^2.21.1"
+}

lib/resources/content/tsconfig.template.json

@@ -22,6 +22,7 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "sourceRoot": "src",
+    "sourceMap": true,
     "allowJs": true,
     "baseUrl": "src",
     "skipLibCheck": true,

lib/resources/content/webpack.config.template.js

@@ -4,10 +4,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const project = require('./aurelia_project/aurelia.json');
 const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
-const { optimize: { CommonsChunkPlugin, UglifyJsPlugin }, ProvidePlugin } = require('webpack');
-// @if transpiler.id='typescript'
-const { TsConfigPathsPlugin, CheckerPlugin } = require('awesome-typescript-loader');
-// @endif
+const { ProvidePlugin } = require('webpack');
 
 // config helpers:
 const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || [];
@@ -45,13 +42,15 @@ module.exports = ({production, server, extractCss, coverage} = {}) => ({
     app: ['aurelia-bootstrapper'],
     vendor: ['bluebird'],
   },
+  mode: production ? 'production' : 'development',
   output: {
     path: outDir,
     publicPath: baseUrl,
     filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
     sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
     chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
   },
+  performance: { hints: false },
   devServer: {
     contentBase: outDir,
     // serve index.html for all 404 (required for push-state)
@@ -120,7 +119,7 @@ module.exports = ({production, server, extractCss, coverage} = {}) => ({
       },
       // @endif
       // @if transpiler.id='typescript'
-      { test: /\.ts$/i, loader: 'awesome-typescript-loader', exclude: nodeModulesDir },
+      { test: /\.tsx?$/, loader: "ts-loader" },
       // @endif
       { test: /\.json$/i, loader: 'json-loader' },
       // use Bluebird as the global Promise implementation:
@@ -148,10 +147,6 @@ module.exports = ({production, server, extractCss, coverage} = {}) => ({
     new ModuleDependenciesPlugin({
       'aurelia-testing': [ './compile-spy', './view-spy' ]
     }),
-    // @if transpiler.id='typescript'
-    new TsConfigPathsPlugin(),
-    new CheckerPlugin(),
-    // @endif
     new HtmlWebpackPlugin({
       template: 'index.ejs',
       // @if markupProcessor.id='minimum'
@@ -183,14 +178,8 @@ module.exports = ({production, server, extractCss, coverage} = {}) => ({
       filename: production ? '[contenthash].css' : '[id].css',
       allChunks: true
     })),
-    ...when(production, new CommonsChunkPlugin({
-      name: ['common']
-    })),
     ...when(production, new CopyWebpackPlugin([
       { from: 'static/favicon.ico', to: 'favicon.ico' }
-    ])),
-    ...when(production, new UglifyJsPlugin({
-      sourceMap: true
-    }))
+    ]))
   ]
 });

lib/resources/test/webpack/babel/karma-bundle.js

@@ -23,7 +23,7 @@ function loadTestModules() {
     // recursive:
     true,
     // tests in /src folder regex:
-    /\.spec\.[tj]s$/igm
+    /\.spec\.[tj]s$/im
   );
 
   const testContext = require.context(
@@ -32,7 +32,7 @@ function loadTestModules() {
     // recursive:
     true,
     // tests in ./unit folder regex:
-    /\.spec\.[tj]s$/igm
+    /\.spec\.[tj]s$/im
   );
 
   return [srcContext, testContext];

lib/resources/test/webpack/typescript/karma-bundle.js

@@ -23,7 +23,7 @@ function loadTestModules() {
     // recursive:
     true,
     // tests in /src folder regex:
-    /\.spec\.[tj]s$/igm
+    /\.spec\.[tj]s$/im
   );
 
   const testContext = require.context(
@@ -32,7 +32,7 @@ function loadTestModules() {
     // recursive:
     true,
     // tests in ./unit folder regex:
-    /\.spec\.[tj]s$/igm
+    /\.spec\.[tj]s$/im
   );
 
   return [srcContext, testContext];