chore: update to webpack 2

Author: Foxandxss

package.json

@@ -51,8 +51,8 @@
     "awesome-typescript-loader": "^2.2.4",
     "codelyzer": "0.0.26",
     "copy-webpack-plugin": "^3.0.0",
-    "css-loader": "^0.23.0",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "css-loader": "^0.25.0",
+    "extract-text-webpack-plugin": "^2.0.0-beta.4",
     "file-loader": "^0.9.0",
     "html-loader": "^0.4.0",
     "html-webpack-plugin": "^2.8.1",
@@ -72,7 +72,7 @@
     "node-sass": "^3.4.2",
     "null-loader": "0.1.1",
     "phantomjs-prebuilt": "^2.1.4",
-    "postcss-loader": "^0.9.1",
+    "postcss-loader": "^0.13.0",
     "protractor": "^3.1.1",
     "raw-loader": "0.5.1",
     "remap-istanbul": "^0.6.4",
@@ -86,8 +86,8 @@
     "typedoc": "^0.4.4",
     "typescript": "2.0.2",
     "url-loader": "^0.5.6",
-    "webpack": "^1.12.13",
+    "webpack": "^2.1.0-beta.25",
     "webpack-dashboard": "^0.1.8",
-    "webpack-dev-server": "^1.14.1"
+    "webpack-dev-server": "^2.1.0-beta.8"
   }
 }

webpack.config.js

@@ -35,17 +35,14 @@ module.exports = function makeWebpackConfig() {
    */
   if (isProd) {
     config.devtool = 'source-map';
-  } 
+  }
   else if (isTest) {
     config.devtool = 'inline-source-map';
   }
   else {
     config.devtool = 'eval-source-map';
   }
 
-  // add debug messages
-  config.debug = !isProd || !isTest;
-
   /**
    * Entry
    * Reference: http://webpack.github.io/docs/configuration.html#entry
@@ -72,21 +69,15 @@ module.exports = function makeWebpackConfig() {
    * Reference: http://webpack.github.io/docs/configuration.html#resolve
    */
   config.resolve = {
-    cache: !isTest,
-    root: root(),
     // only discover files that have those extensions
-    extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html'],
-    alias: {
-      'app': 'src/app',
-      'common': 'src/common'
-    }
+    extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'],
   };
 
   var atlOptions = '';
   if (isTest && !isTestWatch) {
     // awesome-typescript-loader needs to output inlineSourceMap for code coverage to work with source maps.
     atlOptions = 'inlineSourceMap=true&sourceMap=false';
-  } 
+  }
 
   /**
    * Loaders
@@ -95,8 +86,7 @@ module.exports = function makeWebpackConfig() {
    * This handles most of the magic responsible for converting modules
    */
   config.module = {
-    preLoaders: isTest ? [] : [{test: /\.ts$/, loader: 'tslint'}],
-    loaders: [
+    rules: [
       // Support for .ts files.
       {
         test: /\.ts$/,
@@ -119,7 +109,7 @@ module.exports = function makeWebpackConfig() {
       {
         test: /\.css$/,
         exclude: root('src', 'app'),
-        loader: isTest ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')
+        loader: isTest ? 'null' : ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css', 'postcss']})
       },
       // all css required in src/app files will be merged in js files
       {test: /\.css$/, include: root('src', 'app'), loader: 'raw!postcss'},
@@ -130,28 +120,37 @@ module.exports = function makeWebpackConfig() {
       {
         test: /\.scss$/,
         exclude: root('src', 'app'),
-        loader: isTest ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss!sass')
+        loader: isTest ? 'null' : ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css', 'postcss', 'sass']})
       },
       // all css required in src/app files will be merged in js files
       {test: /\.scss$/, exclude: root('src', 'style'), loader: 'raw!postcss!sass'},
 
       // support for .html as raw text
       // todo: change the loader to something that adds a hash to images
       {test: /\.html$/, loader: 'raw',  exclude: root('src', 'public')}
-    ],
-    postLoaders: []
+    ]
   };
 
   if (isTest && !isTestWatch) {
     // instrument only testing sources with Istanbul, covers ts files
-    config.module.postLoaders.push({
+    config.module.rules.push({
       test: /\.ts$/,
+      enforce: 'post',
       include: path.resolve('src'),
       loader: 'istanbul-instrumenter-loader',
       exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/]
     });
   }
 
+  if (!isTest || !isTestWatch) {
+    // tslint support
+    config.module.rules.push({
+      test: /\.ts$/,
+      enforce: 'pre',
+      loader: 'tslint'
+    });
+  }
+
   /**
    * Plugins
    * Reference: http://webpack.github.io/docs/configuration.html#plugins
@@ -165,14 +164,53 @@ module.exports = function makeWebpackConfig() {
       'process.env': {
         ENV: JSON.stringify(ENV)
       }
+    }),
+
+    // Workaround needed for angular 2 angular/angular#11580
+      new webpack.ContextReplacementPlugin(
+        // The (\\|\/) piece accounts for path separators in *nix and Windows
+        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+        root('./src') // location of your src
+      ),
+
+    // Tslint configuration for webpack 2
+    new webpack.LoaderOptionsPlugin({
+      options: {
+        /**
+         * Apply the tslint loader as pre/postLoader
+         * Reference: https://github.com/wbuchwalter/tslint-loader
+         */
+        tslint: {
+          emitErrors: false,
+          failOnHint: false
+        },
+        /**
+         * Sass
+         * Reference: https://github.com/jtangelder/sass-loader
+         * Transforms .scss files to .css
+         */
+        sassLoader: {
+          //includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")]
+        },
+        /**
+         * PostCSS
+         * Reference: https://github.com/postcss/autoprefixer-core
+         * Add vendor prefixes to your css
+         */
+        postcss: [
+          autoprefixer({
+            browsers: ['last 2 version']
+          })
+        ]
+      }
     })
   ];
 
   if (!isTest && !isProd) {
       config.plugins.push(new DashboardPlugin());
   }
 
