feat: support for extracting css in webpack (#379)

Co-authored-by: wuhw <[email protected]>

packages/semi-webpack/README.md

@@ -147,4 +147,17 @@ In the compilation phase, whether to exclude css references.Used to solve the pr
 
 Type: `webpack NormalModule`
 
+##### options.extractCssOptions.loader
+
+Type: `String`
+
+The path of webpack loader that extract css.
+
+##### options.extractCssOptions.loaderOptions
+
+Type: `Object`
+
+The options of webpack loader that extract css.
+
+
 In webpack@5, some hooks need to be obtained through api `NormalModule.getCompilationHooks`. But in some scenarios, webpack will not be installed, such as Next.js. Therefore, the user is required to pass in NormalModule as a parameter.

packages/semi-webpack/src/semi-webpack-plugin.ts

@@ -5,13 +5,19 @@ const _NormalModule_ = require('webpack/lib/NormalModule');
 export interface WebpackContext {
     NormalModule?: any;
 }
+
+export interface ExtractCssOptions {
+    loader: string;
+    loaderOptions?: any;
+}
 export interface SemiWebpackPluginOptions {
     theme?: string | SemiThemeOptions;
     prefixCls?: string;
     variables?: {[key: string]: string | number};
     include?: string;
     omitCss?: boolean;
-    webpackContext?: WebpackContext
+    webpackContext?: WebpackContext;
+    extractCssOptions?: ExtractCssOptions;
 }
 
 export interface SemiThemeOptions {
@@ -39,7 +45,7 @@ export default class SemiWebpackPlugin {
                         if (this.options.prefixCls) {
                             this.customPrefix(module, this.options.prefixCls);
                         }
-                    })
+                    });
                 } else {
                     compilation.hooks.normalModuleLoader.tap('SemiPlugin', (context: any, module: any) => {
                         if (this.options.omitCss) {
@@ -50,7 +56,7 @@ export default class SemiWebpackPlugin {
                         if (this.options.prefixCls) {
                             this.customPrefix(module, this.options.prefixCls);
                         }
-                    })
+                    });
                 }
             }
         });
@@ -82,10 +88,14 @@ export default class SemiWebpackPlugin {
                 name: this.options.theme
             };
             if (!this.hasSemiThemeLoader(module.loaders)) {
+                const lastLoader = this.options.extractCssOptions ? {
+                    loader: this.options.extractCssOptions.loader,
+                    options: this.options.extractCssOptions.loaderOptions || {}
+                } : {
+                    loader: styleLoader
+                };
                 module.loaders = [
-                    {
-                        loader: styleLoader
-                    },
+                    lastLoader,
                     {
                         loader: cssLoader
                     }, {