Upgrade to webpack 2

README.md

@@ -238,9 +238,10 @@ The env vars are:
 
 Example: Building and running a production instance of the admin app:
 
-```
-NODE_APP_INSTANCE=admin NODE_ENV=production npm run build && npm run start
-```
+````
+NODE_APP_INSTANCE=amo NODE_ENV=production npm run build
+NODE_APP_INSTANCE=amo NODE_ENV=production npm run start
+````
 
 ## What version is deployed?
 

config/default.js

@@ -16,7 +16,8 @@ const validAppNames = [
 
 // Throw if the appName supplied is not valid.
 if (appName && !validAppNames.includes(appName)) {
-  throw new Error(`App ${appName} is not enabled`);
+  throw new Error(
+    `App "${appName}" is not enabled; valid app names: ${validAppNames}`);
 }
 
 

karma.conf.js

@@ -7,13 +7,12 @@ require('babel-register');
 
 const fs = require('fs');
 
-const webpack = require('webpack');
-const config = require('config');
-
-const getClientConfig = require('./src/core/utils').getClientConfig;
+const webpackCommon = require('./webpack-common');
 const webpackConfigProd = require('./webpack.prod.config.babel').default;
 
-const clientConfig = getClientConfig(config);
+const getPlugins = webpackCommon.getPlugins;
+const getRules = webpackCommon.getRules;
+
 const babelrc = fs.readFileSync('./.babelrc');
 const babelQuery = JSON.parse(babelrc);
 
@@ -24,16 +23,14 @@ const coverageReporters = [{
 babelQuery.plugins.push(['istanbul', { include: 'src/**' }]);
 
 const newWebpackConfig = Object.assign({}, webpackConfigProd, {
+  devtool: 'inline-source-map',
+  module: {
+    rules: getRules({ babelQuery, bundleStylesWithJs: true }),
+  },
+  output: undefined,
+  entry: undefined,
   plugins: [
-    new webpack.DefinePlugin({
-      CLIENT_CONFIG: JSON.stringify(clientConfig),
-    }),
-    // Replaces server config module with the subset clientConfig object.
-    new webpack.NormalModuleReplacementPlugin(/config$/, 'core/client/config.js'),
-    // Substitutes client only config.
-    new webpack.NormalModuleReplacementPlugin(/core\/logger$/, 'core/client/logger.js'),
-    // Use the browser's window for window.
-    new webpack.NormalModuleReplacementPlugin(/core\/window/, 'core/browserWindow.js'),
+    ...getPlugins({ excludeOtherAppLocales: false }),
     // Plugin to show any webpack warnings and prevent tests from running
     // Based on: https://gist.github.com/Stuk/6b574049435df532e905
     function WebpackWarningPlugin() {
@@ -69,52 +66,6 @@ const newWebpackConfig = Object.assign({}, webpackConfigProd, {
       });
     },
   ],
-  devtool: 'inline-source-map',
-  module: {
-    loaders: [
-      {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        loader: 'babel',
-        query: babelQuery,
-      }, {
-        test: /\.css$/,
-        loader: 'style!css?importLoaders=2!postcss?outputStyle=expanded',
-      }, {
-        test: /\.scss$/,
-        loader: 'style!css?importLoaders=2!postcss!sass?outputStyle=expanded',
-      }, {
-        test: /\.svg$/,
-        loader: 'url?limit=10000&mimetype=image/svg+xml',
-      }, {
-        test: /\.jpg$/,
-        loader: 'url?limit=10000&mimetype=image/jpeg',
-      }, {
-        test: /\.png$/,
-        loader: 'url?limit=10000&mimetype=image/png',
-      }, {
-        test: /\.gif/,
-        loader: 'url?limit=10000&mimetype=image/gif',
-      }, {
-        test: /\.webm$/,
-        loader: 'url?limit=10000&mimetype=video/webm',
-      }, {
-        test: /\.mp4$/,
-        loader: 'url?limit=10000&mimetype=video/mp4',
-      }, {
-        test: /\.otf$/,
-        loader: 'url?limit=10000&mimetype=application/font-sfnt',
-      }, {
-        test: /\.woff$/,
-        loader: 'url?limit=10000&mimetype=application/font-woff',
-      }, {
-        test: /\.woff2$/,
-        loader: 'url?limit=10000&mimetype=application/font-woff2',
-      },
-    ],
-  },
-  output: undefined,
-  entry: undefined,
 });
 
 const reporters = [

package.json

@@ -186,7 +186,7 @@
     "dompurify": "0.8.9",
     "es6-error": "4.0.2",
     "express": "4.15.2",
-    "extract-text-webpack-plugin": "1.0.1",
+    "extract-text-webpack-plugin": "2.1.0",
     "fastclick": "1.0.6",
     "helmet": "3.6.0",
     "humps": "2.0.0",
@@ -229,7 +229,7 @@
     "babel-core": "^6.24.1",
     "babel-eslint": "^7.2.3",
     "babel-gettext-extractor": "git+https://github.com/muffinresearch/babel-gettext-extractor.git#0d39d3882bc846e7dcb6c9ff6463896c96920ce6",
-    "babel-loader": "^6.4.1",
+    "babel-loader": "^7.0.0",
     "babel-plugin-istanbul": "^4.1.3",
     "babel-plugin-react-transform": "^2.0.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
@@ -285,15 +285,15 @@
     "semver": "^5.3.0",
     "shelljs": "^0.7.7",
     "sinon": "^2.2.0",
-    "sri-stats-webpack-plugin": "^0.7.3",
+    "sri-stats-webpack-plugin": "github:sopherio/sri-stats-webpack-plugin#f23de19e1d84dab50e59076e05bcafa508ba64c4",
     "style-loader": "^0.17.0",
     "stylelint": "^7.10.1",
     "stylelint-config-standard": "^16.0.0",
     "supertest": "^3.0.0",
     "supertest-as-promised": "^4.0.2",
     "svg-url-loader": "^2.0.2",
     "tosource": "^1.0.0",
-    "webpack": "^1.14.0",
+    "webpack": "^2.5.1",
     "webpack-dev-middleware": "^1.10.2",
     "webpack-dev-server": "^2.4.5",
     "webpack-hot-middleware": "^2.18.0"

src/core/client/base.js

@@ -78,7 +78,7 @@ export default function makeClient(routes, createStore) {
   try {
     if (locale !== langToLocale(config.get('defaultLang'))) {
       // eslint-disable-next-line max-len, global-require, import/no-dynamic-require
-      require(`bundle?name=[name]-i18n-[folder]!../../locale/${locale}/${appName}.js`)(renderApp);
+      require(`bundle-loader?name=[name]-i18n-[folder]!../../locale/${locale}/${appName}.js`)(renderApp);
     } else {
       renderApp({});
     }

webpack-common.js

@@ -0,0 +1,173 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import config from 'config';
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import webpack from 'webpack';
+
+import { getClientConfig } from 'core/utils';
+
+export function getRules({ babelQuery, bundleStylesWithJs = false } = {}) {
+  let styleRules;
+
+  if (bundleStylesWithJs) {
+    // In development, we bundle styles with the JS.
+    styleRules = [
+      {
+        test: /\.css$/,
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader', options: { importLoaders: 2 } },
+          { loader: 'postcss-loader', options: { outputStyle: 'expanded' } },
+        ],
+      }, {
+        test: /\.scss$/,
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader', options: { importLoaders: 2 } },
+          { loader: 'postcss-loader' },
+          { loader: 'sass-loader', options: { outputStyle: 'expanded' } },
+        ],
+      },
+    ];
+  } else {
+    // In production, we create a separate CSS bundle rather than
+    // include styles with the JS bundle. This lets the style bundle
+    // load in parallel.
+    styleRules = [
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'css-loader',
+              options: { importLoaders: 2, sourceMap: true },
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                outputStyle: 'expanded',
+                sourceMap: true,
+                sourceMapContents: true,
+              },
+            },
+          ],
+        }),
+      }, {
+        test: /\.scss$/,
+        loader: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'css-loader',
+              options: { importLoaders: 2, sourceMap: true },
+            },
+            { loader: 'postcss-loader' },
+            {
+              loader: 'sass-loader',
+              options: {
+                outputStyle: 'expanded',
+                sourceMap: true,
+                sourceMapContents: true,
+              },
+            },
+          ],
+        }),
+      },
+    ];
+  }
+
+  return [
+    {
+      test: /\.jsx?$/,
+      exclude: /node_modules/,
+      loader: 'babel-loader',
+      query: babelQuery,
+    },
+    ...styleRules,
+    {
+      test: /\.svg$/,
+      use: [{ loader: 'svg-url-loader', options: { limit: 10000 } }],
+    }, {
+      test: /\.jpg$/,
+      use: [{
+        loader: 'url-loader',
+        options: { limit: 10000, mimetype: 'image/jpeg' },
+      }],
+    }, {
+      test: /\.png$/,
+      use: [{
+        loader: 'url-loader',
+        options: { limit: 10000, mimetype: 'image/png' },
+      }],
+    }, {
+      test: /\.gif/,
+      use: [{
+        loader: 'url-loader',
+        options: { limit: 10000, mimetype: 'image/gif' },
+      }],
+    }, {
+      test: /\.webm$/,
+      use: [{
+        loader: 'url-loader',
+        options: { limit: 10000, mimetype: 'video/webm' },
+      }],
+    }, {
+      test: /\.mp4$/,
+      use: [{
+        loader: 'url-loader',
+        options: { limit: 10000, mimetype: 'video/mp4' },
+      }],
+    }, {
+      test: /\.otf$/,
+      use: [{
+        loader: 'url-loader',
+        options: { limit: 10000, mimetype: 'application/font-sfnt' },
+      }],
+    }, {
+      test: /\.woff$/,
+      use: [{
+        loader: 'url-loader',
+        options: { limit: 10000, mimetype: 'application/font-woff' },
+      }],
+    }, {
+      test: /\.woff2$/,
+      use: [{
+        loader: 'url-loader',
+        options: { limit: 10000, mimetype: 'application/font-woff2' },
+      }],
+    },
+  ];
+}
+
+export function getPlugins({ excludeOtherAppLocales = true } = {}) {
+  const appName = config.get('appName');
+  const clientConfig = getClientConfig(config);
+
+  const plugins = [
+    new webpack.DefinePlugin({
+      CLIENT_CONFIG: JSON.stringify(clientConfig),
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    }),
+    // Replaces server config module with the subset clientConfig object.
+    new webpack.NormalModuleReplacementPlugin(
+      /config$/, 'core/client/config.js'),
+    // Substitutes client only config.
+    new webpack.NormalModuleReplacementPlugin(
+      /core\/logger$/, 'core/client/logger.js'),
+    // Use the browser's window for window.
+    new webpack.NormalModuleReplacementPlugin(
+      /core\/window/, 'core/browserWindow.js'),
+  ];
+
+  if (excludeOtherAppLocales) {
+    plugins.push(
+      // This allow us to exclude locales for other apps being built.
+      new webpack.ContextReplacementPlugin(
+        /locale$/,
+        new RegExp(`^\\.\\/.*?\\/${appName}\\.js$`)
+      ),
+    );
+  }
+
+  return plugins;
+}