diff options
| -rw-r--r-- | docs/dev/webpack.md | 26 | ||||
| -rw-r--r-- | package.json | 5 | ||||
| -rw-r--r-- | webpack.common.js (renamed from webpackBaseConfig.js) | 1 | ||||
| -rw-r--r-- | webpack.config.js | 41 | ||||
| -rw-r--r-- | webpack.dev.js | 14 | ||||
| -rw-r--r-- | webpack.htmlexport.js | 25 | ||||
| -rw-r--r-- | webpack.prod.js | 23 | ||||
| -rw-r--r-- | webpack.production.js | 75 | ||||
| -rw-r--r-- | yarn.lock | 7 |
9 files changed, 99 insertions, 118 deletions
diff --git a/docs/dev/webpack.md b/docs/dev/webpack.md new file mode 100644 index 00000000..7b391f3a --- /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. diff --git a/package.json b/package.json index 08e39b26..3aa28fad 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" @@ -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/webpackBaseConfig.js b/webpack.common.js index 8df19b71..377992b3 100644 --- a/webpackBaseConfig.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.config.js b/webpack.config.js deleted file mode 100644 index 3c7c727e..00000000 --- a/webpack.config.js +++ /dev/null @@ -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' - }) - ] -}] diff --git a/webpack.dev.js b/webpack.dev.js new file mode 100644 index 00000000..b1ed3612 --- /dev/null +++ b/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' + })] diff --git a/webpack.htmlexport.js b/webpack.htmlexport.js new file mode 100644 index 00000000..dd6f4c01 --- /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 new file mode 100644 index 00000000..188d9881 --- /dev/null +++ b/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({}) + ] + } + })] diff --git a/webpack.production.js b/webpack.production.js deleted file mode 100644 index 67387583..00000000 --- a/webpack.production.js +++ /dev/null @@ -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' - ] - }] - } -}] @@ -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" |