From 7315bddd9ee9f602aea7abffa5442518942310f2 Mon Sep 17 00:00:00 2001
From: leoswing <1160922634@qq.com>
Date: Thu, 9 Apr 2020 15:14:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(taro-webpack-runner):=20add=20miniCssExtra?=
 =?UTF-8?q?ctLoaderOption=20suppo=E2=80=A6=20(#5922)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(taro-webpack-runner): add miniCssExtractLoaderOption support for mini-css-extract-plugin

* fix: fix test case when using getModule method

Co-authored-by: liangxufei <liangxufei@mucfc.com>
---
 docs/config-detail.md                           | 17 +++++++++++++++++
 .../src/__tests__/index-test.ts                 |  1 +
 .../taro-webpack-runner/src/config/dev.conf.ts  |  2 ++
 .../taro-webpack-runner/src/config/prod.conf.ts |  2 ++
 packages/taro-webpack-runner/src/util/chain.ts  |  8 +++++---
 packages/taro-webpack-runner/src/util/types.ts  |  1 +
 6 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/docs/config-detail.md b/docs/config-detail.md
index f6e44c238918..012b7b717a7c 100644
--- a/docs/config-detail.md
+++ b/docs/config-detail.md
@@ -610,6 +610,23 @@ stylus-loader 的附加配置。配置项参考[官方文档](https://github.com
 }
 ```
 
+### h5.miniCssExtractLoaderOption
+
+`mini-css-extract-plugin` 的loader配置，在 `enableExtract` 为 `true` 的情况下生效。与 `miniCssExtractPluginOption` 选项配合使用。
+可以配置对应的loader config，配置项参考[官方文档](https://github.com/webpack-contrib/mini-css-extract-plugin)，例如：
+
+```jsx
+{
+  miniCssExtractPluginOption: {
+    filename: 'css/[name].css',
+    chunkFilename: 'css/[id].css'
+  },
+  miniCssExtractLoaderOption: {
+    publicPath: '../'
+  }
+}
+```
+
 ### h5.module
 
 配置一些 H5 端用到的插件模块配置，暂时只有 `postcss`。
diff --git a/packages/taro-webpack-runner/src/__tests__/index-test.ts b/packages/taro-webpack-runner/src/__tests__/index-test.ts
index dddf90a389c8..169de75cc3c6 100644
--- a/packages/taro-webpack-runner/src/__tests__/index-test.ts
+++ b/packages/taro-webpack-runner/src/__tests__/index-test.ts
@@ -44,6 +44,7 @@ describe('Regs', () => {
       fontUrlLoaderOption: {},
       imageUrlLoaderOption: {},
       mediaUrlLoaderOption: {},
+      miniCssExtractLoaderOption: {},
       esnextModules: [],
 
       module: {
diff --git a/packages/taro-webpack-runner/src/config/dev.conf.ts b/packages/taro-webpack-runner/src/config/dev.conf.ts
index b940873b31fa..551136abd465 100644
--- a/packages/taro-webpack-runner/src/config/dev.conf.ts
+++ b/packages/taro-webpack-runner/src/config/dev.conf.ts
@@ -50,6 +50,7 @@ export default function (appPath: string, config: Partial<BuildConfig>): any {
     imageUrlLoaderOption = emptyObj,
 
     miniCssExtractPluginOption = emptyObj,
+    miniCssExtractLoaderOption = emptyObj,
     esnextModules = [],
 
     module = {
@@ -116,6 +117,7 @@ export default function (appPath: string, config: Partial<BuildConfig>): any {
       fontUrlLoaderOption,
       imageUrlLoaderOption,
       mediaUrlLoaderOption,
+      miniCssExtractLoaderOption,
       esnextModules,
 
       module,
diff --git a/packages/taro-webpack-runner/src/config/prod.conf.ts b/packages/taro-webpack-runner/src/config/prod.conf.ts
index 24fe7b77bd0e..1612b9d62ea8 100644
--- a/packages/taro-webpack-runner/src/config/prod.conf.ts
+++ b/packages/taro-webpack-runner/src/config/prod.conf.ts
@@ -47,6 +47,7 @@ export default function (appPath: string, config: Partial<BuildConfig>): any {
     mediaUrlLoaderOption = emptyObj,
     fontUrlLoaderOption = emptyObj,
     imageUrlLoaderOption = emptyObj,
+    miniCssExtractLoaderOption = emptyObj,
 
     miniCssExtractPluginOption = emptyObj,
     esnextModules = [],
@@ -137,6 +138,7 @@ export default function (appPath: string, config: Partial<BuildConfig>): any {
       fontUrlLoaderOption,
       imageUrlLoaderOption,
       mediaUrlLoaderOption,
+      miniCssExtractLoaderOption,
       esnextModules,
 
       module,
diff --git a/packages/taro-webpack-runner/src/util/chain.ts b/packages/taro-webpack-runner/src/util/chain.ts
index c0dfcd686b74..358cb6dc690d 100644
--- a/packages/taro-webpack-runner/src/util/chain.ts
+++ b/packages/taro-webpack-runner/src/util/chain.ts
@@ -161,9 +161,10 @@ const getLessLoader = pipe(mergeOption, partial(getLoader, 'less-loader'))
 const getStylusLoader = pipe(mergeOption, partial(getLoader, 'stylus-loader'))
 const getBabelLoader = pipe(mergeOption, partial(getLoader, 'babel-loader'))
 const getUrlLoader = pipe(mergeOption, partial(getLoader, 'url-loader'))
-const getExtractCssLoader = () => {
+const getExtractCssLoader = (options) => {
   return {
-    loader: MiniCssExtractPlugin.loader
+    loader: MiniCssExtractPlugin.loader,
+    options: options || {}
   }
 }
 
@@ -245,6 +246,7 @@ const getModule = (appPath: string, {
   fontUrlLoaderOption,
   imageUrlLoaderOption,
   mediaUrlLoaderOption,
+  miniCssExtractLoaderOption,
   esnextModules = [] as (string | RegExp)[],
 
   module,
@@ -316,7 +318,7 @@ const getModule = (appPath: string, {
     styleLoaderOption
   ])
 
-  const extractCssLoader = getExtractCssLoader()
+  const extractCssLoader = getExtractCssLoader(miniCssExtractLoaderOption)
 
   const lastStyleLoader = enableExtract ? extractCssLoader : styleLoader
 
diff --git a/packages/taro-webpack-runner/src/util/types.ts b/packages/taro-webpack-runner/src/util/types.ts
index ee0f5a4e2899..34ac58e8d6e8 100644
--- a/packages/taro-webpack-runner/src/util/types.ts
+++ b/packages/taro-webpack-runner/src/util/types.ts
@@ -67,6 +67,7 @@ export interface TaroH5Config {
   fontUrlLoaderOption: Option;
   imageUrlLoaderOption: Option;
   miniCssExtractPluginOption: Option;
+  miniCssExtractLoaderOption: Option;
   esnextModules: string[];
 
   module?: {