Browse Source

在production环境下构建h5应用时,替换源码中localhost:10086

dengdx 3 weeks ago
parent
commit
339f35e6cc
3 changed files with 50 additions and 22 deletions
  1. 33 22
      config/prod.ts
  2. 16 0
      package-lock.json
  3. 1 0
      package.json

+ 33 - 22
config/prod.ts

@@ -7,27 +7,38 @@ export default {
      * WebpackChain 插件配置
      * @docs https://github.com/neutrinojs/webpack-chain
      */
-    // webpackChain (chain) {
-    //   /**
-    //    * 如果 h5 端编译后体积过大,可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
-    //    * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
-    //    */
-    //   chain.plugin('analyzer')
-    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
-    //   /**
-    //    * 如果 h5 端首屏加载时间过长,可以使用 prerender-spa-plugin 插件预加载首页。
-    //    * @docs https://github.com/chrisvfritz/prerender-spa-plugin
-    //    */
-    //   const path = require('path')
-    //   const Prerender = require('prerender-spa-plugin')
-    //   const staticDir = path.join(__dirname, '..', 'dist')
-    //   chain
-    //     .plugin('prerender')
-    //     .use(new Prerender({
-    //       staticDir,
-    //       routes: [ '/pages/index/index' ],
-    //       postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
-    //     }))
-    // }
+    webpackChain(chain) {
+      //   /**
+      //    * 如果 h5 端编译后体积过大,可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
+      //    * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
+      //    */
+      //   chain.plugin('analyzer')
+      //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+      //   /**
+      //    * 如果 h5 端首屏加载时间过长,可以使用 prerender-spa-plugin 插件预加载首页。
+      //    * @docs https://github.com/chrisvfritz/prerender-spa-plugin
+      //    */
+      //   const path = require('path')
+      //   const Prerender = require('prerender-spa-plugin')
+      //   const staticDir = path.join(__dirname, '..', 'dist')
+      //   chain
+      //     .plugin('prerender')
+      //     .use(new Prerender({
+      //       staticDir,
+      //       routes: [ '/pages/index/index' ],
+      //       postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
+      //     }))
+      chain.module
+        .rule('replace-a2b')
+        .test(/\.[jt]sx?$/) // 作用于 .js/.ts/.jsx/.tsx
+        .use('string-replace-loader')
+        .loader('string-replace-loader')
+        .options({
+          search: 'localhost:10086', // 要替换的字符串/正则
+          replace: '192.168.11.12:6001', // 替换成的字符串
+          flags: 'g', // 全局替换
+        })
+        .before('babel-loader'); // 必须在 babel-loader 之前执行,防止被转码后匹配不到
+    },
   },
 } satisfies UserConfigExport<'webpack5'>;

+ 16 - 0
package-lock.json

@@ -73,6 +73,7 @@
         "prettier": "^3.5.3",
         "react-refresh": "^0.14.0",
         "stream-browserify": "^3.0.0",
+        "string-replace-loader": "^3.2.0",
         "stylelint": "^16.4.0",
         "tailwindcss": "^3.4.17",
         "terser-webpack-plugin": "^5.3.14",
@@ -20924,6 +20925,21 @@
       "integrity": "sha512-tYft6IFi8SjplJpxCUxyqisD3b+R2CSkomrtJYCkvuf1KuCAWgz7YXt4O0jip7efpfCemwHEzTEAO8EuOYgh3w==",
       "dev": true
     },
+    "node_modules/string-replace-loader": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/string-replace-loader/-/string-replace-loader-3.2.0.tgz",
+      "integrity": "sha512-q7+F4DC6MAKkszF3ZQEuZ3dDH25wXPxFA0maTLk3TOTAYPLDgwqCeCKIvOd8xJhYYYl+EXusYRCyKIJliT/olg==",
+      "dev": true,
+      "dependencies": {
+        "schema-utils": "^4"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "webpack": "^5"
+      }
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",

+ 1 - 0
package.json

@@ -108,6 +108,7 @@
     "prettier": "^3.5.3",
     "react-refresh": "^0.14.0",
     "stream-browserify": "^3.0.0",
+    "string-replace-loader": "^3.2.0",
     "stylelint": "^16.4.0",
     "tailwindcss": "^3.4.17",
     "terser-webpack-plugin": "^5.3.14",