feat(taro-webpack-runner): add miniCssExtractLoaderOption suppo… (#5922)

* feat(taro-webpack-runner): add miniCssExtractLoaderOption support for mini-css-extract-plugin * fix: fix test case when using getModule method Co-authored-by: liangxufei <[email protected]>
NervJS · Apr 9, 2020 · 7315bdd · 7315bdd
1 parent 174dbee
commit 7315bdd
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -67,6 +67,7 @@ export interface TaroH5Config {
   fontUrlLoaderOption: Option;
   imageUrlLoaderOption: Option;
   miniCssExtractPluginOption: Option;
+  miniCssExtractLoaderOption: Option;
   esnextModules: string[];
 
   module?: {