Merge pull request #24 from combine/feature/webpack2

Add support for webpack 2 (beta.27)

Author: calvinl

package.json

@@ -42,7 +42,7 @@
     "redux-devtools": "3.3.1",
     "redux-devtools-dock-monitor": "1.1.1",
     "redux-devtools-log-monitor": "1.1.1",
-    "webpack-dev-server": "1.16.2",
+    "webpack-dev-server": "2.1.0-beta.11",
     "webpack-sources": "0.1.2"
   },
   "dependencies": {
@@ -71,7 +71,7 @@
     "css-modules-require-hook": "4.0.5",
     "expose-loader": "0.7.1",
     "express": "4.14.0",
-    "extract-text-webpack-plugin": "1.0.1",
+    "extract-text-webpack-plugin": "2.0.0-beta.4",
     "file-loader": "0.9.0",
     "font-awesome": "4.7.0",
     "history": "4.4.0",
@@ -95,7 +95,7 @@
     "serve-static": "1.11.1",
     "style-loader": "0.13.1",
     "url-loader": "0.5.7",
-    "webpack": "1.13.3",
+    "webpack": "2.1.0-beta.27",
     "webpack-isomorphic-tools": "2.6.4"
   }
 }

postcss.config.js

@@ -0,0 +1,5 @@
+const autoprefixer = require('autoprefixer');
+
+module.exports = {
+  plugins: [autoprefixer]
+};

server/server.js

@@ -99,6 +99,6 @@ app.listen(port, (error) => {
   if (error) {
     console.error(error);
   } else {
-    console.info(`🌎 Application server listening on port ${port}.`);
+    console.info(`Application server mounted locally on port ${port}.`);
   }
 });

webpack/base.js

@@ -4,7 +4,7 @@ import mapValues from 'lodash/mapValues';
 import autoprefixer from 'autoprefixer';
 import isomorphicConfig from './isomorphic';
 import IsomorphicPlugin from 'webpack-isomorphic-tools/plugin';
-import { OUTPUT_PATH, ASSET_HOST, RESOLVE_PATHS } from './config';
+import { OUTPUT_PATH, ASSET_HOST, RESOLVE_PATHS } from './constants';
 
 const isDev = process.env.NODE_ENV === 'development';
 const isomorphicPlugin = new IsomorphicPlugin(isomorphicConfig).development(isDev);
@@ -36,36 +36,40 @@ export default {
     publicPath: ASSET_HOST
   },
   resolve: {
-    extensions: ['', '.js', '.jsx', '.scss'],
+    extensions: ['.js', '.jsx', '.scss'],
     alias: mapValues(RESOLVE_PATHS, (str) => (
       path.join(process.cwd(), ...str.split('/'))
     ))
   },
   module: {
-    preLoaders: [
+    rules: [
       {
+        enforce: 'pre',
         test: /\.jsx$|\.js$/,
-        loader: 'eslint-loader',
-        exclude: /node_modules/
-      }
-    ],
-    loaders: [
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'eslint-loader',
+            options: {
+              configFile: './.eslintrc',
+            }
+          }
+        ]
+      },
       {
         test: /\.json$/,
-        loader: 'json'
+        loader: 'json-loader'
       },
       {
         test: isomorphicPlugin.regular_expression('images'),
         loader: 'url-loader?limit=10240'
       },
       {
-        // test: /\.(woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]*)?$/,
         test: /\.(ttf|eot|svg|jpe?g|png|gif|ico|woff2?)$/,
-        loader: 'file'
+        loader: 'file-loader'
       }
     ]
   },
-  postcss: [autoprefixer],
   plugins: [
     isomorphicPlugin,
     new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en|es/),

webpack/config.js renamed to webpack/constants.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { DEV_SERVER_PORT, DEV_SERVER_HOSTNAME, DEV_SERVER_HOST_URL } from './config';
+import { DEV_SERVER_PORT, DEV_SERVER_HOSTNAME, DEV_SERVER_HOST_URL } from './constants';
 import WebpackDevServer from 'webpack-dev-server';
 import webpack from 'webpack';
 import baseConfig from './base';
