更新css-loader

build-config/css-loader.config.js

@@ -3,6 +3,6 @@ const isDev = process.env.NODE_ENV === 'development'
 module.exports = {
   modules: {
     localIdentName: isDev ? '[folder]-[name]--[local]--[hash:base64:5]' : '[hash:base64:5]',
+    exportLocalsConvention: 'camelCase',
   },
-  localsConvention: 'camelCase',
 }

build-config/renderer-lyric/webpack.config.base.js

@@ -1,9 +1,12 @@
 const path = require('path')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const HTMLPlugin = require('html-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 const vueLoaderConfig = require('../vue-loader.config')
+const { mergeCSSLoader } = require('../utils')
 
+const isDev = process.env.NODE_ENV === 'development'
 
 module.exports = {
   target: 'electron-renderer',
@@ -46,6 +49,28 @@ module.exports = {
         loader: 'babel-loader',
         exclude: /node_modules/,
       },
+      {
+        test: /\.css$/,
+        oneOf: mergeCSSLoader(),
+      },
+      {
+        test: /\.less$/,
+        oneOf: mergeCSSLoader({
+          loader: 'less-loader',
+          options: {
+            sourceMap: true,
+          },
+        }),
+      },
+      {
+        test: /\.styl(:?us)?$/,
+        oneOf: mergeCSSLoader({
+          loader: 'stylus-loader',
+          options: {
+            sourceMap: true,
+          },
+        }),
+      },
       {
         test: /\.pug$/,
         oneOf: [
@@ -98,5 +123,11 @@ module.exports = {
       __dirname,
     }),
     new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: isDev ? '[name].css' : '[name].[contenthash:8].css',
+      chunkFilename: isDev ? '[id].css' : '[id].[contenthash:8].css',
+    }),
   ],
 }

build-config/renderer-lyric/webpack.config.dev.js

@@ -6,37 +6,9 @@ const { merge } = require('webpack-merge')
 
 const baseConfig = require('./webpack.config.base')
 
-const { mergeCSSLoaderDev } = require('../utils')
-
 module.exports = merge(baseConfig, {
   mode: 'development',
   devtool: 'eval-source-map',
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        oneOf: mergeCSSLoaderDev(),
-      },
-      {
-        test: /\.less$/,
-        oneOf: mergeCSSLoaderDev({
-          loader: 'less-loader',
-          options: {
-            sourceMap: true,
-          },
-        }),
-      },
-      {
-        test: /\.styl(:?us)?$/,
-        oneOf: mergeCSSLoaderDev({
-          loader: 'stylus-loader',
-          options: {
-            sourceMap: true,
-          },
-        }),
-      },
-    ],
-  },
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),

build-config/renderer-lyric/webpack.config.prod.js

@@ -1,6 +1,5 @@
 const path = require('path')
 const webpack = require('webpack')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
@@ -8,7 +7,6 @@ const { merge } = require('webpack-merge')
 
 const baseConfig = require('./webpack.config.base')
 
-const { mergeCSSLoaderProd } = require('../utils')
 const { dependencies } = require('../../package.json')
 
 let whiteListedModules = ['vue']
