更新css-loader

2020-09-02 14:00:01 +08:00
parent 868da542ab
commit 9fa0700f72
10 changed files with 127 additions and 187 deletions
@@ -2,62 +2,21 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const cssLoaderConfig = require('./css-loader.config')
 const chalk = require('chalk')

-// merge css-loader in development
-exports.mergeCSSLoaderDev = beforeLoader => {
-  const loader = [
-    // 这里匹配 `<style module>`
-    {
-      resourceQuery: /module/,
-      use: [
-        'vue-style-loader',
-        {
-          loader: 'css-loader',
-          options: Object.assign({
-            sourceMap: true,
-          }, cssLoaderConfig),
-        },
-        {
-          loader: 'postcss-loader',
-          options: {
-            sourceMap: true,
-          },
-        },
-      ],
-    },
-    // 这里匹配普通的 `<style>` 或 `<style scoped>`
-    {
-      use: [
-        'vue-style-loader',
-        {
-          loader: 'css-loader',
-          options: {
-            sourceMap: true,
-          },
-        },
-        {
-          loader: 'postcss-loader',
-          options: {
-            sourceMap: true,
-          },
-        },
-      ],
-    },
-  ]
-  if (beforeLoader) {
-    loader[0].use.push(beforeLoader)
-    loader[1].use.push(beforeLoader)
-  }
-  return loader
-}
+const isDev = process.env.NODE_ENV === 'development'

-// merge css-loader in production
-exports.mergeCSSLoaderProd = beforeLoader => {
+// merge css-loader
+exports.mergeCSSLoader = beforeLoader => {
  const loader = [
    // 这里匹配 `<style module>`
    {
      resourceQuery: /module/,
      use: [
-        MiniCssExtractPlugin.loader,
+        {
+          loader: MiniCssExtractPlugin.loader,
+          options: {
+            hmr: isDev,
+          },
+        },
        {
          loader: 'css-loader',
          options: cssLoaderConfig,
@@ -68,7 +27,12 @@ exports.mergeCSSLoaderProd = beforeLoader => {
    // 这里匹配普通的 `<style>` 或 `<style scoped>`
    {
      use: [
-        MiniCssExtractPlugin.loader,
+        {
+          loader: MiniCssExtractPlugin.loader,
+          options: {
+            hmr: isDev,
+          },
+        },
        'css-loader',
        'postcss-loader',
      ],