Upgrade to webpack v2

package.json

@@ -133,7 +133,7 @@
     "eslint-plugin-jsx-a11y": "2.2.2",
     "eslint-plugin-jsx-control-statements": "2.1.1",
     "eslint-plugin-react": "6.3.0",
-    "extract-text-webpack-plugin": "1.0.1",
+    "extract-text-webpack-plugin": "^2.0.0-beta.4",
     "file-loader": "0.9.0",
     "imports-loader": "0.6.5",
     "isomorphic-style-loader": "1.0.0",
@@ -143,15 +143,15 @@
     "postcss": "5.2.0",
     "postcss-extend": "1.0.5",
     "postcss-focus": "1.0.0",
-    "postcss-import": "8.1.2",
+    "postcss-import": "^8.0.2",
     "postcss-loader": "0.13.0",
     "postcss-url": "5.1.2",
     "precss": "1.4.0",
     "progress-bar-webpack-plugin": "1.9.0",
     "start-server-webpack-plugin": "2.0.1",
     "style-loader": "0.13.1",
     "url-loader": "0.5.7",
-    "webpack": "1.13.2",
+    "webpack": "^2.1.0-beta.25",
     "webpack-dev-middleware": "1.8.2",
     "webpack-hot-middleware": "2.12.2",
     "webpack-merge": "0.14.1",

webpack.config.babel.js

@@ -6,12 +6,10 @@ import './run/init';
 import merge from 'webpack-merge';
 import match from './src/utils/match';
 import Globals from './webpack/globals';
-import { getLoaders, getPreLoaders } from './webpack/loaders';
+import getLoaders from './webpack/loaders';
 
 let Config;
 let Loader = getLoaders();
