Merge pull request #1007 from davidmehren/webpack-4

Webpack 4 refactor & docs

docs/dev/webpack.md

@@ -0,0 +1,26 @@
+# Webpack Docs
+## `webpack.common.js`
+This file contains all common definition for chunks and plugins, that are needed by the whole app.
+
+**TODO:** Document which entry points are used for what.
+
+## `webpack.htmlexport.js`
+Separate config for the "save as html" feature.
+Packs all CSS from `public/js/htmlExport.js` to `build/html.min.css`.
+This file is then downloaded by client-side JS and used to create the HTML.
+See `exportToHTML()` in `public/js/extra.js`.
+
+
+## `webpack.dev.js`
+The development config uses both common configs, enables development mode and enables "cheap" source maps (lines only).
+If you need more detailed source maps while developing, you might want to use the `source-maps` option.
+See https://webpack.js.org/configuration/devtool/ for details.
+
+## `webpack.prod.js`
+The production config uses both common configs and enables production mode.
+This automatically enables various optimizations (e.g. UglifyJS). See https://webpack.js.org/concepts/mode/ for details.
+
+For the global app config, the name of the emitted chunks is changed to include the content hash.
+See https://webpack.js.org/guides/caching/ on why this is a good idea.
+ 
+For the HTML export config, CSS minification is enabled.

package.json

@@ -8,8 +8,8 @@
     "test": "npm run-script standard && npm run-script jsonlint",
     "jsonlint": "find . -not -path './node_modules/*' -type f -name '*.json' -o -type f -name '*.json.example' | while read json; do echo $json ; jq . $json; done",
     "standard": "node ./node_modules/standard/bin/cmd.js",
-    "dev": "webpack --config webpack.config.js --mode=production --progress --colors --watch",
-    "build": "webpack --config webpack.production.js --progress --colors --bail",
+    "dev": "webpack --config webpack.dev.js --progress --colors --watch",
+    "build": "webpack --config webpack.prod.js --progress --colors --bail",
     "postinstall": "bin/heroku",
     "start": "node app.js",
     "doctoc": "doctoc --title='# Table of Contents' README.md"
@@ -188,6 +188,7 @@
     "url-loader": "^1.0.1",
     "webpack": "^4.14.0",
     "webpack-cli": "^3.1.0",
+    "webpack-merge": "^4.1.4",
     "webpack-parallel-uglify-plugin": "^1.1.0"
   },
   "standard": {

webpack.common.js

@@ -10,6 +10,7 @@ var gracefulFs = require('graceful-fs')
 gracefulFs.gracefulify(fs)
 
 module.exports = {
+  name: 'app',
   plugins: [
     new webpack.ProvidePlugin({
       Visibility: 'visibilityjs',

webpack.config.js

@@ -1,41 +0,0 @@
-var baseConfig = require('./webpackBaseConfig')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-var path = require('path')
-
-module.exports = [Object.assign({}, baseConfig, {
-  plugins: baseConfig.plugins.concat([
-    new MiniCssExtractPlugin({
-      filename: '[name].css',
-      chunkFilename: '[id].css'
-    })
-
-  ]),
-  devtool: 'source-map'
-}), {
-  devtool: 'source-map',
-  entry: {
-    htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
-  },
-  module: {
-    rules: [{
-      test: /\.css$/,
-      use: ['style-loader', 'css-loader']
-    }, {
-      test: /\.scss$/,
-      use: ['style-loader', 'sass-loader']
-    }, {
-      test: /\.less$/,
-      use: ['style-loader', 'less-loader']
-    }]
-  },
-  output: {
-    path: path.join(__dirname, 'public/build'),
-    publicPath: '/build/',
-    filename: '[name].js'
-  },
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: 'html.min.css'
-    })
-  ]
-}]

webpack.dev.js

@@ -0,0 +1,14 @@
+const common = require('./webpack.common.js')
+const htmlexport = require('./webpack.htmlexport')
+const merge = require('webpack-merge')
+
+module.exports = [
+  // merge common config
+  merge(common, {
+    mode: 'development',
+    devtool: 'cheap-module-eval-source-map'
+  }),
+  merge(htmlexport, {
+    mode: 'development',
+    devtool: 'cheap-module-eval-source-map'
+  })]

webpack.htmlexport.js

@@ -0,0 +1,25 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const path = require('path')
+
+module.exports = {
+  name: 'save-as-html',
+  entry: {
+    htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
+  },
+  module: {
+    rules: [{
+      test: /\.css$/,
+      use: [MiniCssExtractPlugin.loader, 'css-loader']
+    }]
+  },
+  output: {
+    path: path.join(__dirname, 'public/build'),
+    publicPath: '/build/',
+    filename: '[name].js'
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'html.min.css'
+    })
+  ]
+}

