065 update to webpack 2 (preboot#66)

mikeerickson · Foxandxss · commit 84c979d02e9b · 2017-01-25T01:44:05.000+01:00
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015-2016 Preboot team
+Copyright (c) 2015-2017 Preboot team
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 A complete, yet simple, starter for Angular using Webpack.
 
-This workflow serves as a starting point for building Angular 1.x applications using Webpack. Should be noted that apart from the pre-installed angular package, this workflow is pretty much generic.
+This workflow serves as a starting point for building Angular 1.x applications using Webpack 2.x. Should be noted that apart from the pre-installed angular package, this workflow is pretty much generic.
 
 * Heavily commented webpack configuration with reasonable defaults.
 * ES6, and ES7 support with babel.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-webpack-workflow",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A workflow for Angular made with Webpack",
   "scripts": {
     "build": "rimraf dist && webpack --bail --progress --profile",
@@ -28,9 +28,9 @@
     "babel-core": "^6.2.1",
     "babel-loader": "^6.2.0",
     "babel-preset-es2015": "^6.1.18",
-    "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.23.0",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "copy-webpack-plugin": "4.0.1",
+    "css-loader": "0.26.1",
+    "extract-text-webpack-plugin": "2.0.0-beta.5",
     "file-loader": "^0.9.0",
     "html-webpack-plugin": "^2.7.1",
     "istanbul-instrumenter-loader": "^1.0.0",
@@ -41,15 +41,15 @@
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.26",
-    "karma-webpack": "^1.7.0",
-    "node-libs-browser": "^2.0.0",
+    "karma-webpack": "2.0.1",
+    "node-libs-browser": "2.0.0",
     "null-loader": "^0.1.1",
     "phantomjs-prebuilt": "^2.1.4",
-    "postcss-loader": "^1.1.1",
+    "postcss-loader": "1.2.2",
     "raw-loader": "^0.5.1",
     "rimraf": "^2.5.1",
     "style-loader": "^0.13.0",
-    "webpack": "^1.12.13",
-    "webpack-dev-server": "^1.14.1"
+    "webpack": "2.2.0",
+    "webpack-dev-server": "2.2.0"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {
+      browsers: ['last 2 versions']
+    },
+  },
+};
diff --git a/webpack.config.js b/webpack.config.js
@@ -15,7 +15,7 @@ var ENV = process.env.npm_lifecycle_event;
 var isTest = ENV === 'test' || ENV === 'test-watch';
 var isProd = ENV === 'build';
 
-module.exports = function makeWebpackConfig () {
+module.exports = function makeWebpackConfig() {
   /**
    * Config
    * Reference: http://webpack.github.io/docs/configuration.html
@@ -63,9 +63,11 @@ module.exports = function makeWebpackConfig () {
    */
   if (isTest) {
     config.devtool = 'inline-source-map';
-  } else if (isProd) {
+  }
+  else if (isProd) {
     config.devtool = 'source-map';
-  } else {
+  }
+  else {
     config.devtool = 'eval-source-map';
   }
 
@@ -78,14 +80,13 @@ module.exports = function makeWebpackConfig () {
 
   // Initialize module
   config.module = {
-    preLoaders: [],
-    loaders: [{
+    rules: [{
       // JS LOADER
       // Reference: https://github.com/babel/babel-loader
       // Transpile .js files using babel-loader
       // Compiles ES6 and ES7 into ES5 code
       test: /\.js$/,
-      loader: 'babel',
+      loader: 'babel-loader',
       exclude: /node_modules/
     }, {
       // CSS LOADER
@@ -100,7 +101,14 @@ module.exports = function makeWebpackConfig () {
       //
       // Reference: https://github.com/webpack/style-loader
       // Use style-loader in development.
-      loader: isTest ? 'null' : ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!postcss-loader')
+
+      loader: isTest ? 'null' : ExtractTextPlugin.extract({
+        fallbackLoader: 'style-loader',
+        loader: [
+          {loader: 'css-loader', query: {sourceMap: true}},
+          {loader: 'postcss-loader'}
+        ],
+      })
     }, {
       // ASSET LOADER
       // Reference: https://github.com/webpack/file-loader
@@ -109,13 +117,13 @@ module.exports = function makeWebpackConfig () {
       // Pass along the updated reference to your code
       // You can add here any file extension you want to get copied to your output
       test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
-      loader: 'file'
+      loader: 'file-loader'
     }, {
       // HTML LOADER
       // Reference: https://github.com/webpack/raw-loader
       // Allow loading html through js
       test: /\.html$/,
-      loader: 'raw'
+      loader: 'raw-loader'
     }]
   };
 
@@ -124,7 +132,8 @@ module.exports = function makeWebpackConfig () {
   // Instrument JS files with istanbul-lib-instrument for subsequent code coverage reporting
   // Skips node_modules and files that end with .test
   if (isTest) {
-    config.module.preLoaders.push({
+    config.module.rules.push({
+      enforce: 'pre',
       test: /\.js$/,
       exclude: [
         /node_modules/,
@@ -142,18 +151,24 @@ module.exports = function makeWebpackConfig () {
    * Reference: https://github.com/postcss/autoprefixer-core
    * Add vendor prefixes to your css
    */
-  config.postcss = [
-    autoprefixer({
-      browsers: ['last 2 version']
-    })
-  ];
+   // NOTE: This is now handled in the `postcss.config.js`
+   //       webpack2 has some issues, making the config file necessary
 
   /**
    * Plugins
    * Reference: http://webpack.github.io/docs/configuration.html#plugins
    * List: http://webpack.github.io/docs/list-of-plugins.html
    */
-  config.plugins = [];
+  config.plugins = [
+    new webpack.LoaderOptionsPlugin({
+      test: /\.scss$/i,
+      options: {
+        postcss: {
+          plugins: [autoprefixer]
+        }
+      }
+    })
+  ];
 
   // Skip rendering index.html in test mode
   if (!isTest) {
@@ -168,7 +183,7 @@ module.exports = function makeWebpackConfig () {
       // Reference: https://github.com/webpack/extract-text-webpack-plugin
       // Extract css files
       // Disabled when in test mode or not in build mode
-      new ExtractTextPlugin('[name].[hash].css', {disable: !isProd})
+      new ExtractTextPlugin({filename: 'css/[name].css', disable: !isProd, allChunks: true})
     )
   }
 
