webpack: Switch to css-minimizer-webpack-plugin.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg
2021-03-17 15:36:20 -07:00
committed by Anders Kaseorg
parent 2ce24bcd2b
commit 6bc3b267e1
4 changed files with 59 additions and 68 deletions

View File

@@ -2,10 +2,9 @@
import path from "path";
import CleanCss from "clean-css";
import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import OptimizeCssAssetsPlugin from "optimize-css-assets-webpack-plugin";
import TerserPlugin from "terser-webpack-plugin";
import webpack from "webpack";
import BundleTracker from "webpack-bundle-tracker";
@@ -187,39 +186,23 @@ export default (_env: unknown, argv: {mode?: string}): webpack.Configuration[] =
devtool: production ? "source-map" : "cheap-module-source-map",
optimization: {
minimizer: [
// Based on a comment in NMFR/optimize-css-assets-webpack-plugin#10.
// Can be simplified when NMFR/optimize-css-assets-webpack-plugin#87
// is fixed.
new OptimizeCssAssetsPlugin({
cssProcessor: {
async process(css, options: any) {
const filename = path.basename(options.to);
const result = await new CleanCss(options).minify({
[filename]: {
styles: css,
sourceMap: options.map.prev,
},
});
for (const warning of result.warnings) {
console.warn(warning);
}
return {
css: result.styles + `\n/*# sourceMappingURL=${filename}.map */`,
map: result.sourceMap,
};
},
},
cssProcessorOptions: {
map: {},
returnPromise: true,
sourceMap: true,
sourceMapInlineSources: true,
new CssMinimizerPlugin({
sourceMap: true,
minify: (data: Record<string, string>, sourceMap) => {
// css-minimizer-webpack-plugin needs this require
// inside the function.
// eslint-disable-next-line @typescript-eslint/consistent-type-imports, @typescript-eslint/no-var-requires
const CleanCSS: typeof import("clean-css") = require("clean-css");
const [[filename, styles]] = Object.entries(data);
const out = new CleanCSS({sourceMap: true}).minify({
[filename]: {styles, sourceMap},
});
return {css: out.styles, map: out.sourceMap, warnings: out.warnings};
},
}),
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true,
}),
],
splitChunks: {