Upgrade to webpack 2 (#2380)

README.md

@@ -236,11 +236,72 @@ The env vars are:
 | npm run start          |  Starts the express server (requires env vars)      |
 | npm run build          |  Builds the libs (all apps) (requires env vars)     |
 
-Example: Building and running a production instance of the admin app:
+Example: Building and running a production instance of the AMO 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
+````
+
+To run the app locally in production mode you'll need to create a config file
+that looks something like this. Name it exactly as `config/local-production-amo.js`.
+
+````js
+import { apiStageHost, amoStageCDN } from './lib/shared';
+
+module.exports = {
+  // Statics will be served by node.
+  staticHost: '',
+  // FIXME: sign-in isn't working.
+  // fxaConfig: 'local',
+
+  // The node server host and port.
+  serverHost: '127.0.0.1',
+  serverPort: 3000,
+
+  enableClientConsole: true,
+  apiHost: apiStageHost,
+  amoCDN: amoStageCDN,
+
+  CSP: {
+    directives: {
+      connectSrc: [
+        apiStageHost,
+      ],
+      scriptSrc: [
+        "'self'",
+        'https://www.google-analytics.com',
+      ],
+      styleSrc: ["'self'"],
+      imgSrc: [
+        "'self'",
+        'data:',
+        amoStageCDN,
+        'https://www.google-analytics.com',
+      ],
+      mediaSrc: ["'self'"],
+      fontSrc: [
+        "'self'",
+        'data:',
+        amoStageCDN,
+      ],
+    },
+  },
+
+  // This is needed to serve assets locally.
+  enableNodeStatics: true,
+  trackingEnabled: false,
+  // Do not send client side errors to Sentry.
+  publicSentryDsn: null,
+};
+````
+
+After this, re-build and restart using `npm run build` and `npm run start`
+as documented above.
+If you have used `localhost` before with a different configuration,
+be sure to clear your cookies.
+
+**NOTE**: At this time, it's not possible to sign in using this approach.
 
 ## What version is deployed?
 

bin/config-check.js

@@ -20,15 +20,15 @@ if (!fs.statSync(configDir).isDirectory()) {
 }
 
 const disallowedFiles = fs.readdirSync(configDir)
-  // Disallow any local configs except for development configs.
-  .filter((name) =>
-    name.startsWith('local') && !name.startsWith('local-development'))
+  // Disallow any local configs that could possibly pollute the tests.
+  .filter((name) => name === 'local.js' || name.startsWith('local-test'))
   .map((name) => path.join(configDir, name).replace(process.cwd(), '.'));
 
 if (disallowedFiles.length) {
   console.log(chalk.red(
     'These local config files are not allowed because they might pollute ' +
-    'the test environment. Prefix them with local-development- instead:'));
+    'the test environment. Prefix them with local-development- or remove ' +
+    'them:'));
   console.log(chalk.red(disallowedFiles.join('\n')));
   process.exit(1);
 }

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,17 +285,18 @@
     "semver": "^5.3.0",
     "shelljs": "^0.7.7",
     "sinon": "^2.2.0",
-    "sri-stats-webpack-plugin": "^0.7.3",
     "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",
+    "tmp": "^0.0.31",
     "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"
+    "webpack-hot-middleware": "^2.18.0",
+    "webpack-subresource-integrity": "^1.0.0-rc.1"
   }
 }

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({});
     }

src/core/server/sriDataPlugin.js

@@ -0,0 +1,36 @@
+// This is a webpack plugin to expose the data generated by SriPlugin.
+// See webpack.prod.config.babel.js
+import fs from 'fs';
+
+import { oneLine } from 'common-tags';
+
+export default class SriDataPlugin {
+  constructor({ saveAs } = {}) {
+    if (!saveAs) {
+      throw new Error('The saveAs parameter cannot be empty');
+    }
+    this.saveAs = saveAs;
+  }
+
+  apply(compiler) {
+    compiler.plugin('done', (stats) => {
+      const sriStats = {};
+      try {
+        Object.keys(stats.compilation.assets).forEach((baseName) => {
+          const asset = stats.compilation.assets[baseName];
+          if (!asset.integrity) {
+            throw new Error(
+              oneLine`The integrity property is falsey for
+              asset ${baseName}; Is the webpack-subresource-integrity
+              plugin installed and enabled?`);
+          }
+          sriStats[baseName] = asset.integrity;
+        });
+
+        fs.writeFileSync(this.saveAs, JSON.stringify(sriStats));
+      } catch (error) {
+        stats.compilation.errors.push(error);
+      }
+    });
+  }
+}