feat(webpack): replace optimize-css-assets-webpack-plugin with css-minimizer-webpack-plugin

This commit is contained in:
Clark Du 2020-08-19 18:37:04 +01:00 committed by pooya parsa
parent f6355ca65d
commit 2ee86286ad
3 changed files with 9 additions and 13 deletions

View File

@ -7,7 +7,6 @@ import type { Options as FileLoaderOptions } from 'file-loader'
import type { Options as HtmlMinifierOptions } from 'html-minifier'
import type * as Less from 'less'
import type { Options as SassOptions } from 'node-sass'
import type { Options as OptimizeCssAssetsWebpackPluginOptions } from 'optimize-css-assets-webpack-plugin'
import type { Plugin as PostcssPlugin } from 'postcss'
import type { Options as PugOptions } from 'pug'
import type { TerserPluginOptions } from 'terser-webpack-plugin'
@ -287,6 +286,7 @@ export default () => ({
runtimeChunk: 'single',
minimize: undefined as boolean | undefined,
minimizer: undefined,
cssMinimizer: undefined,
splitChunks: {
chunks: 'all',
name: undefined,
@ -296,8 +296,7 @@ export default () => ({
}
}
}
} as WebpackConfiguration['optimization'],
optimizeCSS: undefined as undefined | OptimizeCssAssetsWebpackPluginOptions | boolean,
} as WebpackConfiguration['optimization'] & { cssMinimizer: undefined | boolean | Record<string, any> },
/**
* Enable [thread-loader](https://github.com/webpack-contrib/thread-loader#thread-loader) in webpack building
*

View File

@ -345,9 +345,9 @@ function normalizeConfig (_options: CliConfiguration) {
options.build.optimization.minimize = !options.dev
}
// Enable optimizeCSS only when extractCSS is enabled
if (options.build.optimizeCSS === undefined) {
options.build.optimizeCSS = options.build.extractCSS ? {} : false
// Enable cssMinimizer only when extractCSS is enabled
if (options.build.optimization.cssMinimizer === undefined) {
options.build.optimization.cssMinimizer = options.build.extractCSS ? {} : false
}
const { loaders } = options.build

View File

@ -3,7 +3,7 @@ import querystring from 'querystring'
import webpack from 'webpack'
import HTMLPlugin from 'html-webpack-plugin'
import BundleAnalyzer from 'webpack-bundle-analyzer'
import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin'
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'
import FriendlyErrorsWebpackPlugin from '@nuxt/friendly-errors-webpack-plugin'
import CorsPlugin from '../plugins/vue/cors'
@ -89,13 +89,10 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
minimizer () {
const minimizer = super.minimizer()
const { optimizeCSS } = this.options.build
const { cssMinimizer } = this.options.build.optimization
// https://github.com/NMFR/optimize-css-assets-webpack-plugin
// https://github.com/webpack-contrib/mini-css-extract-plugin#minimizing-for-production
// TODO: Remove OptimizeCSSAssetsPlugin when upgrading to webpack 5
if (optimizeCSS) {
minimizer.push(new OptimizeCSSAssetsPlugin(Object.assign({}, optimizeCSS)))
if (cssMinimizer) {
minimizer.push(new CssMinimizerPlugin(Object.assign({}, cssMinimizer)))
}
return minimizer