webpack.prod.js

@@ -0,0 +1,23 @@
+const common = require('./webpack.common.js')
+const htmlexport = require('./webpack.htmlexport')
+const merge = require('webpack-merge')
+const path = require('path')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+
+module.exports = [
+  merge(common, {
+    mode: 'production',
+    output: {
+      path: path.join(__dirname, 'public/build'),
+      publicPath: '/build/',
+      filename: '[name].[contenthash].js'
+    }
+  }),
+  merge(htmlexport, {
+    mode: 'production',
+    optimization: {
+      minimizer: [
+        new OptimizeCSSAssetsPlugin({})
+      ]
+    }
+  })]

webpack.production.js

@@ -1,75 +0,0 @@
-var baseConfig = require('./webpackBaseConfig')
-var webpack = require('webpack')
-var path = require('path')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-module.exports = [Object.assign({}, baseConfig, {
-  plugins: baseConfig.plugins.concat([
-    new webpack.DefinePlugin({
-      'process.env': {
-        'NODE_ENV': JSON.stringify('production')
-      }
-    })
-  ]),
-
-  optimization: {
-    minimizer: [
-      new UglifyJsPlugin({
-        parallel: true,
-        cache: true
-      })
-    ],
-    splitChunks: {
-      chunks: 'async',
-      minChunks: Infinity
-    }
-  },
-
-  output: {
-    path: path.join(__dirname, 'public/build'),
-    publicPath: '/build/',
-    filename: '[id].[name].[hash].js'
-    // baseUrl: '<%- url %>'
-  }
-}), {
-  // This Chunk is used in the 'save as html' feature.
-  // It is embedded in the html file and contains CSS for styling.
-
-  entry: {
-    htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
-  },
-
-  output: {
-    path: path.join(__dirname, 'public/build'),
-    publicPath: '/build/',
-    filename: '[name].js'
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        'NODE_ENV': JSON.stringify('production')
-      }
-    }),
-    new MiniCssExtractPlugin({
-      filename: 'html.min.css'
-    })
-  ],
-
-  optimization: {
-    minimizer: [
-      new OptimizeCSSAssetsPlugin({})
-    ]
-  },
-
-  module: {
-    rules: [{
-      test: /\.css$/,
-      use: [
-        MiniCssExtractPlugin.loader,
-        'css-loader'
-      ]
-    }]
-  }
-}]

yarn.lock

@@ -11168,6 +11168,13 @@ webpack-cli@^3.1.0:
     v8-compile-cache "^2.0.0"
     yargs "^12.0.1"
 
+webpack-merge@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.4.tgz#0fde38eabf2d5fd85251c24a5a8c48f8a3f4eb7b"
+  integrity sha512-TmSe1HZKeOPey3oy1Ov2iS3guIZjWvMT2BBJDzzT5jScHTjVC3mpjJofgueEzaEd6ibhxRDD6MIblDr8tzh8iQ==
+  dependencies:
+    lodash "^4.17.5"
+
 webpack-parallel-uglify-plugin@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/webpack-parallel-uglify-plugin/-/webpack-parallel-uglify-plugin-1.1.0.tgz#252a6c796bf79a8047b00de2cf08c23aa9861441"