updated to webpack 4

app/main.js

@@ -9,6 +9,7 @@ import storage from './storage';
 import metrics from './metrics';
 import experiments from './experiments';
 import Raven from 'raven-js';
+import './main.css';
 
 if (navigator.doNotTrack !== '1' && window.RAVEN_CONFIG) {
   Raven.config(window.SENTRY_ID, window.RAVEN_CONFIG).install();

app/templates/header/index.js

@@ -1,15 +1,5 @@
 const html = require('choo/html');
-/*
+const version = require('../../../package.json').version;
-  The current weback config uses package.json to generate
-  version.json for /__version__ meaning `require` returns the
-  string 'version.json' in the frontend context but the json
-  on the server.
-
-  We want `version` to be constant at build time so this file
-  has a custom loader (/build/version_loader.js) just to replace
-  string with the value from package.json. 🤢
-*/
-const version = require('../../../package.json').version || 'VERSION';
 const browser = browserName();
 
 module.exports = function(state) {

build/fluent_loader.js

@@ -17,7 +17,7 @@ function merge(m1, m2) {
 }
 
 module.exports = function(source) {
-  const localeExp = this.options.locale || /([^/]+)\/[^/]+\.ftl$/;
+  const localeExp = /([^/]+)\/[^/]+\.ftl$/;
   const result = localeExp.exec(this.resourcePath);
   const locale = result && result[1];
   if (!locale) {

build/package_json_loader.js

@@ -1,11 +0,0 @@
-const commit = require('git-rev-sync').short();
-
-module.exports = function(source) {
-  const pkg = JSON.parse(source);
-  const version = {
-    commit,
-    source: pkg.homepage,
-    version: process.env.CIRCLE_TAG || `v${pkg.version}`
-  };
-  return `module.exports = '${JSON.stringify(version)}'`;
-};

build/readme.md

@@ -12,13 +12,9 @@ This loader enumerates all the files in `assets/` so that `common/assets.js` can
 
 This loader enumerates all the ftl files in `public/locales` so that the fluent loader can create it's js files.
 
-## Package.json Loader
+## Version Plugin
 
-This loader creates a `version.json` file that gets exposed by the `/__version__` route from the `package.json` file and current git commit hash.
+Creates a `version.json` file that gets exposed by the `/__version__` route from the `package.json` file and current git commit hash.
-
-## Version Loader
-
-This loader substitutes the string "VERSION" for the version string specified in `package.json`. This is a workaround because `package.json` already uses the `package_json_loader`. See [app/templates/header/index.js](../app/templates/header/index.js) for more info.
 
 # See Also
 

build/version_loader.js

@@ -1,5 +0,0 @@
-const version = require('../package.json').version;
-
-module.exports = function(source) {
-  return source.replace('VERSION', version);
-};

build/version_plugin.js

@@ -0,0 +1,25 @@
+const commit = require('git-rev-sync').short();
+const pkg = require('../package.json');
+
+const version = JSON.stringify({
+  commit,
+  source: pkg.homepage,
+  version: process.env.CIRCLE_TAG || `v${pkg.version}`
+});
+
+class VersionPlugin {
+  apply(compiler) {
+    compiler.hooks.emit.tap('VersionPlugin', compilation => {
+      compilation.assets['version.json'] = {
+        source() {
+          return version;
+        },
+        size() {
+          return version.length
+        }
+      }
+    })
+  }
+}
+
+module.exports = VersionPlugin;

common/assets.js

@@ -1,6 +1,6 @@
 const genmap = require('../build/generate_asset_map');
 const isServer = typeof genmap === 'function';
-const prefix = isServer ? '/' : '';
+const prefix = '';
 let manifest = {};
 try {
   //eslint-disable-next-line node/no-missing-require

common/locales.js

@@ -1,7 +1,7 @@
 const gen = require('../build/generate_l10n_map');
 
 const isServer = typeof gen === 'function';
-const prefix = isServer ? '/' : '';
+const prefix = '';
 let manifest = {};
 try {
   // eslint-disable-next-line node/no-missing-require

package.json

@@ -12,7 +12,7 @@
     "prepush": "npm test",
     "check": "nsp check",
     "clean": "rimraf dist",
-    "build": "npm run clean && webpack && webpack --config webpackSw.config.js",
+    "build": "npm run clean && webpack",
     "lint": "npm-run-all lint:*",
     "lint:css": "stylelint app/*.css app/**/*.css",
     "lint:js": "eslint .",
@@ -30,7 +30,8 @@
     "test:frontend": "cross-env NODE_ENV=development node test/frontend/runner.js && nyc report --reporter=html",
     "test-integration": "docker-compose up --abort-on-container-exit --exit-code-from integration-tests --build --remove-orphans --quiet-pull && docker-compose down",
     "test-integration-stage": "cross-env BASE_URL=https://send.stage.mozaws.net npm run test-integration",
-    "start": "npm run clean && cross-env NODE_ENV=development webpack-dev-server --config webpack.dev.config.js",
+    "start": "npm run clean && cross-env NODE_ENV=development webpack-dev-server --mode=development",
+    "dev": "webpack-serve",
     "prod": "node server/bin/prod.js"
   },
   "lint-staged": {
@@ -55,84 +56,84 @@
     "node": ">=8.2.0"
   },
   "devDependencies": {
+    "@dannycoates/webpack-dev-server": "^3.1.4",
     "asmcrypto.js": "^0.22.0",
-    "babel-core": "^6.26.0",
+    "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
-    "babel-plugin-istanbul": "^4.1.5",
+    "babel-plugin-istanbul": "^4.1.6",
-    "babel-plugin-yo-yoify": "^1.0.2",
+    "babel-plugin-yo-yoify": "^2.0.0",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "babel-preset-stage-3": "^6.24.1",
-    "base64-js": "^1.2.3",
+    "base64-js": "^1.3.0",
-    "copy-webpack-plugin": "^4.5.0",
+    "copy-webpack-plugin": "^4.5.2",
-    "cross-env": "^5.1.3",
+    "cross-env": "^5.2.0",
-    "css-loader": "^0.28.10",
+    "css-loader": "^1.0.0",
     "css-mqpacker": "^6.0.2",
-    "eslint": "^4.18.2",
+    "eslint": "^4.19.1",
     "eslint-plugin-mocha": "^4.12.1",
     "eslint-plugin-node": "^6.0.1",
     "eslint-plugin-security": "^1.4.0",
-    "expose-loader": "^0.7.4",
+    "expose-loader": "^0.7.5",
-    "extract-loader": "^1.0.2",
+    "extract-loader": "^2.0.1",
-    "extract-text-webpack-plugin": "^3.0.2",
     "fast-text-encoding": "^1.0.0",
     "file-loader": "^1.1.11",
     "fluent-intl-polyfill": "^0.1.0",
-    "git-rev-sync": "^1.10.0",
+    "git-rev-sync": "^1.12.0",
     "github-changes": "^1.1.2",
     "html-loader": "^0.5.5",
     "http_ece": "^1.0.5",
     "husky": "^0.14.3",
-    "lint-staged": "^7.0.0",
+    "lint-staged": "^7.2.0",
-    "mocha": "^5.0.4",
+    "mini-css-extract-plugin": "^0.4.1",
+    "mocha": "^5.2.0",
     "nanobus": "^4.3.2",
-    "nanotiming": "^7.3.0",
+    "nanotiming": "^7.3.1",
-    "npm-run-all": "^4.1.2",
+    "npm-run-all": "^4.1.3",
     "nsp": "^3.2.1",
-    "nyc": "^11.5.0",
+    "nyc": "^11.9.0",
     "postcss-cssnext": "^3.1.0",
     "postcss-import": "^11.1.0",
-    "postcss-loader": "^2.1.1",
+    "postcss-loader": "^2.1.5",
-    "prettier": "^1.11.1",
+    "prettier": "^1.13.7",
     "proxyquire": "^1.8.0",
-    "puppeteer": "^1.1.1",
+    "puppeteer": "^1.5.0",
-    "raven-js": "^3.23.1",
+    "raven-js": "^3.26.3",
     "redis-mock": "^0.21.0",
-    "require-from-string": "^2.0.1",
+    "require-from-string": "^2.0.2",
     "rimraf": "^2.6.2",
-    "sinon": "^4.4.2",
+    "sinon": "^4.5.0",
     "string-hash": "^1.1.3",
-    "stylelint": "^9.1.1",
+    "stylelint": "^9.3.0",
     "stylelint-config-standard": "^18.2.0",
-    "stylelint-no-unsupported-browser-features": "^2.0.0",
+    "stylelint-no-unsupported-browser-features": "^3.0.0",
     "svgo": "^1.0.5",
     "svgo-loader": "^2.1.0",
     "testpilot-ga": "^0.3.0",
-    "val-loader": "^1.1.0",
+    "val-loader": "^1.1.1",
     "web-streams-polyfill": "^1.3.2",
-    "webpack": "^3.11.0",
+    "webpack": "^4.15.1",
-    "webpack-dev-middleware": "^2.0.6",
+    "webpack-cli": "^3.0.8",
-    "webpack-dev-server": "2.9.1",
+    "webpack-dev-middleware": "^3.1.3",
-    "webpack-manifest-plugin": "^1.3.2",
+    "webpack-manifest-plugin": "^2.0.3",
     "webpack-unassert-loader": "^1.2.0"
   },
   "dependencies": {
     "@mattiasbuelens/web-streams-adapter": "0.1.0-alpha.1",
-    "aws-sdk": "^2.206.0",
+    "aws-sdk": "^2.266.1",
-    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.26.0",
-    "choo": "^6.10.0",
+    "choo": "^6.12.1",
     "cldr-core": "^32.0.0",
-    "convict": "^4.0.1",
+    "convict": "^4.3.1",
-    "express": "^4.16.2",
+    "express": "^4.16.3",
     "express-ws": "^4.0.0",
-    "fluent": "^0.6.3",
+    "fluent": "^0.6.4",
     "fluent-langneg": "^0.1.0",
-    "helmet": "^3.12.0",
+    "helmet": "^3.12.1",
     "mkdirp": "^0.5.1",
     "mozlog": "^2.2.0",
-    "raven": "^2.4.2",
+    "raven": "^2.6.3",
     "redis": "^2.8.0",
     "websocket-stream": "^5.1.2"
   },

server/bin/dev.js

@@ -7,12 +7,12 @@ const express = require('express');
 const expressWs = require('express-ws');
 const config = require('../config');
 
-const wsapp = express();
-expressWs(wsapp, null, { perMessageDeflate: false });
-wsapp.ws('/api/ws', require('../routes/ws'));
-wsapp.listen(8081, config.listen_address);
-
 module.exports = function(app, devServer) {
+  const wsapp = express();
+  expressWs(wsapp, null, { perMessageDeflate: false });
+  wsapp.ws('/api/ws', require('../routes/ws'));
+  wsapp.listen(8081, config.listen_address);
+
   assets.setMiddleware(devServer.middleware);
   locales.setMiddleware(devServer.middleware);
   routes(app);

server/layout.js

@@ -66,7 +66,8 @@ module.exports = function(state, body = '') {
 
     ${firaTag}
     <script defer src="/jsconfig.js"></script>
-    <script defer src="${assets.get('runtime.js')}"></script>
+    <!--<script defer src="${assets.get('runtime.js')}"></script>-->
+    <script defer src="${assets.get('style.js')}"></script>
     <script defer src="${assets.get('vendor.js')}"></script>
     <script defer src="${locales.get(state.locale)}"></script>
     <script defer src="${assets.get('cryptofill.js')}"></script>

test/frontend/runner.js

@@ -10,7 +10,7 @@ const express = require('express');
 const devRoutes = require('../../server/bin/test');
 const app = express();
 
-const wpm = middleware(webpack(config), { logLevel: 'silent' });
+const wpm = middleware(webpack(config()), { logLevel: 'silent' });
 app.use(wpm);
 devRoutes(app, { middleware: wpm });
 

webpack.config.js

@@ -2,38 +2,29 @@ const path = require('path');
 const webpack = require('webpack');
 const CopyPlugin = require('copy-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const VersionPlugin = require('./build/version_plugin');
-const IS_DEV = process.env.NODE_ENV === 'development';
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
-const regularJSOptions = {
+const webJsOptions = {
   babelrc: false,
   presets: [['env', { modules: false }], 'stage-2'],
   // yo-yoify converts html template strings to direct dom api calls
   plugins: ['yo-yoify']
 };
 
-const entry = {
+const web = {
+  target: 'web',
+  entry: {
     // babel-polyfill and fluent are directly included in vendor
     // because they are not explicitly referenced by app
     vendor: ['babel-polyfill', 'fluent'],
-  app: ['./app/main.js'],
+    app: ['./app/main.js']
-  style: ['./app/main.css']
+  },
-};
-
-if (IS_DEV) {
-  entry.tests = ['./test/frontend/index.js'];
-  // istanbul instruments the source for code coverage
-  regularJSOptions.plugins.push('istanbul');
-}
-
-module.exports = {
-  entry,
   output: {
-    filename: '[name].[chunkhash:8].js',
+    filename: '[name].[hash:8].js',
     path: path.resolve(__dirname, 'dist'),
     publicPath: '/'
   },
-  devtool: IS_DEV && 'inline-source-map',
   module: {
     rules: [
       {
@@ -50,17 +41,6 @@ module.exports = {
               }
             ]
           },
-          {
-            // inlines version from package.json into header/index.js
-            include: require.resolve('./app/templates/header'),
-            use: [
-              {
-                loader: 'babel-loader',
-                options: regularJSOptions
-              },
-              './build/version_loader'
-            ]
-          },
           {
             // fluent gets exposed as a global so that each language script
             // can load independently and share it.
@@ -89,7 +69,7 @@ module.exports = {
               path.resolve(__dirname, 'node_modules/fluent-intl-polyfill'),
               path.resolve(__dirname, 'node_modules/intl-pluralrules')
             ],
-            options: regularJSOptions
+            options: webJsOptions
           },
           {
             // Strip asserts from our deps, mainly choojs family
@@ -129,28 +109,15 @@ module.exports = {
       {
         // creates style.css with all styles
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
         use: [
+          MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
-              options: { modules: false, importLoaders: 1 }
-            },
-            'postcss-loader'
-          ]
-        })
-      },
-      {
-        // creates version.json for /__version__ from package.json
-        test: require.resolve('./package.json'),
-        use: [
-          {
-            loader: 'file-loader',
             options: {
-              name: 'version.json'
+              importLoaders: 1
             }
           },
-          'extract-loader',
+          'postcss-loader'
-          './build/package_json_loader'
         ]
       },
       {
@@ -164,6 +131,7 @@ module.exports = {
             }
           },
           'extract-loader',
+          'babel-loader',
           './build/fluent_loader'
         ]
       },
@@ -184,6 +152,17 @@ module.exports = {
       }
     ]
   },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        style: {
+          name: 'style',
+          test: /\.css$/,
+          chunks: 'all'
+        }
+      }
+    }
+  },
   plugins: [
     new CopyPlugin([
       {
@@ -194,22 +173,16 @@ module.exports = {
     new webpack.IgnorePlugin(/dist/), // used in common/*.js
     new webpack.IgnorePlugin(/require-from-string/), // used in common/locales.js
     new webpack.HashedModuleIdsPlugin(),
-    new webpack.optimize.CommonsChunkPlugin({
+    new MiniCssExtractPlugin({
-      name: 'vendor',
+      filename: '[name].[contenthash:8].css'
-      minChunks: ({ resource }) => /node_modules/.test(resource)
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'runtime'
-    }),
-    new ExtractTextPlugin({
-      filename: 'style.[contenthash:8].css'
     }),
+    new VersionPlugin(),
     new ManifestPlugin() // used by server side to resolve hashed assets
   ],
   devServer: {
     compress: true,
+    hot: false,
     host: '0.0.0.0',
-    before: IS_DEV ? require('./server/bin/dev') : undefined,
     proxy: {
       '/api/ws': {
         target: 'ws://localhost:8081',
@@ -219,3 +192,30 @@ module.exports = {
     }
   }
 };
+
+const serviceWorker = {
+  target: 'webworker',
+  entry: {
+    serviceWorker: './app/serviceWorker.js'
+  },
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: '/'
+  }
+}
+
+module.exports = (env, argv) => {
+  // TODO: why are styles not output in 'production' mode?
+  const mode = 'development' //argv.mode || 'production';
+  console.error(`mode: ${mode}`);
+  web.mode = serviceWorker.mode = mode;
+  if (mode === 'development') {
+    web.devtool = 'inline-source-map';
+    web.devServer.before = require('./server/bin/dev');
+    web.entry.tests = ['./test/frontend/index.js'];
+    // istanbul instruments the source for code coverage
+    webJsOptions.plugins.push('istanbul');
+  }
+  return [web, serviceWorker]
+}

webpack.dev.config.js

@@ -1,226 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-const CopyPlugin = require('copy-webpack-plugin');
-const ManifestPlugin = require('webpack-manifest-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const IS_DEV = process.env.NODE_ENV === 'development';
-
-const regularJSOptions = {
-  babelrc: false,
-  presets: [['env', { modules: false }], 'stage-2'],
-  // yo-yoify converts html template strings to direct dom api calls
-  plugins: ['yo-yoify']
-};
-
-const entry = {
-  // babel-polyfill and fluent are directly included in vendor
-  // because they are not explicitly referenced by app
-  vendor: ['babel-polyfill', 'fluent'],
-  app: ['./app/main.js'],
-  style: ['./app/main.css'],
-  serviceWorker: ['./app/serviceWorker.js']
-};
-
-if (IS_DEV) {
-  entry.tests = ['./test/frontend/index.js'];
-  // istanbul instruments the source for code coverage
-  regularJSOptions.plugins.push('istanbul');
-}
-
-module.exports = {
-  entry,
-  output: {
-    filename: '[name].js',
-    path: path.resolve(__dirname, 'dist'),
-    publicPath: '/'
-  },
-  devtool: IS_DEV && 'inline-source-map',
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        oneOf: [
-          {
-            include: [require.resolve('./assets/cryptofill')],
-            use: [
-              {
-                loader: 'file-loader',
-                options: {
-                  name: '[name].[hash:8].[ext]'
-                }
-              }
-            ]
-          },
-          {
-            // inlines version from package.json into header/index.js
-            include: require.resolve('./app/templates/header'),
-            use: [
-              {
-                loader: 'babel-loader',
-                options: regularJSOptions
-              },
-              './build/version_loader'
-            ]
-          },
-          {
-            // fluent gets exposed as a global so that each language script
-            // can load independently and share it.
-            include: [path.dirname(require.resolve('fluent'))],
-            use: [
-              {
-                loader: 'expose-loader',
-                options: 'fluent'
-              },
-              {
-                loader: 'babel-loader',
-                options: {
-                  presets: [['env', { modules: false }], 'stage-3']
-                }
-              }
-            ]
-          },
-          {
-            include: [
-              path.resolve(__dirname, 'app'),
-              path.resolve(__dirname, 'common')
-            ]
-          },
-          {
-            loader: 'babel-loader',
-            include: [
-              // some dependencies need to get re-babeled because we
-              // have different targets than their default configs
-              path.resolve(__dirname, 'node_modules/testpilot-ga/src'),
-              path.resolve(__dirname, 'node_modules/fluent-intl-polyfill'),
-              path.resolve(__dirname, 'node_modules/intl-pluralrules')
-            ],
-            options: regularJSOptions
-          },
-          {
-            // Strip asserts from our deps, mainly choojs family
-            include: [path.resolve(__dirname, 'node_modules')],
-            loader: 'webpack-unassert-loader'
-          }
-        ]
-      },
-      {
-        test: /\.(png|jpg)$/,
-        loader: 'file-loader',
-        options: {
-          name: '[name].[hash:8].[ext]'
-        }
-      },
-      {
-        test: /\.svg$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[hash:8].[ext]'
-            }
-          },
-          {
-            loader: 'svgo-loader',
-            options: {
-              plugins: [
-                { removeViewBox: false }, // true causes stretched images
-                { convertStyleToAttrs: true }, // for CSP, no unsafe-eval
-                { removeTitle: true } // for smallness
-              ]
-            }
-          }
-        ]
-      },
-      {
-        // creates style.css with all styles
-        test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          use: [
-            {
-              loader: 'css-loader',
-              options: { modules: false, importLoaders: 1 }
-            },
-            'postcss-loader'
-          ]
-        })
-      },
-      {
-        // creates version.json for /__version__ from package.json
-        test: require.resolve('./package.json'),
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: 'version.json'
-            }
-          },
-          'extract-loader',
-          './build/package_json_loader'
-        ]
-      },
-      {
-        // creates a js script for each ftl
-        test: /\.ftl$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[path][name].[hash:8].js'
-            }
-          },
-          'extract-loader',
-          './build/fluent_loader'
-        ]
-      },
-      {
-        // creates test.js for /test
-        test: require.resolve('./test/frontend/index.js'),
-        use: ['babel-loader', 'val-loader']
-      },
-      {
-        // loads all assets from assets/ for use by common/assets.js
-        test: require.resolve('./build/generate_asset_map.js'),
-        use: ['babel-loader', 'val-loader']
-      },
-      {
-        // loads all the ftl from public/locales for use by common/locales.js
-        test: require.resolve('./build/generate_l10n_map.js'),
-        use: ['babel-loader', 'val-loader']
-      }
-    ]
-  },
-  plugins: [
-    new CopyPlugin([
-      {
-        context: 'public',
-        from: '*.*'
-      }
-    ]),
-    new webpack.IgnorePlugin(/dist/), // used in common/*.js
-    new webpack.IgnorePlugin(/require-from-string/), // used in common/locales.js
-    new webpack.HashedModuleIdsPlugin(),
-    // new webpack.optimize.CommonsChunkPlugin({
-    //   name: 'vendor',
-    //   minChunks: ({ resource }) => /node_modules/.test(resource)
-    // }),
-    // new webpack.optimize.CommonsChunkPlugin({
-    //   name: 'runtime'
-    // }),
-    new ExtractTextPlugin({
-      filename: 'style.[contenthash:8].css'
-    }),
-    new ManifestPlugin() // used by server side to resolve hashed assets
-  ],
-  devServer: {
-    compress: true,
-    host: '0.0.0.0',
-    before: IS_DEV ? require('./server/bin/dev') : undefined,
-    proxy: {
-      '/api/ws': {
-        target: 'ws://localhost:8081',
-        ws: true,
-        secure: false
-      }
-    }
-  }
-};

webpackSw.config.js

@@ -1,34 +0,0 @@
-const path = require('path');
-
-/*
-const regularJSOptions = {
-  babelrc: false,
-  presets: [['env'], 'stage-2'],
-  plugins: ['transform-runtime']
-};
-*/
-
-const entry = {
-  serviceWorker: ['./app/serviceWorker.js']
-};
-
-module.exports = {
-  entry,
-  output: {
-    filename: '[name].js',
-    path: path.resolve(__dirname, 'dist'),
-    publicPath: '/'
-  },
-
-  /*
-  module: {
-    rules: [
-      {
-        loader: 'babel-loader',
-        exclude: /node_modules/,
-        options: regularJSOptions
-      }
-    ]
-  }
-  */
-};