-  if (!isTest) {
+  if (!isTest || !isTestWatch) {
     config.plugins.push(
       new ForkCheckerPlugin(),
 
@@ -193,7 +231,7 @@ module.exports = function makeWebpackConfig() {
       // Extract css files
       // Reference: https://github.com/webpack/extract-text-webpack-plugin
       // Disabled when in test mode or not in build mode
-      new ExtractTextPlugin('css/[name].[hash].css', {disable: !isProd})
+      new ExtractTextPlugin({filename: 'css/[name].[hash].css', disable: !isProd})
     );
   }
 
@@ -204,13 +242,13 @@ module.exports = function makeWebpackConfig() {
       // Only emit files when there are no errors
       new webpack.NoErrorsPlugin(),
 
-      // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
-      // Dedupe modules in the output
-      new webpack.optimize.DedupePlugin(),
+      // // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
+      // // Dedupe modules in the output
+      // new webpack.optimize.DedupePlugin(),
 
       // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
       // Minify all javascript, switch loaders to minimizing mode
-      new webpack.optimize.UglifyJsPlugin({mangle: { keep_fnames: true }}),
+      new webpack.optimize.UglifyJsPlugin({sourceMap: true, mangle: { keep_fnames: true }}),
 
       // Copy assets from the public folder
       // Reference: https://github.com/kevlened/copy-webpack-plugin
@@ -220,35 +258,6 @@ module.exports = function makeWebpackConfig() {
     );
   }
 
-  /**
-   * PostCSS
-   * Reference: https://github.com/postcss/autoprefixer-core
-   * Add vendor prefixes to your css
-   */
-  config.postcss = [
-    autoprefixer({
-      browsers: ['last 2 version']
-    })
-  ];
-
-  /**
-   * Sass
-   * Reference: https://github.com/jtangelder/sass-loader
-   * Transforms .scss files to .css
-   */
-  config.sassLoader = {
-    //includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")]
-  };
-
-  /**
-   * Apply the tslint loader as pre/postLoader
-   * Reference: https://github.com/wbuchwalter/tslint-loader
-   */
-  config.tslint = {
-    emitErrors: false,
-    failOnHint: false
-  };
-
   /**
    * Dev server configuration
    * Reference: http://webpack.github.io/docs/configuration.html#devserver