chore(npm): updated webpack version and config cleanup (#2237)

* chore(npm): updated webpack version and reworked configs for breaking changes

* fix: swapped enforce rules by accident, fix this

* fix: fix version, as well as convert loaders to rules for future api changes

* chore: update webpack to beta.24

* chore(npm): updated webpack to beta.25

* chore(lint): remove rogue double quote

* Added augmented module typings for webpack v2 supporting webpack.LoaderOptionsPlugin

* chore(lint): linting chores spaces, return lines, semis

* chore(npm): updated both package.jsons cause who forgets to do that

Author: TheLarkInn

package.json

@@ -110,7 +110,7 @@
     "typedoc": "^0.4.2",
     "typescript": "2.0.2",
     "url-loader": "^0.5.7",
-    "webpack": "2.1.0-beta.22",
+    "webpack": "2.1.0-beta.25",
     "webpack-dev-server": "2.1.0-beta.3",
     "webpack-md5-hash": "0.0.5",
     "webpack-merge": "^0.14.0",

packages/angular-cli/models/webpack-build-common.ts

@@ -33,8 +33,7 @@ export function getWebpackCommonConfig(
   return {
     devtool: 'source-map',
     resolve: {
-      extensions: ['', '.ts', '.js'],
-      root: appRoot
+      extensions: ['.ts', '.js']
     },
     context: path.resolve(__dirname, './'),
     entry: entry,
@@ -43,18 +42,15 @@ export function getWebpackCommonConfig(
       filename: '[name].bundle.js'
     },
     module: {
-      preLoaders: [
+      rules: [
         {
+          enforce: 'pre',
           test: /\.js$/,
           loader: 'source-map-loader',
           exclude: [
             /node_modules/
           ]
-        }
-      ],
-      loaders: [
-        // TypeScript loaders are separated into webpack-build-typescript.
-
+        },
         // in main, load css as raw text
         {
           exclude: styles,
@@ -140,7 +136,7 @@ export function getWebpackCommonConfig(
     ],
     node: {
       fs: 'empty',
-      global: 'window',
+      global: true,
       crypto: 'empty',
       module: false,
       clearImmediate: false,

packages/angular-cli/models/webpack-build-development.ts

@@ -1,5 +1,17 @@
 const path = require('path');
 
+import * as webpack from 'webpack';
+
+declare module 'webpack' {
+    export interface LoaderOptionsPlugin {}
+    export interface LoaderOptionsPluginStatic {
+        new (optionsObject: any): LoaderOptionsPlugin;
+    }
+    interface Webpack {
+        LoaderOptionsPlugin: LoaderOptionsPluginStatic;
+    }
+};
+
 export const getWebpackDevConfigPartial = function(projectRoot: string, appConfig: any) {
   return {
     devtool: 'source-map',
@@ -9,14 +21,20 @@ export const getWebpackDevConfigPartial = function(projectRoot: string, appConfi
       sourceMapFilename: '[name].map',
       chunkFilename: '[id].chunk.js'
     },
-    tslint: {
-      emitErrors: false,
-      failOnHint: false,
-      resourcePath: path.resolve(projectRoot, appConfig.root)
-    },
+    plugins: [
+      new webpack.LoaderOptionsPlugin({
+        options: {
+          tslint: {
+            emitErrors: false,
+            failOnHint: false,
+            resourcePath: path.resolve(projectRoot, appConfig.root)
+          },
+        }
+      })
+    ],
     node: {
       fs: 'empty',
-      global: 'window',
+      global: true,
       crypto: 'empty',
       process: true,
       module: false,

packages/angular-cli/models/webpack-build-production.ts

@@ -5,7 +5,6 @@ import * as webpack from 'webpack';
 
 export const getWebpackProdConfigPartial = function(projectRoot: string, appConfig: any) {
   return {
-    debug: false,
     devtool: 'source-map',
     output: {
       path: path.resolve(projectRoot, appConfig.outDir),
@@ -25,27 +24,31 @@ export const getWebpackProdConfigPartial = function(projectRoot: string, appConf
           test: /\.js$|\.html$/,
           threshold: 10240,
           minRatio: 0.8
+      }),
+      new webpack.LoaderOptionsPlugin({
+        options: {
+          tslint: {
+            emitErrors: true,
+            failOnHint: true,
+            resourcePath: path.resolve(projectRoot, appConfig.root)
+          },
+          htmlLoader: {
+            minimize: true,
+            removeAttributeQuotes: false,
+            caseSensitive: true,
+            customAttrSurround: [
+              [/#/, /(?:)/],
+              [/\*/, /(?:)/],
+              [/\[?\(?/, /(?:)/]
+            ],
+            customAttrAssign: [/\)?\]?=/]
+          }
+        }
       })
     ],
-    tslint: {
-      emitErrors: true,
-      failOnHint: true,
-      resourcePath: path.resolve(projectRoot, appConfig.root)
-    },
-    htmlLoader: {
-      minimize: true,
-      removeAttributeQuotes: false,
-      caseSensitive: true,
-      customAttrSurround: [
-        [/#/, /(?:)/],
-        [/\*/, /(?:)/],
-        [/\[?\(?/, /(?:)/]
-      ],
-      customAttrAssign: [/\)?\]?=/]
-    },
     node: {
       fs: 'empty',
-      global: 'window',
+      global: true,
       crypto: 'empty',
       process: true,
       module: false,

packages/angular-cli/models/webpack-build-test.js

@@ -11,8 +11,7 @@ const getWebpackTestConfig = function (projectRoot, environment, appConfig) {
     devtool: 'inline-source-map',
     context: path.resolve(__dirname, './'),
     resolve: {
-      extensions: ['', '.ts', '.js'],
-      root: appRoot
+      extensions: ['.ts', '.js']
     },
     entry: {
       test: path.resolve(appRoot, appConfig.test)
@@ -22,24 +21,24 @@ const getWebpackTestConfig = function (projectRoot, environment, appConfig) {
       filename: '[name].bundle.js'
     },
     module: {
-      preLoaders: [
+      rules: [
         {
           test: /\.ts$/,
+          enforce: 'pre',
           loader: 'tslint-loader',
           exclude: [
             path.resolve(projectRoot, 'node_modules')
           ]
         },
         {
           test: /\.js$/,
+          enforce: 'pre',
           loader: 'source-map-loader',
           exclude: [
             path.resolve(projectRoot, 'node_modules/rxjs'),
             path.resolve(projectRoot, 'node_modules/@angular')
           ]
-        }
-      ],
-      loaders: [
+        },
         {
           test: /\.ts$/,
           loaders: [
@@ -58,23 +57,22 @@ const getWebpackTestConfig = function (projectRoot, environment, appConfig) {
           ],
           exclude: [/\.e2e\.ts$/]
         },
-        { test: /\.json$/, loader: 'json-loader' },
-        { test: /\.css$/,  loaders: ['raw-loader', 'postcss-loader'] },
-        { test: /\.styl$/, loaders: ['raw-loader', 'postcss-loader', 'stylus-loader'] },
-        { test: /\.less$/, loaders: ['raw-loader', 'postcss-loader', 'less-loader'] },
-        { test: /\.scss$|\.sass$/, loaders: ['raw-loader', 'postcss-loader', 'sass-loader'] },
-        { test: /\.(jpg|png)$/, loader: 'url-loader?limit=128000' },
-        { test: /\.html$/, loader: 'raw-loader', exclude: [path.resolve(appRoot, appConfig.index)] }
-      ],
-      postLoaders: [
         {
           test: /\.(js|ts)$/, loader: 'sourcemap-istanbul-instrumenter-loader',
+          enforce: 'post',
           exclude: [
             /\.(e2e|spec)\.ts$/,
             /node_modules/
           ],
           query: { 'force-sourcemap': true }
-        }
+        },
+        { test: /\.json$/, loader: 'json-loader' },
+        { test: /\.css$/,  loaders: ['raw-loader', 'postcss-loader'] },
+        { test: /\.styl$/, loaders: ['raw-loader', 'postcss-loader', 'stylus-loader'] },
+        { test: /\.less$/, loaders: ['raw-loader', 'postcss-loader', 'less-loader'] },
+        { test: /\.scss$|\.sass$/, loaders: ['raw-loader', 'postcss-loader', 'sass-loader'] },
+        { test: /\.(jpg|png)$/, loader: 'url-loader?limit=128000' },
+        { test: /\.html$/, loader: 'raw-loader', exclude: [path.resolve(appRoot, appConfig.index)] }
       ]
     },
     plugins: [
@@ -89,16 +87,20 @@ const getWebpackTestConfig = function (projectRoot, environment, appConfig) {
         new RegExp(path.resolve(appRoot, appConfig.environments['source'])
           .replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&')),
         path.resolve(appRoot, appConfig.environments[environment])
-      )
+      ),
+      new webpack.LoaderOptionsPlugin({
+        options: {
+          tslint: {
+            emitErrors: false,
+            failOnHint: false,
+            resourcePath: `./${appConfig.root}`
+          }
+        }
+      })
     ],
-    tslint: {
-      emitErrors: false,
-      failOnHint: false,
-      resourcePath: `./${appConfig.root}`
-    },
     node: {
       fs: 'empty',
-      global: 'window',
+      global: true,
       process: false,
       crypto: 'empty',
       module: false,

packages/angular-cli/models/webpack-build-typescript.ts

@@ -17,7 +17,7 @@ export const getWebpackNonAotConfigPartial = function(projectRoot: string, appCo
 
   return {
     module: {
-      loaders: [
+      rules: [
         {
           test: /\.ts$/,
           loaders: [{
@@ -43,7 +43,7 @@ export const getWebpackNonAotConfigPartial = function(projectRoot: string, appCo
 export const getWebpackAotConfigPartial = function(projectRoot: string, appConfig: any) {
   return {
     module: {
-      loaders: [
+      rules: [
         {
           test: /\.ts$/,
           loader: webpackLoader,

packages/angular-cli/package.json

@@ -93,7 +93,7 @@
     "typedoc": "^0.4.2",
     "typescript": "2.0.2",
     "url-loader": "^0.5.7",
-    "webpack": "2.1.0-beta.22",
+    "webpack": "2.1.0-beta.25",
     "webpack-dev-server": "2.1.0-beta.3",
     "webpack-md5-hash": "0.0.5",
     "webpack-merge": "^0.14.0",