-const PreLoader = getPreLoaders();
-
 
 if (match.script('web:dev', 'development')) {
   Config = require('./webpack/config.server').load();
@@ -47,8 +45,8 @@ Config = merge(Config, Globals);
 // Loaders
 Config = merge(Config, {
   module: {
-    preLoaders: [PreLoader.eslint],
     loaders: [
+      Loader.eslint,
       Loader.jsx,
       Loader.json,
       Loader.url,

webpack.config.client.babel.js

@@ -5,11 +5,10 @@
 import './run/init';
 import merge from 'webpack-merge';
 import Globals from './webpack/globals';
-import { getLoaders, getPreLoaders } from './webpack/loaders';
+import getLoaders from './webpack/loaders';
 
 let Config;
 let Loader = getLoaders();
-const PreLoader = getPreLoaders();
 
 Config = require('./webpack/config.client').load();
 const ConfigClientDev = require('./webpack/config.client.dev');
@@ -22,8 +21,8 @@ Config = merge(Config, Globals);
 // Loaders
 Config = merge(Config, {
   module: {
-    preLoaders: [PreLoader.eslint],
     loaders: [
+      Loader.eslint,
       Loader.jsx,
       Loader.json,
       Loader.url,

webpack/config.client.build.js

@@ -8,15 +8,20 @@ const Dir = global.DIR;
 export function loader() {
   return {
     cssModules: {
-      loader: ExtractTextPlugin.extract(
-        'style-loader',
-        ['css-loader?modules',
-        'importLoaders=1',
-        'localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader']
-         .join('&')),
+      loader: ExtractTextPlugin.extract({
+        fallbackLoader: 'style-loader',
+        loader: [
+          'css-loader?modules',
+          'importLoaders=1',
+          'localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader',
+        ].join('&'),
+      }),
     },
     cssGlobal: {
-      loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader'),
+      loader: ExtractTextPlugin.extract({
+        fallbackLoader: 'style-loader',
+        loader: 'css-loader!postcss-loader',
+      }),
     },
   };
 }
@@ -36,13 +41,14 @@ export function config() {
       new webpack.optimize.DedupePlugin(),
       new webpack.optimize.UglifyJsPlugin({
         comments: false,
-        dropDebugger: true,
-        dropConsole: true,
-        compressor: {
+        sourceMap: true,
+        compress: {
+          screw_ie8: true,
           warnings: false,
         },
       }),
-      new ExtractTextPlugin('style.css', {
+      new ExtractTextPlugin({
+        filename: 'style.css',
         allChunks: true,
       }),
     ],

webpack/config.client.js

@@ -1,6 +1,7 @@
 import webpack from 'webpack';
 import getenv from 'getenv';
 import env from '~/config/expose';
+import getPostCSSConfig from './postcss/postcss.config';
 
 export function load() {
   return {
@@ -10,19 +11,22 @@ export function load() {
       'whatwg-fetch',
     ],
     plugins: [
-      new webpack.optimize.OccurenceOrderPlugin(), // Webpack 1.0
-      // new webpack.optimize.OccurrenceOrderPlugin(),  // Webpack 2.0 fixed this mispelling
       new webpack.DefinePlugin({
         'global.DIR': JSON.stringify(global.DIR),
         'global.CONFIG': JSON.stringify(getenv.multi(env)),
         'global.TYPE': JSON.stringify('CLIENT'),
-        'process.env': {
-          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
-        },
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
       }),
       new webpack.ProvidePlugin({
         Promise: 'bluebird',
       }),
+      new webpack.LoaderOptionsPlugin({
+        minimize: false,
+        debug: true,
+        options: {
+          postcss: getPostCSSConfig(webpack, {}),
+        },
+      }),
     ],
   };
 }

webpack/config.server.build.js

@@ -8,15 +8,19 @@ const Dir = global.DIR;
 export function loader() {
   return {
     cssModules: {
-      loader: ExtractTextPlugin.extract(
-        'isomorphic-style-loader',
-        ['css-loader?modules',
+      loader: ExtractTextPlugin.extract({
+        fallbackLoader: 'isomorphic-style-loader',
+        loader: ['css-loader?modules',
         'importLoaders=1',
         'localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader']
-         .join('&')),
+         .join('&'),
+      }),
     },
     cssGlobal: {
-      loader: ExtractTextPlugin.extract('isomorphic-style-loader', 'css-loader!postcss-loader'),
+      loader: ExtractTextPlugin.extract({
+        fallbackLoader: 'isomorphic-style-loader',
+        loader: 'css-loader!postcss-loader',
+      }),
     },
   };
 }
@@ -36,7 +40,10 @@ export function config(entry) {
     externals: [nodeExternalModules()],
     plugins: [
       new ProgressBarPlugin(),
-      new ExtractTextPlugin('style.css', { disable: true }),
+      new ExtractTextPlugin({
+        filename: 'style.css',
+        disable: true,
+      }),
     ],
   };
 }

webpack/config.server.dev.js

@@ -21,15 +21,19 @@ export function loader() {
       },
     },
     cssModules: {
-      loader: ExtractTextPlugin.extract(
-        'isomorphic-style-loader',
-        ['css-loader?modules',
+      loader: ExtractTextPlugin.extract({
+        fallbackLoader: 'isomorphic-style-loader',
+        loader: ['css-loader?modules',
         'importLoaders=1',
         'localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader']
-         .join('&')),
+         .join('&'),
+      }),
     },
     cssGlobal: {
-      loader: ExtractTextPlugin.extract('isomorphic-style-loader', 'css-loader!postcss-loader'),
+      loader: ExtractTextPlugin.extract({
+        fallbackLoader: 'isomorphic-style-loader',
+        loader: 'css-loader!postcss-loader',
+      }),
     },
   };
 }
@@ -55,7 +59,10 @@ export function config(entry) {
     //   whitelist: ['webpack/hot/poll?1000'],
     // })],
     plugins: [
-      new ExtractTextPlugin('style.css', { disable: true }),
+      new ExtractTextPlugin({
+        filename: 'style.css',
+        disable: true,
+      }),
       new StartServerPlugin(),
       new webpack.HotModuleReplacementPlugin(),
       new webpack.NamedModulesPlugin(),

webpack/config.server.js

@@ -1,6 +1,7 @@
 import webpack from 'webpack';
 import getenv from 'getenv';
 import env from '~/config/expose';
+import getPostCSSConfig from './postcss/postcss.config';
 
 export function load() {
   return {
@@ -16,8 +17,13 @@ export function load() {
       new webpack.DefinePlugin({
         'global.CONFIG': JSON.stringify(getenv.multi(env)),
         'global.TYPE': JSON.stringify('SERVER'),
-        'process.env': {
-          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      }),
+      new webpack.LoaderOptionsPlugin({
+        minimize: true,
+        debug: false,
+        options: {
+          postcss: getPostCSSConfig(webpack, {}),
         },
       }),
     ],

webpack/globals.js

@@ -1,32 +1,13 @@
 import path from 'path';
 
-// css
-import postcssImport from 'postcss-import';
-import postcssExtend from 'postcss-extend';
-import postcssFocus from 'postcss-focus';
-import postcssUrl from 'postcss-url';
-import autoprefixer from 'autoprefixer';
-import precss from 'precss';
-import cssnano from 'cssnano';
-
 const Dir = global.DIR;
 
 export default {
   resolve: {
-    root: Dir.src,
-    modulesDirectories: ['node_modules'],
-    extensions: ['', '.js', '.jsx', '.json'],
+    modules: ['node_modules'],
+    extensions: ['.js', '.jsx', '.json'],
     alias: {
       react: path.join(Dir.modules, 'react'),
     },
   },
-  postcss: $webpack => [
-    postcssImport({ addDependencyTo: $webpack }),
-    postcssUrl('inline'),
-    postcssExtend,
-    postcssFocus,
-    autoprefixer,
-    precss,
-    cssnano,
-  ],
 };

webpack/loaders.js

@@ -1,18 +1,14 @@
 const Dir = global.DIR;
 
-export function getPreLoaders() {
+export default function getLoaders() {
   return {
     eslint: {
       test: /\.jsx?$/,
+      enforce: 'pre',
       loader: 'eslint-loader',
       exclude: /node_modules/,
       include: Dir.src,
     },
-  };
-}
-
-export function getLoaders() {
-  return {
     jsx: {
       test: /\.jsx?$/,
       loader: 'babel-loader',

webpack/postcss/postcss.config.js

@@ -0,0 +1,19 @@
+import postcssImport from 'postcss-import';
+import postcssExtend from 'postcss-extend';
+import postcssFocus from 'postcss-focus';
+import postcssUrl from 'postcss-url';
+import autoprefixer from 'autoprefixer';
+import precss from 'precss';
+import cssnano from 'cssnano';
+
+export default function getConfig(bundler) {
+  return [
+    postcssImport({ addDependencyTo: bundler }),
+    postcssUrl('inline'),
+    postcssExtend(),
+    postcssFocus(),
+    autoprefixer(),
+    precss(),
+    cssnano(),
+  ];
+}