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 { Options as HtmlMinifierOptions } from 'html-minifier'
import type * as Less from 'less' import type * as Less from 'less'
import type { Options as SassOptions } from 'node-sass' 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 { Plugin as PostcssPlugin } from 'postcss'
import type { Options as PugOptions } from 'pug' import type { Options as PugOptions } from 'pug'
import type { TerserPluginOptions } from 'terser-webpack-plugin' import type { TerserPluginOptions } from 'terser-webpack-plugin'
@ -287,6 +286,7 @@ export default () => ({
runtimeChunk: 'single', runtimeChunk: 'single',
minimize: undefined as boolean | undefined, minimize: undefined as boolean | undefined,
minimizer: undefined, minimizer: undefined,
cssMinimizer: undefined,
splitChunks: { splitChunks: {
chunks: 'all', chunks: 'all',
name: undefined, name: undefined,
@ -296,8 +296,7 @@ export default () => ({
} }
} }
} }
} as WebpackConfiguration['optimization'], } as WebpackConfiguration['optimization'] & { cssMinimizer: undefined | boolean | Record<string, any> },
optimizeCSS: undefined as undefined | OptimizeCssAssetsWebpackPluginOptions | boolean,
/** /**
* Enable [thread-loader](https://github.com/webpack-contrib/thread-loader#thread-loader) in webpack building * 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 options.build.optimization.minimize = !options.dev
} }
// Enable optimizeCSS only when extractCSS is enabled // Enable cssMinimizer only when extractCSS is enabled
if (options.build.optimizeCSS === undefined) { if (options.build.optimization.cssMinimizer === undefined) {
options.build.optimizeCSS = options.build.extractCSS ? {} : false options.build.optimization.cssMinimizer = options.build.extractCSS ? {} : false
} }
const { loaders } = options.build const { loaders } = options.build

View File

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