@@ -13,33 +13,47 @@ const entry = [
 
 // Additional plugins
 const plugins = [
-  new webpack.optimize.OccurenceOrderPlugin(),
   new webpack.HotModuleReplacementPlugin(),
-  new webpack.NoErrorsPlugin()
+  new webpack.NoErrorsPlugin(),
+  new webpack.NamedModulesPlugin()
 ];
 
 // Additional loaders
 const loaders = [
   {
     test: /\.css$/,
-    loaders: [
-      'style',
-      `css?modules&importLoaders=3&localIdentName=${packageJson.config.css}`,
-      'postcss',
-    ],
+    use: [
+      'style-loader',
+      {
+        loader: 'css-loader',
+        options: {
+          modules: true,
+          importLoaders: 3,
+          localIdentName: packageJson.config.css
+        }
+      },
+      'postcss-loader'
+    ]
   },
   {
     test: /\.scss$/,
-    loaders: [
-      'style',
-      `css?modules&importLoaders=3&localIdentName=${packageJson.config.css}`,
-      'postcss',
-      'sass'
+    use: [
+      'style-loader',
+      {
+        loader: 'css-loader',
+        options: {
+          modules: true,
+          importLoaders: 3,
+          localIdentName: packageJson.config.css
+        }
+      },
+      'postcss-loader',
+      'sass-loader'
     ]
   },
   {
     test: /\.jsx$|\.js$/,
-    loader: 'babel',
+    loader: 'babel-loader',
     exclude: /node_modules/,
     // use react-transform to hot reload modules when hot is specified
     query: {
@@ -60,8 +74,6 @@ const loaders = [
 ];
 
 const config = Object.assign({}, baseConfig, {
-  eslint: { configFile: './.eslintrc' },
-  devServerPort: DEV_SERVER_PORT,
   devtool: 'eval',
   entry: Object.assign({}, baseConfig.entry, {
     app: [
@@ -74,8 +86,8 @@ const config = Object.assign({}, baseConfig, {
     ...plugins
   ],
   module: Object.assign({}, baseConfig.module, {
-    loaders: [
-      ...baseConfig.module.loaders,
+    rules: [
+      ...baseConfig.module.rules,
       ...loaders
     ]
   })
@@ -84,6 +96,7 @@ const config = Object.assign({}, baseConfig, {
 console.info('Firing up Webpack dev server...');
 
 new WebpackDevServer(webpack(config), {
+  port: DEV_SERVER_PORT,
   publicPath: config.output.publicPath,
   hot: true,
   historyApiFallback: true,
@@ -101,6 +114,6 @@ new WebpackDevServer(webpack(config), {
   if (err) {
     console.error(err);
   } else {
-    console.info('🚧 Webpack client dev-server listening on ' + DEV_SERVER_HOST_URL + ' with publicPath:' + config.output.publicPath);
+    console.info(`Webpack dev server mounted at ${DEV_SERVER_HOST_URL}. Asset path: ${config.output.publicPath}`);
   }
 });

webpack/development.hot.js

@@ -13,35 +13,36 @@ const loaders = [
     exclude: /node_modules/
   },
   {
-    test: /\.css$/,
-    loader: ExtractTextPlugin.extract(
-      'style',
-      `css?minimize&modules&importLoaders=1&localIdentName=${packageJson.config.css}` +
-      '!postcss'
-    )
-  },
-  {
-    test: /\.scss$/,
-    loader: ExtractTextPlugin.extract(
-      'style',
-      `css?minimize&modules&importLoaders=1&localIdentName=${packageJson.config.css}` +
-      '!postcss' +
-      '!sass'
-    )
+    test: /\.(css|scss)$/,
+    loader: ExtractTextPlugin.extract({
+      fallbackLoader: 'style-loader',
+      loader: [
+        {
+          loader: 'css-loader',
+          options: {
+            modules: true,
+            minimize: false,
+            importLoaders: 1,
+            localIdentName: packageJson.config.css
+          }
+        },
+        { loader: 'postcss-loader' },
+        { loader: 'sass-loader' }
+      ]
+    })
   }
 ];
 
 export default {
   ...baseConfig,
-  eslint: { configFile: './.eslintrc' },
   devtool: 'source-map',
   plugins: [
     ...baseConfig.plugins,
     ...plugins
   ],
   module: Object.assign({}, baseConfig.module, {
-    loaders: [
-      ...baseConfig.module.loaders,
+    rules: [
+      ...baseConfig.module.rules,
       ...loaders
     ]
   })

webpack/development.js

@@ -22,14 +22,25 @@ const plugins = [
   })
 ];
 
-const loaders = [{
-  test: /\.scss$/,
-  loader: ExtractTextPlugin.extract('css!sass')
-}, {
-  test: /\.js$/,
-  loaders: ['babel'],
-  exclude: /node_modules/
-}];
+const loaders = [
+  {
+    test: /\.scss$/,
+    loader: ExtractTextPlugin.extract({
+      fallbackLoader: 'style-loader',
+      loader: [
+        { loader: 'css-loader' },
+        { loader: 'postcss-loader' },
+        { loader: 'sass-loader' }
+      ]
+    })
+  },
+  {
+    test: /\.js$/,
+    loader: 'babel-loader',
+    rules: ['babel'],
+    exclude: /node_modules/
+  }
+];
 
 export default {
   ...baseConfig,
@@ -41,8 +52,8 @@ export default {
     ...plugins
   ],
   module: Object.assign({}, baseConfig.module, {
-    loaders: [
-      ...baseConfig.module.loaders,
+    rules: [
+      ...baseConfig.module.rules,
       ...loaders
     ]
   })