From 669ffa51ed3b7b1e5c762732e581dba7a6137fcb Mon Sep 17 00:00:00 2001 From: "Xin Du (Clark)" Date: Sun, 9 Dec 2018 10:28:08 +0000 Subject: [PATCH] refactor: migrate to extract-css-chunks-webpack-plugin (#4495) fixes #4131. --- packages/config/src/options.js | 5 -- packages/webpack/package.json | 2 +- packages/webpack/src/config/base.js | 15 +++--- packages/webpack/src/utils/style-loader.js | 4 +- yarn.lock | 54 ++++++++++++++++++---- 5 files changed, 55 insertions(+), 25 deletions(-) diff --git a/packages/config/src/options.js b/packages/config/src/options.js index 2e1416b436..e43884b424 100644 --- a/packages/config/src/options.js +++ b/packages/config/src/options.js @@ -281,11 +281,6 @@ export function getNuxtConfig(_options) { consola.warn('build.extractCSS.allChunks has no effect from v2.0.0. Please use build.optimization.splitChunks settings instead.') } - // TODO: remove when mini-css-extract-plugin supports HMR - if (options.dev) { - options.build.extractCSS = false - } - // Enable minimize for production builds if (options.build.optimization.minimize === undefined) { options.build.optimization.minimize = !options.dev diff --git a/packages/webpack/package.json b/packages/webpack/package.json index 0e47b61d56..d0c1cde2fc 100644 --- a/packages/webpack/package.json +++ b/packages/webpack/package.json @@ -20,13 +20,13 @@ "consola": "^2.3.0", "css-loader": "^2.0.0", "cssnano": "^4.1.7", + "extract-css-chunks-webpack-plugin": "^3.2.1", "file-loader": "^2.0.0", "fs-extra": "^7.0.1", "glob": "^7.1.3", "hash-sum": "^1.0.2", "html-webpack-plugin": "^3.2.0", "memory-fs": "^0.4.1", - "mini-css-extract-plugin": "^0.5.0", "optimize-css-assets-webpack-plugin": "^5.0.1", "pify": "^4.0.1", "postcss": "^7.0.6", diff --git a/packages/webpack/src/config/base.js b/packages/webpack/src/config/base.js index c65d64a74d..debfdee945 100644 --- a/packages/webpack/src/config/base.js +++ b/packages/webpack/src/config/base.js @@ -5,7 +5,7 @@ import clone from 'lodash/clone' import cloneDeep from 'lodash/cloneDeep' import escapeRegExp from 'lodash/escapeRegExp' import VueLoader from 'vue-loader' -import MiniCssExtractPlugin from 'mini-css-extract-plugin' +import ExtractCssChunks from 'extract-css-chunks-webpack-plugin' import TerserWebpackPlugin from 'terser-webpack-plugin' import WebpackBar from 'webpackbar' import env from 'std-env' @@ -342,14 +342,13 @@ export default class WebpackBaseConfig { } })) - // CSS extraction - // MiniCssExtractPlugin does not currently supports SSR - // https://github.com/webpack-contrib/mini-css-extract-plugin/issues/48 - // So we use css-loader/locals as a fallback (utils/style-loader) - if (this.options.build.extractCSS && !this.isServer) { - plugins.push(new MiniCssExtractPlugin(Object.assign({ + // CSS extraction) + if (this.options.build.extractCSS) { + plugins.push(new ExtractCssChunks(Object.assign({ filename: this.getFileName('css'), - chunkFilename: this.getFileName('css') + chunkFilename: this.getFileName('css'), + // TODO: https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues/132 + reloadAll: true }, this.options.build.extractCSS))) } diff --git a/packages/webpack/src/utils/style-loader.js b/packages/webpack/src/utils/style-loader.js index 105264079b..76fd68359c 100644 --- a/packages/webpack/src/utils/style-loader.js +++ b/packages/webpack/src/utils/style-loader.js @@ -1,5 +1,5 @@ import path from 'path' -import MiniCssExtractPlugin from 'mini-css-extract-plugin' +import ExtractCssChunks from 'extract-css-chunks-webpack-plugin' import { wrapArray } from '@nuxt/common' @@ -83,7 +83,7 @@ export default class StyleLoader { extract() { if (this.extractCSS && !this.isServer) { - return MiniCssExtractPlugin.loader + return ExtractCssChunks.loader } } diff --git a/yarn.lock b/yarn.lock index 132d13f248..e8ac465189 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4446,6 +4446,16 @@ extglob@^2.0.4: snapdragon "^0.8.1" to-regex "^3.0.1" +extract-css-chunks-webpack-plugin@^3.2.1: + version "3.2.1" + resolved "https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-3.2.1.tgz#d8ee9cacbfe6339522fced41efc7976f4f77243a" + integrity sha512-6ev0KuxCrffDLjycjG46OcVyCGZNfL+M7MySWHW/1M/wRCV/DTZnNAnWa8f7ti/kU4OnkyTfv8geAUWutAjd3w== + dependencies: + loader-utils "^1.1.0" + lodash "^4.17.5" + normalize-url "^1.9.1" + webpack-sources "^1.1.0" + extract-from-css@^0.4.4: version "0.4.4" resolved "https://registry.npmjs.org/extract-from-css/-/extract-from-css-0.4.4.tgz#1ea7df2e7c7c6eb9922fa08e8adaea486f6f8f92" @@ -7088,15 +7098,6 @@ mimic-fn@^1.0.0: resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022" integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ== -mini-css-extract-plugin@^0.5.0: - version "0.5.0" - resolved "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz#ac0059b02b9692515a637115b0cc9fed3a35c7b0" - integrity sha512-IuaLjruM0vMKhUUT51fQdQzBYTX49dLj8w68ALEAe2A4iYNpIC4eMac67mt3NzycvjOlf07/kYxJDc0RTl1Wqw== - dependencies: - loader-utils "^1.1.0" - schema-utils "^1.0.0" - webpack-sources "^1.1.0" - minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7" @@ -7442,6 +7443,16 @@ normalize-range@^0.1.2: resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI= +normalize-url@^1.9.1: + version "1.9.1" + resolved "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c" + integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw= + dependencies: + object-assign "^4.0.1" + prepend-http "^1.0.0" + query-string "^4.1.0" + sort-keys "^1.0.0" + normalize-url@^3.0.0: version "3.3.0" resolved "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559" @@ -8751,6 +8762,11 @@ prelude-ls@~1.1.2: resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ= +prepend-http@^1.0.0: + version "1.0.4" + resolved "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" + integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= + preserve@^0.2.0: version "0.2.0" resolved "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" @@ -9070,6 +9086,14 @@ qs@6.5.2, qs@~6.5.2: resolved "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA== +query-string@^4.1.0: + version "4.3.4" + resolved "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb" + integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s= + dependencies: + object-assign "^4.1.0" + strict-uri-encode "^1.0.0" + querystring-es3@^0.2.0: version "0.2.1" resolved "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" @@ -9970,6 +9994,13 @@ socks@~2.2.0: ip "^1.1.5" smart-buffer "^4.0.1" +sort-keys@^1.0.0: + version "1.1.2" + resolved "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad" + integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0= + dependencies: + is-plain-obj "^1.0.0" + sort-keys@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128" @@ -10207,6 +10238,11 @@ stream-shift@^1.0.0: resolved "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952" integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI= +strict-uri-encode@^1.0.0: + version "1.1.0" + resolved "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" + integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM= + string-length@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"