From 9a2dcd40d37c01896deeae0c8059564b4bdd6dc1 Mon Sep 17 00:00:00 2001 From: David Mehren Date: Mon, 8 Oct 2018 10:05:13 +0200 Subject: [PATCH 1/4] Rename Webpack config to official recommendation Signed-off-by: David Mehren --- package.json | 4 ++-- webpackBaseConfig.js => webpack.common.js | 0 webpack.config.js => webpack.dev.js | 2 +- webpack.production.js => webpack.prod.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) rename webpackBaseConfig.js => webpack.common.js (100%) rename webpack.config.js => webpack.dev.js (94%) rename webpack.production.js => webpack.prod.js (97%) diff --git a/package.json b/package.json index 08e39b2..44e2244 100644 --- a/package.json +++ b/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" diff --git a/webpackBaseConfig.js b/webpack.common.js similarity index 100% rename from webpackBaseConfig.js rename to webpack.common.js diff --git a/webpack.config.js b/webpack.dev.js similarity index 94% rename from webpack.config.js rename to webpack.dev.js index 3c7c727..d0d1a42 100644 --- a/webpack.config.js +++ b/webpack.dev.js @@ -1,4 +1,4 @@ -var baseConfig = require('./webpackBaseConfig') +var baseConfig = require('./webpack.common') const MiniCssExtractPlugin = require('mini-css-extract-plugin') var path = require('path') diff --git a/webpack.production.js b/webpack.prod.js similarity index 97% rename from webpack.production.js rename to webpack.prod.js index 6738758..f3c7dad 100644 --- a/webpack.production.js +++ b/webpack.prod.js @@ -1,4 +1,4 @@ -var baseConfig = require('./webpackBaseConfig') +var baseConfig = require('./webpack.common') var webpack = require('webpack') var path = require('path') const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') From 9f92bba036860c61277d252a39a5417f67231bc1 Mon Sep 17 00:00:00 2001 From: David Mehren Date: Wed, 10 Oct 2018 21:54:27 +0200 Subject: [PATCH 2/4] Use webpack-merge. Move html export config to own file. Delete unnecessary config options. Use cheap source maps. Signed-off-by: David Mehren --- package.json | 1 + webpack.common.js | 1 + webpack.dev.js | 53 +++++++------------------ webpack.htmlexport.js | 25 ++++++++++++ webpack.prod.js | 90 +++++++++---------------------------------- 5 files changed, 59 insertions(+), 111 deletions(-) create mode 100644 webpack.htmlexport.js diff --git a/package.json b/package.json index 44e2244..3aa28fa 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/webpack.common.js b/webpack.common.js index 8df19b7..377992b 100644 --- a/webpack.common.js +++ b/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', diff --git a/webpack.dev.js b/webpack.dev.js index d0d1a42..b1ed361 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -1,41 +1,14 @@ -var baseConfig = require('./webpack.common') -const MiniCssExtractPlugin = require('mini-css-extract-plugin') -var path = require('path') +const common = require('./webpack.common.js') +const htmlexport = require('./webpack.htmlexport') +const merge = require('webpack-merge') -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' - }) - ] -}] +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' + })] diff --git a/webpack.htmlexport.js b/webpack.htmlexport.js new file mode 100644 index 0000000..dd6f4c0 --- /dev/null +++ b/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' + }) + ] +} diff --git a/webpack.prod.js b/webpack.prod.js index f3c7dad..188d988 100644 --- a/webpack.prod.js +++ b/webpack.prod.js @@ -1,75 +1,23 @@ -var baseConfig = require('./webpack.common') -var webpack = require('webpack') -var path = require('path') +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') -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 +module.exports = [ + merge(common, { + mode: 'production', + output: { + path: path.join(__dirname, 'public/build'), + publicPath: '/build/', + filename: '[name].[contenthash].js' } - }, - - 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' + }), + merge(htmlexport, { + mode: 'production', + optimization: { + minimizer: [ + new OptimizeCSSAssetsPlugin({}) ] - }] - } -}] + } + })] From ea027c9b19f6fae323b96d042d1b25ad7623ad56 Mon Sep 17 00:00:00 2001 From: David Mehren Date: Wed, 10 Oct 2018 21:54:41 +0200 Subject: [PATCH 3/4] Add dev-docs for webpack. Signed-off-by: David Mehren --- docs/dev/webpack.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 docs/dev/webpack.md diff --git a/docs/dev/webpack.md b/docs/dev/webpack.md new file mode 100644 index 0000000..7b391f3 --- /dev/null +++ b/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. From 7eed584c0197d0b5a93f58f8b645c0b84588d8e1 Mon Sep 17 00:00:00 2001 From: David Mehren Date: Wed, 10 Oct 2018 22:01:32 +0200 Subject: [PATCH 4/4] Update yarn.lock Signed-off-by: David Mehren --- yarn.lock | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/yarn.lock b/yarn.lock index ef1be26..838f53f 100644 --- a/yarn.lock +++ b/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"