Update to Webpack 2 (#56)

* Update to Webpack 2 - Update package.json dependency version numbers - Migrate webpack.config.js according to migration suggestions from 1 to 2 - Tested on local and prod builds * Update test configuration
GordyD · Mar 7, 2017 · 9083f18 · 9083f18
1 parent 1434ad4
commit 9083f18
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 47 deletions.
diff --git a/karma.conf.js b/karma.conf.js
@@ -9,15 +9,16 @@ module.exports = function (config) {
     colors: true,
     frameworks: [ 'mocha', 'sinon', 'chai' ], // Mocha is our testing framework of choice
     files: [
-      'tests.webpack.js'
+      './tests.webpack.js',
     ],
     preprocessors: {
       'tests.webpack.js': [ 'webpack' ] // Preprocess with webpack and our sourcemap loader
     },
     reporters: [ 'mocha' ],
     webpack: { // Simplified Webpack configuration
+      entry: webpackConfig.entry,
       module: {
-        loaders: webpackConfig.module.loaders,
+        rules: webpackConfig.module.rules,
         noParse: [
             /node_modules\/sinon/,
         ]

diff --git a/package.json b/package.json
@@ -52,23 +52,23 @@
     "xss": "0.2.x"
   },
   "devDependencies": {
-    "babel": "6.5.x",
-    "babel-core": "6.8.x",
-    "babel-eslint": "6.0.x",
-    "babel-loader": "6.2.x",
-    "babel-plugin-rewire": "1.0.0-rc-3",
-    "babel-polyfill": "6.8.x",
-    "babel-preset-es2015": "6.6.x",
-    "babel-preset-react": "6.5.x",
+    "babel": "6.23.x",
+    "babel-core": "6.23.x",
+    "babel-eslint": "7.1.1",
+    "babel-loader": "6.4.x",
+    "babel-plugin-rewire": "1.0.0",
+    "babel-polyfill": "6.23.x",
+    "babel-preset-es2015": "6.22.x",
+    "babel-preset-react": "6.23.x",
     "babel-preset-react-hmre": "1.1.x",
-    "babel-preset-stage-0": "6.5.x",
-    "babel-runtime": "6.6.x",
-    "babel-template": "6.8.x",
+    "babel-preset-stage-0": "6.22.x",
+    "babel-runtime": "6.23.x",
+    "babel-template": "6.23.x",
     "chai": "3.5.x",
     "css-loader": "0.23.x",
     "eslint": "2.9.x",
     "eslint-plugin-react": "5.1.x",
-    "extract-text-webpack-plugin": "1.0.x",
+    "extract-text-webpack-plugin": "2.1.x",
     "karma": "0.13.x",
     "karma-chai": "0.1.x",
     "karma-chrome-launcher": "1.0.x",
@@ -92,8 +92,8 @@
     "sinon": "1.17.x",
     "style-loader": "0.13.x",
     "stylus": "0.54.x",
-    "stylus-loader": "2.0.x",
-    "webpack": "1.13.x",
-    "webpack-dev-server": "1.14.x"
+    "stylus-loader": "2.5.x",
+    "webpack": "2.2.x",
+    "webpack-dev-server": "2.2.x"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -5,69 +5,91 @@ var nib = require('nib');
 
 var config = require('config');
 
-var entry, output, plugins, loaders;
+var entry, output, plugins, rules;
 
-if (process.env.NODE_ENV === 'development') {
+if (process.env.NODE_ENV !== 'production') {
   entry = [
     'webpack-dev-server/client?http://localhost:3001',
     'webpack/hot/only-dev-server',
-    './client/app'
-  ]
+    './client/app',
+  ];
   output = {
     path: path.join(__dirname, [ '/', config.get('buildDirectory') ].join('')),
     filename: 'bundle.js',
-    publicPath: 'http://localhost:3001/'
-  }
+    publicPath: 'http://localhost:3001/',
+  };
   plugins = [
     new webpack.DefinePlugin({ __DEV__: true }),
-    new webpack.NoErrorsPlugin(),
-    new webpack.HotModuleReplacementPlugin()
-  ]
-  loaders = [
+    new webpack.NoEmitOnErrorsPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+  ];
+  rules = [
     {
       test: /\.js$/,
-      loaders: [ 'react-hot', 'babel' ],
+      use: [ 'react-hot-loader', 'babel-loader' ],
       exclude: /node_modules/,
       include: __dirname
     }, {
       test: /\.css?$/,
-      loaders: [ 'style-loader', 'css-loader' ],
+      use: [ 'style-loader', 'css-loader' ],
       include: __dirname
     }, {
       test: /\.styl?$/,
-      loaders: [ 'style-loader', 'css-loader', 'stylus-loader' ],
+      use: [ 'style-loader', 'css-loader', 'stylus-loader' ],
       include: __dirname
-    }
-  ]
+    },
+  ];
 } else {
-  entry = './client/app'
+  entry = './client/app';
   output = {
     path: path.join(__dirname, [ '/', config.get('buildDirectory') ].join('')),
     filename: 'bundle.js'
-  }
+  };
   plugins = [
     new webpack.DefinePlugin({ __DEV__: false, 'process.env.NODE_ENV': '"production"' }),
     new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en)$/),
-    new webpack.optimize.UglifyJsPlugin(),
+    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
+    }),
     new ExtractTextPlugin('style.css'),
-    new webpack.NoErrorsPlugin()
-  ]
-  loaders = [
+    new webpack.NoEmitOnErrorsPlugin(),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+    }),
+    new webpack.LoaderOptionsPlugin({
+      test: /\.styl$/,
+      stylus: {
+        default: {
+          use: [nib()],
+        },
+      },
+    }),
+  ];
+  rules = [
     {
       test: /\.js$/,
-      loaders: [ 'babel' ],
+      use: [ 'babel-loader' ],
       exclude: /node_modules/,
       include: __dirname
     }, {
       test: /\.css?$/,
-      loaders: [ ExtractTextPlugin.extract('style-loader', 'css-loader'), 'css-loader' ],
+      use: ExtractTextPlugin.extract({
+        fallback: 'style-loader',
+        use: 'css-loader'
+      }),
       include: __dirname
     }, {
       test: /\.styl?$/,
-      loader: ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader'),
-      include: __dirname
+      use: ExtractTextPlugin.extract({
+        fallback: 'style-loader',
+        use: [
+          'css-loader',
+          'stylus-loader',
+        ],
+      }),
+      include: __dirname,
     }
-  ]
+  ];
 }
 
 module.exports = {
@@ -76,9 +98,6 @@ module.exports = {
   output: output,
   plugins: plugins,
   module: {
-    loaders: loaders
+    rules: rules,
   },
-  stylus: {
-    use: [ nib() ]
-  }
 };