Chore: add overrideLoaderList to webpack plugin (#1382)

* feat: add overrideLoaderList to webpack plugin
* chore:move define

packages/semi-webpack/README.md

@@ -159,5 +159,11 @@ Type: `Object`
 
 The options of webpack loader that extract css.
 
+#### options.overrideStylesheetLoaders
+
+Type: `(loaderList:any[])=>any[]`
+
+You can customize how webpack process semi related styles by override the loader with this option. The function will receive the loader list of default loaders(include options.extractCssOptions) and you should return your new loader list. The best practice is just only add your loader to the list rather than delete or change the default loaders since some core logic is in there.
+
 
 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

@@ -17,7 +17,9 @@ export interface SemiWebpackPluginOptions {
     include?: string;
     omitCss?: boolean;
     webpackContext?: WebpackContext;
-    extractCssOptions?: ExtractCssOptions
+    extractCssOptions?: ExtractCssOptions;
+    overrideStylesheetLoaders?:(loaders:any[])=>any[]
+
 }
 
 export interface SemiThemeOptions {
@@ -94,7 +96,7 @@ export default class SemiWebpackPlugin {
                 } : {
                     loader: styleLoader
                 };
-                module.loaders = [
+                const loaderList = [
                     lastLoader,
                     {
                         loader: cssLoader,
@@ -113,6 +115,7 @@ export default class SemiWebpackPlugin {
                             include: this.options.include
                         }
                     }];
+                module.loaders = this.options.overrideStylesheetLoaders?.(loaderList) ?? loaderList;
             }
         }
     }