diff --git a/packages/arco-material-doc-site/src/config/webpack.config.ts b/packages/arco-material-doc-site/src/config/webpack.config.ts
index 4111c9f5..a7fe6c2c 100644
--- a/packages/arco-material-doc-site/src/config/webpack.config.ts
+++ b/packages/arco-material-doc-site/src/config/webpack.config.ts
@@ -40,10 +40,10 @@ function getEntryConfig() {
 function getModuleRuleForCss() {
   return [
     {
-      loader: 'style-loader',
+      loader: require.resolve('style-loader'),
     },
     {
-      loader: 'css-loader',
+      loader: require.resolve('css-loader'),
     },
   ];
 }
@@ -51,10 +51,10 @@ function getModuleRuleForCss() {
 function getModuleRuleForLess({ cssModule }: { cssModule?: boolean }) {
   return [
     {
-      loader: 'style-loader',
+      loader: require.resolve('style-loader'),
     },
     {
-      loader: 'css-loader',
+      loader: require.resolve('css-loader'),
       options: cssModule
         ? {
             modules: {
@@ -64,7 +64,7 @@ function getModuleRuleForLess({ cssModule }: { cssModule?: boolean }) {
         : {},
     },
     {
-      loader: 'less-loader',
+      loader: require.resolve('less-loader'),
       options: {
         lessOptions: {
           javascriptEnabled: true,
@@ -95,7 +95,7 @@ function generateBaseConfig() {
           exclude: /node_modules/,
           use: [
             {
-              loader: 'babel-loader',
+              loader: require.resolve('babel-loader'),
               options: babelConfig,
             },
           ],
@@ -104,11 +104,11 @@ function generateBaseConfig() {
           test: /\.md$/,
           use: [
             {
-              loader: 'babel-loader',
+              loader: require.resolve('babel-loader'),
               options: babelConfig,
             },
             {
-              loader: 'arco-markdown-loader',
+              loader: require.resolve('arco-markdown-loader'),
               options: {
                 demoDir: 'demo',
                 preprocess: removeMarkdownDemoPart,
@@ -118,7 +118,7 @@ function generateBaseConfig() {
         },
         {
           test: /\.svg$/,
-          use: ['@svgr/webpack'],
+          use: [require.resolve('@svgr/webpack')],
         },
         {
           test: /\.(png|jpg|gif|ttf|eot|woff|woff2)$/,
diff --git a/packages/arco-scripts/src/config/webpack/component.ts b/packages/arco-scripts/src/config/webpack/component.ts
index b72d16f1..3f0c347a 100644
--- a/packages/arco-scripts/src/config/webpack/component.ts
+++ b/packages/arco-scripts/src/config/webpack/component.ts
@@ -30,14 +30,14 @@ function getUse(cssModule) {
     : {};
   return [
     {
-      loader: 'style-loader',
+      loader: require.resolve('style-loader'),
     },
     {
-      loader: 'css-loader',
+      loader: require.resolve('css-loader'),
       options,
     },
     {
-      loader: 'less-loader',
+      loader: require.resolve('less-loader'),
       options: {
         javascriptEnabled: true,
       },
@@ -75,11 +75,11 @@ let config = {
         exclude: /node_modules/,
         use: [
           {
-            loader: 'babel-loader',
+            loader: require.resolve('babel-loader'),
             options: babelConfig,
           },
           {
-            loader: 'ts-loader',
+            loader: require.resolve('ts-loader'),
             options: getTSLoaderOptions(),
           },
         ],
@@ -94,23 +94,23 @@ let config = {
         sideEffects: true,
         use: [
           {
-            loader: 'style-loader',
+            loader: require.resolve('style-loader'),
           },
           {
-            loader: 'css-loader',
+            loader: require.resolve('css-loader'),
           },
         ],
       },
       {
         test: /\.(png|jpg|gif|ttf|eot|woff|woff2)$/,
-        loader: 'file-loader',
+        loader: require.resolve('file-loader'),
         options: {
           esModule: false,
         },
       },
       {
         test: /\.svg$/,
-        use: ['@svgr/webpack'],
+        use: [require.resolve('@svgr/webpack')],
       },
       {
         test: lessModuleRegex,
diff --git a/packages/arco-scripts/src/config/webpack/icon.ts b/packages/arco-scripts/src/config/webpack/icon.ts
index f6ffaa25..ed95895c 100644
--- a/packages/arco-scripts/src/config/webpack/icon.ts
+++ b/packages/arco-scripts/src/config/webpack/icon.ts
@@ -22,7 +22,7 @@ let config = {
     rules: [
       {
         test: /\.tsx?$/,
-        loader: 'babel-loader',
+        loader: require.resolve('babel-loader'),
         exclude: /node_modules/,
       },
     ],
diff --git a/packages/arco-scripts/src/config/webpack/site.ts b/packages/arco-scripts/src/config/webpack/site.ts
index 604aa3f2..126d1aa3 100644
--- a/packages/arco-scripts/src/config/webpack/site.ts
+++ b/packages/arco-scripts/src/config/webpack/site.ts
@@ -28,14 +28,14 @@ function getUse(cssModule, isProduction) {
     : {};
   return [
     {
-      loader: isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
+      loader: isProduction ? MiniCssExtractPlugin.loader : require.resolve('style-loader'),
     },
     {
-      loader: 'css-loader',
+      loader: require.resolve('css-loader'),
       options,
     },
     {
-      loader: 'postcss-loader',
+      loader: require.resolve('postcss-loader'),
       options: {
         postcssOptions: {
           plugins: ['autoprefixer'],
@@ -43,7 +43,7 @@ function getUse(cssModule, isProduction) {
       },
     },
     {
-      loader: 'less-loader',
+      loader: require.resolve('less-loader'),
       options: {
         javascriptEnabled: true,
       },
@@ -62,9 +62,9 @@ const baseConfig = {
       {
         test: /\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
+        loader: require.resolve('babel-loader'),
         options: babelConfig,
-        // loader: 'esbuild-loader',
+        // loader: require.resolve('esbuild-loader'),
         // options: {
         //   loader: 'tsx',
         //   target: 'es2015',
@@ -74,16 +74,16 @@ const baseConfig = {
         test: /\.md$/,
         use: [
           {
-            loader: 'babel-loader',
+            loader: require.resolve('babel-loader'),
             options: babelConfig,
-            // loader: 'esbuild-loader',
+            // loader: require.resolve('esbuild-loader'),
             // options: {
             //   loader: 'jsx',
             //   target: 'es2015',
             // },
           },
           {
-            loader: 'arco-markdown-loader',
+            loader: require.resolve('arco-markdown-loader'),
             options: {
               demoDir: 'demo',
               babelConfig,
@@ -93,18 +93,18 @@ const baseConfig = {
       },
       {
         test: /\.svg$/,
-        use: ['@svgr/webpack'],
+        use: [require.resolve('@svgr/webpack')],
       },
       {
         test: /\.(png|jpg|gif)$/,
-        loader: 'file-loader',
+        loader: require.resolve('file-loader'),
         options: {
           esModule: false,
         },
       },
       {
         test: /\.(ttf|eot|woff|woff2)$/,
-        loader: 'file-loader',
+        loader: require.resolve('file-loader'),
         options: {
           name: 'fonts/[name].[ext]',
           esModule: false,
@@ -150,10 +150,10 @@ const config = {
           test: /\.css$/,
           use: [
             {
-              loader: 'style-loader',
+              loader: require.resolve('style-loader'),
             },
             {
-              loader: 'css-loader',
+              loader: require.resolve('css-loader'),
             },
           ],
         },
@@ -205,7 +205,7 @@ const config = {
               loader: MiniCssExtractPlugin.loader,
             },
             {
-              loader: 'css-loader',
+              loader: require.resolve('css-loader'),
             },
           ],
         },