Merge pull request #242 from halfzebra/webpack-4

Webpack 4

.eslintrc.js

@@ -5,6 +5,9 @@ module.exports = {
     es6: true,
     node: true
   },
+  parserOptions: {
+    ecmaVersion: 6
+  },
   extends: ['eslint:recommended'],
   plugins: ['prettier'],
   rules: {

.prettierrc

@@ -0,0 +1,3 @@
+{
+  singleQuote: true
+}

.travis.yml

@@ -3,8 +3,6 @@ sudo: required
 node_js:
   - '9'
   - '8'
-  - '7'
-  - '6'
 addons:
   apt:
     packages:

README.md

@@ -21,7 +21,7 @@ Create a production build with `elm-app build`
 
 ### Installation
 
-**Node >=6** is required for installation.
+**Node >=8** is required for installation.
 
 #### Yarn
 

appveyor.yml

@@ -3,6 +3,13 @@ image: Visual Studio 2017
 platform:
   - x64
 
+# Test against these versions of Node.js.
+environment:
+  matrix:
+  # node.js
+    - nodejs_version: "8"
+    - nodejs_version: "9"
+
 install:
   - ps: Install-Product node $env:nodejs_version $env:platform
 

bin/elm-app-cli.js

@@ -94,7 +94,7 @@ function help(version) {
  * Spawn separate node process with specified script
  *
  * @param  {string} script Path to script
- * @param  {Arrays} args   Script arguments
+ * @param  {Array} args   Script arguments
  * @return {undefined}
  */
 function spawnSyncNode(script, args) {

config/polyfills.js

@@ -0,0 +1,16 @@
+'use strict';
+
+if (typeof Promise === 'undefined') {
+  // Rejection tracking prevents a common issue where React gets into an
+  // inconsistent state due to an error, but it gets swallowed by a Promise,
+  // and the user has no idea what causes React's erratic future behavior.
+  require('promise/lib/rejection-tracking').enable();
+  window.Promise = require('promise/lib/es6-extensions.js');
+}
+
+// fetch() polyfill for making API calls.
+require('whatwg-fetch');
+
+// Object.assign() is commonly used with React.
+// It will use the native implementation if it's present and isn't buggy.
+Object.assign = require('object-assign');

config/webpack.config.dev.js

@@ -1,12 +1,11 @@
 'use strict';
 
-const path = require('path');
 const autoprefixer = require('autoprefixer');
-const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
-const DefinePlugin = require('webpack/lib/DefinePlugin');
-const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const path = require('path');
+const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const getClientEnvironment = require('./env');
 const paths = require('../config/paths');
 
@@ -20,10 +19,20 @@ const publicUrl = '';
 // Get environment variables to inject into our app.
 const env = getClientEnvironment(publicUrl);
 
+// This is the development configuration.
+// It is focused on developer experience and fast rebuilds.
+// The production configuration is different and lives in a separate file.
 module.exports = {
+  mode: 'development',
+  // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
+  // See the discussion in https://github.com/facebook/create-react-app/issues/343.
   devtool: 'cheap-module-source-map',
-
+  // These are the "entry points" to our application.
+  // This means they will be the "root" imports that are included in JS bundle.
+  // The first two entry points enable "hot" CSS and auto-refreshes for JS.
   entry: [
+    // We ship a few polyfills by default:
+    require.resolve('./polyfills'),
     // Include an alternative client for WebpackDevServer. A client's job is to
     // connect to WebpackDevServer by a socket and get notified about changes.
     // When you save a file, the client will either apply hot updates (in case
@@ -42,34 +51,44 @@ module.exports = {
 
     paths.appIndexJs
   ],
-
   output: {
+    // Add /* filename */ comments to generated require()s in the output.
     pathinfo: true,
-
-    // The build folder.
-    path: paths.appBuild,
-
     // This does not produce a real file. It's just the virtual path that is
     // served by WebpackDevServer in development. This is the JS bundle
     // containing code from all our entry points, and the Webpack runtime.
     filename: 'static/js/bundle.js',
-
+    // There are also additional JS chunk files if you use code splitting.
+    chunkFilename: 'static/js/[name].chunk.js',
+    // This is the URL that app is served from. We use "/" in development.
     publicPath: publicPath,
-
     // Point sourcemap entries to original disk location (format as URL on Windows)
     devtoolModuleFilenameTemplate: info =>
       path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')
   },
-
+  optimization: {
+    // Automatically split vendor and commons
+    // https://twitter.com/wSokra/status/969633336732905474
+    // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+    splitChunks: {
+      chunks: 'all',
+      name: 'vendors'
+    },
+    // Keep the runtime chunk seperated to enable long term caching
+    // https://twitter.com/wSokra/status/969679223278505985
+    runtimeChunk: true
+  },
   resolve: {
     modules: ['node_modules'],
     extensions: ['.js', '.elm']
   },
-
   module: {
     noParse: /\.elm$/,
-
+    strictExportPresence: true,
     rules: [
+      // Disable require.ensure as it's not a standard language feature.
+      { parser: { requireEnsure: false } },
+
       {
         test: /\.js$/,
         exclude: [/[/\\\\]elm-stuff[/\\\\]/, /[/\\\\]node_modules[/\\\\]/],
@@ -169,8 +188,9 @@ module.exports = {
       // "style" loader turns CSS into JS modules that inject <style> tags.
       // In production, we use a plugin to extract that CSS to a file, but
       // in development "style" loader enables hot editing of CSS.
+      // By default we support CSS Modules with the extension .module.css
       {
-        test: /\.css$/,
+        test: /\.css/,
         use: [
           require.resolve('style-loader'),
           {
@@ -180,17 +200,18 @@ module.exports = {
             }
           },
           {
+            // Options for PostCSS as we reference these options twice
+            // Adds vendor prefixing based on your specified browser support in
+            // package.json
             loader: require.resolve('postcss-loader'),
             options: {
-              ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+              // Necessary for external CSS imports to work
+              // https://github.com/facebook/create-react-app/issues/2677
+              ident: 'postcss',
               plugins: () => [
+                require('postcss-flexbugs-fixes'),
                 autoprefixer({
-                  browsers: [
-                    '>1%',
-                    'last 4 versions',
-                    'Firefox ESR',
-                    'not ie < 9'
-                  ]
+                  flexbox: 'no-2009'
                 })
               ]
             }
@@ -217,20 +238,26 @@ module.exports = {
       }
     ]
   },
-
   plugins: [
-    new DefinePlugin(env.stringified),
-
-    new InterpolateHtmlPlugin(env.raw),
-
+    // Generates an `index.html` file with the <script> injected.
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.appHtml
     }),
-
-    new HotModuleReplacementPlugin(),
-
-    new NamedModulesPlugin()
+    // Makes some environment variables available in index.html.
+    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    // In development, this will be an empty string.
+    new InterpolateHtmlPlugin(env.raw),
+    // Makes some environment variables available to the JS code, for example:
+    // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
+    new webpack.DefinePlugin(env.stringified),
+    // This is necessary to emit hot updates (currently CSS only):
+    new webpack.HotModuleReplacementPlugin(),
+    // Watcher doesn't work well if you mistype casing in a path so we use
+    // a plugin that prints an error when you attempt to do this.
+    // See https://github.com/facebook/create-react-app/issues/240
+    new CaseSensitivePathsPlugin()
   ],
 
   // Some libraries import Node modules but don't use them in the browser.
@@ -241,5 +268,8 @@ module.exports = {
     net: 'empty',
     tls: 'empty',
     child_process: 'empty'
-  }
+  },
+  // Turn off performance processing because we utilize
+  // our own hints via the FileSizeReporter
+  performance: false
 };