@@ -20,32 +18,6 @@ module.exports = merge(baseConfig, {
   externals: [
     ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d)),
   ],
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        oneOf: mergeCSSLoaderProd(),
-      },
-      {
-        test: /\.less$/,
-        oneOf: mergeCSSLoaderProd({
-          loader: 'less-loader',
-          options: {
-            sourceMap: true,
-          },
-        }),
-      },
-      {
-        test: /\.styl(:?us)?$/,
-        oneOf: mergeCSSLoaderProd({
-          loader: 'stylus-loader',
-          options: {
-            sourceMap: true,
-          },
-        }),
-      },
-    ],
-  },
   plugins: [
     new CopyWebpackPlugin({
       patterns: [
@@ -60,9 +32,6 @@ module.exports = merge(baseConfig, {
         NODE_ENV: '"production"',
       },
     }),
-    new MiniCssExtractPlugin({
-      filename: '[name].css',
-    }),
     new webpack.NamedChunksPlugin(),
   ],
   optimization: {

build-config/renderer/webpack.config.base.js

@@ -1,9 +1,12 @@
 const path = require('path')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const HTMLPlugin = require('html-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 const vueLoaderConfig = require('../vue-loader.config')
+const { mergeCSSLoader } = require('../utils')
 
+const isDev = process.env.NODE_ENV === 'development'
 
 module.exports = {
   target: 'electron-renderer',
@@ -46,6 +49,28 @@ module.exports = {
         loader: 'babel-loader',
         exclude: /node_modules/,
       },
+      {
+        test: /\.css$/,
+        oneOf: mergeCSSLoader(),
+      },
+      {
+        test: /\.less$/,
+        oneOf: mergeCSSLoader({
+          loader: 'less-loader',
+          options: {
+            sourceMap: true,
+          },
+        }),
+      },
+      {
+        test: /\.styl(:?us)?$/,
+        oneOf: mergeCSSLoader({
+          loader: 'stylus-loader',
+          options: {
+            sourceMap: true,
+          },
+        }),
+      },
       {
         test: /\.pug$/,
         oneOf: [
@@ -98,5 +123,11 @@ module.exports = {
       __dirname,
     }),
     new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: isDev ? '[name].css' : '[name].[contenthash:8].css',
+      chunkFilename: isDev ? '[id].css' : '[id].[contenthash:8].css',
+    }),
   ],
 }

build-config/renderer/webpack.config.dev.js

@@ -6,37 +6,9 @@ const { merge } = require('webpack-merge')
 
 const baseConfig = require('./webpack.config.base')
 
-const { mergeCSSLoaderDev } = require('../utils')
-
 module.exports = merge(baseConfig, {
   mode: 'development',
   devtool: 'eval-source-map',
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        oneOf: mergeCSSLoaderDev(),
-      },
-      {
-        test: /\.less$/,
-        oneOf: mergeCSSLoaderDev({
-          loader: 'less-loader',
-          options: {
-            sourceMap: true,
-          },
-        }),
-      },
-      {
-        test: /\.styl(:?us)?$/,
-        oneOf: mergeCSSLoaderDev({
-          loader: 'stylus-loader',
-          options: {
-            sourceMap: true,
-          },
-        }),
-      },
-    ],
-  },
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),

build-config/renderer/webpack.config.prod.js

@@ -1,6 +1,5 @@
 const path = require('path')
 const webpack = require('webpack')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
@@ -8,7 +7,6 @@ const { merge } = require('webpack-merge')
 
 const baseConfig = require('./webpack.config.base')
 
-const { mergeCSSLoaderProd } = require('../utils')
 const { dependencies } = require('../../package.json')
 
 let whiteListedModules = ['vue']
@@ -20,32 +18,6 @@ module.exports = merge(baseConfig, {
   externals: [
     ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d)),
   ],
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        oneOf: mergeCSSLoaderProd(),
-      },
-      {
-        test: /\.less$/,
-        oneOf: mergeCSSLoaderProd({
-          loader: 'less-loader',
-          options: {
-            sourceMap: true,
-          },
-        }),
-      },
-      {
-        test: /\.styl(:?us)?$/,
-        oneOf: mergeCSSLoaderProd({
-          loader: 'stylus-loader',
-          options: {
-            sourceMap: true,
-          },
-        }),
-      },
-    ],
-  },
   plugins: [
     new CopyWebpackPlugin({
       patterns: [
@@ -60,9 +32,6 @@ module.exports = merge(baseConfig, {
         NODE_ENV: '"production"',
       },
     }),
-    new MiniCssExtractPlugin({
-      filename: '[name].css',
-    }),
     new webpack.NamedChunksPlugin(),
   ],
   optimization: {

build-config/utils.js

@@ -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',
       ],