Merge pull request #1007 from davidmehren/webpack-4

Webpack 4 refactor & docs

Author: SISheogorath

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": {

webpackBaseConfig.js renamed to 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

@@ -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.dev.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.htmlexport.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.prod.js

@@ -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"