Minimize CSS in production builds

Use optimize-css-assets-webpack-plugin for that. terser-webpack-plugin
was already being used by default, but explicitly import it as our
webpack config now references it directly.

https://webpack.js.org/plugins/mini-css-extract-plugin/#minimizing-for-production

Ported from cockpit-podman commit 3caf54fbfe2.
This commit is contained in:
Martin Pitt 2020-12-17 07:28:28 +01:00 committed by Matej Marusak
parent b9616257c2
commit 6b8611caab
2 changed files with 10 additions and 0 deletions

View file

@ -36,11 +36,13 @@
"htmlparser": "^1.7.7",
"jed": "^1.1.1",
"mini-css-extract-plugin": "^0.11.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"po2json": "^1.0.0-alpha",
"qunit": "^2.9.3",
"sizzle": "^2.3.3",
"stdio": "^2.1.0",
"string-replace-loader": "^2.3.0",
"terser-webpack-plugin": "^2.0.1",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.5"
},

View file

@ -2,6 +2,8 @@ const path = require("path");
const childProcess = require('child_process');
const copy = require("copy-webpack-plugin");
const extract = require("mini-css-extract-plugin");
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const webpack = require("webpack");
const CompressionPlugin = require("compression-webpack-plugin");
@ -77,6 +79,12 @@ module.exports = {
// cockpit.js gets included via <script>, everything else should be bundled
externals: { "cockpit": "cockpit" },
devtool: "source-map",
optimization: {
minimize: production,
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
module: {
rules: [
{