feat: migrate to mini-css-extract-plugin

lib/builder/webpack/base.config.mjs

@@ -1,6 +1,6 @@
 import path from 'path'
 
-import ExtractTextPlugin from 'extract-text-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import FriendlyErrorsWebpackPlugin from '@nuxtjs/friendly-errors-webpack-plugin'
 import TimeFixPlugin from 'time-fix-plugin'
 import webpack from 'webpack'
@@ -164,17 +164,9 @@ export default function webpackBaseConfig({ name, isServer }) {
 
   // CSS extraction
   const extractCSS = this.options.build.extractCSS
-  // TODO: Temporary disabled in dev mode for fixing source maps
-  // (We need `source-map` devtool for *.css modules)
   if (extractCSS && !this.options.dev) {
-    config.plugins.push(new ExtractTextPlugin(Object.assign({
+    config.plugins.push(new MiniCssExtractPlugin(Object.assign({
       filename: this.getFileName('css')
-
-      // When using optimization.splitChunks and there are
-      // extracted chunks in the commons chunk,
-      // allChunks *must* be set to true
-      // TODO: For nuxt this makes duplicate css assets!
-      // allChunks: true
     }, typeof extractCSS === 'object' ? extractCSS : {})))
   }
 

lib/builder/webpack/style-loader.js

@@ -1,6 +1,6 @@
 import path from 'path'
 
-import ExtractTextPlugin from 'extract-text-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 
 import postcssConfig from './postcss'
 
@@ -15,13 +15,6 @@ export default function styleLoader(ext, loaders = [], isVueLoader = false) {
     )
   )
 
-  // Prepare vue-style-loader
-  // https://github.com/vuejs/vue-style-loader
-  const vueStyleLoader = {
-    loader: 'vue-style-loader',
-    options: { sourceMap }
-  }
-
   // -- Configure additional loaders --
 
   // style-resources-loader
@@ -73,26 +66,23 @@ export default function styleLoader(ext, loaders = [], isVueLoader = false) {
   })
 
   // -- With extractCSS --
-  // TODO: Temporary disabled in dev mode for fixing source maps
+  if (this.options.build.extractCSS) {
-  // (We need `source-map` devtool for *.css modules)
+    loaders.unshift(MiniCssExtractPlugin.loader)
-  if (this.options.build.extractCSS && !this.options.dev) {
+    if (this.options.dev) {
-    // ExtractTextPlugin
+      // css-hot-loader
-    // https://github.com/webpack-contrib/extract-text-webpack-plugin
+      // https://github.com/shepherdwind/css-hot-loader
-    const extractLoader = ExtractTextPlugin.extract({
+      loaders.unshift({
-      use: loaders,
+        loader: 'css-hot-loader',
-      fallback: vueStyleLoader
+        options: { sourceMap }
-    })
+      })
-
-    // css-hot-loader
-    // https://github.com/shepherdwind/css-hot-loader
-    const hotLoader = {
-      loader: 'css-hot-loader',
-      options: { sourceMap }
     }
-
+  } else {
-    return this.options.dev ? [hotLoader].concat(extractLoader) : extractLoader
+    // Prepare vue-style-loader
+    // https://github.com/vuejs/vue-style-loader
+    loaders.unshift({
+      loader: 'vue-style-loader',
+      options: { sourceMap }
+    })
   }
-
+  return loaders
-  // -- Without extractCSS --
-  return [vueStyleLoader].concat(loaders)
 }

lib/builder/webpack/vue-loader.mjs

@@ -5,7 +5,6 @@ export default function vueLoader({ isServer }) {
   // https://vue-loader.vuejs.org/en
   const config = {
     postcss: postcssConfig.call(this),
-    extractCSS: !!this.options.build.extractCSS,
     cssSourceMap: this.options.build.cssSourceMap,
     preserveWhitespace: false,
     loaders: {

lib/common/nuxt.config.js

@@ -37,7 +37,9 @@ export default {
     filenames: {
       app: '[name].[chunkhash].js',
       chunk: '[name].[chunkhash].js',
-      css: '[name].[contenthash].css'
+      // TODO: Use [name].[contenthash].css when webpack core supports [contenthash]
+      // https://github.com/webpack-contrib/mini-css-extract-plugin/pull/30#issuecomment-374700690
+      css: '[name].[chunkhash].css'
     },
     styleResources: {},
     plugins: [],

package.json

@@ -72,7 +72,6 @@
     "es6-promise": "^4.2.4",
     "esm": "^3.0.6",
     "etag": "^1.8.1",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^1.1.11",
     "fresh": "^0.5.2",
     "fs-extra": "^5.0.0",
@@ -86,6 +85,7 @@
     "lodash": "^4.17.5",
     "lru-cache": "^4.1.2",
     "memory-fs": "^0.4.1",
+    "mini-css-extract-plugin": "^0.2.0",
     "minimist": "^1.2.0",
     "opencollective": "^1.0.3",
     "ora": "^2.0.0",

yarn.lock

@@ -385,7 +385,7 @@ async@^1.4.0:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.1.4, async@^2.4.1:
+async@^2.1.4:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
   dependencies:
@@ -2686,15 +2686,6 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-extract-text-webpack-plugin@^4.0.0-beta.0:
-  version "4.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-4.0.0-beta.0.tgz#f7361d7ff430b42961f8d1321ba8c1757b5d4c42"
-  dependencies:
-    async "^2.4.1"
-    loader-utils "^1.1.0"
-    schema-utils "^0.4.5"
-    webpack-sources "^1.1.0"
-
 extract-zip@^1.6.5:
   version "1.6.6"
   resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.6.6.tgz#1290ede8d20d0872b429fd3f351ca128ec5ef85c"
@@ -4619,6 +4610,13 @@ mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
 
+mini-css-extract-plugin@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.2.0.tgz#7a16b0e1096c86de8e4d1c3b063aa1aeae88d41d"
+  dependencies:
+    loader-utils "^1.1.0"
+    webpack-sources "^1.1.0"
+
 minimalistic-assert@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"