chore: update publicPath

Author: SoonIter

packages/core/src/asset/assetConfig.ts

@@ -12,14 +12,15 @@ const RSBUILD_SVGR_PLUGIN_NAME = 'rsbuild:svgr';
 
 /**
  * Be compatible to css-extract importModule and experimentalLibPreserveExports
- * when set experimentalLibPreserveExports to true, the css-loader result can not executed in node side
+ * when set experimentalLibPreserveExports to true, the css-loader result can not executed in node side, so clone the assets rule
+ * 1. js assets: original rule set issuer and experimentalLibPreserveExports
+ * 2. css assets: a copy of original rule
  */
 const pluginLibAsset = ({ bundle }: { bundle: boolean }): RsbuildPlugin => ({
   name: PLUGIN_NAME,
   pre: [RSBUILD_SVGR_PLUGIN_NAME],
   setup(api) {
     api.modifyBundlerChain((config, { CHAIN_ID }) => {
-      // clone asset rules to separate css and js assets
       // 1. modify svg rule first, svg is special because of svgr
       const svgAssetRule = config.module.rules
         .get(CHAIN_ID.RULE.SVG)
@@ -28,10 +29,15 @@ const pluginLibAsset = ({ bundle }: { bundle: boolean }): RsbuildPlugin => ({
       const originalParserOptions = svgAssetRule.get('parser');
       const originalGeneratorOptions = svgAssetRule.get('generator');
 
-      const generatorOptions = {
-        ...originalGeneratorOptions,
-        experimentalLibPreserveImport: true,
-      };
+      const isUserSetPublicPath = config.output.get('publicPath') !== 'auto';
+
+      // if user sets publicPath, do not preserve asset import
+      const generatorOptions = isUserSetPublicPath
+        ? originalGeneratorOptions
+        : {
+            ...originalGeneratorOptions,
+            experimentalLibPreserveImport: true,
+          };
 
       const rule = config.module.rule(CHAIN_ID.RULE.SVG);
 
@@ -60,10 +66,12 @@ const pluginLibAsset = ({ bundle }: { bundle: boolean }): RsbuildPlugin => ({
         const originalParserOptions = assetRule.get('parser');
         const originalGeneratorOptions = assetRule.get('generator');
 
-        const generatorOptions = {
-          ...originalGeneratorOptions,
-          experimentalLibPreserveImport: true,
-        };
+        const generatorOptions = isUserSetPublicPath
+          ? originalGeneratorOptions
+          : {
+              ...originalGeneratorOptions,
+              experimentalLibPreserveImport: true,
+            };
 
         const rule = config.module.rule(ruleId);
         rule.oneOf(oneOfId).generator(generatorOptions).issuer({
@@ -78,7 +86,7 @@ const pluginLibAsset = ({ bundle }: { bundle: boolean }): RsbuildPlugin => ({
           .issuer(CSS_EXTENSIONS_PATTERN);
       }
 
-      // svgr
+      // for svgr
       // 1. remove __webpack_require__.p in svgr url-loader and file-loader
       const isUsingSvgr = Boolean(
         config.module

tests/integration/asset/index.test.ts

@@ -201,15 +201,66 @@ test('set the assets public path', async () => {
   const fixturePath = join(__dirname, 'public-path');
   const { contents } = await buildAndGetResults({ fixturePath });
 
-  // umd should preserve '__webpack_require__.p'
+  // 1. umd should preserve '__webpack_require__.p'
   const { content: indexUmdJs } = queryContent(contents.umd!, /index\.js/);
 
   expect(indexUmdJs).toContain(
-    '__webpack_require__.p = "/public/path/bundleless/";',
+    '__webpack_require__.p = "/public/path/";',
   );
   expect(indexUmdJs).toContain(
     'const image_namespaceObject = __webpack_require__.p + "static/image/image.png";',
   );
+
+  // 2. bundle
+  // esm
+  const { content: indexJs } = queryContent(
+    contents.esm0!,
+    /index\.js/,
+  );
+  expect(indexJs).toMatchInlineSnapshot(`
+    "var __webpack_module_cache__ = {};
+    function __webpack_require__(moduleId) {
+        var cachedModule = __webpack_module_cache__[moduleId];
+        if (void 0 !== cachedModule) return cachedModule.exports;
+        var module = __webpack_module_cache__[moduleId] = {
+            exports: {}
+        };
+        __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+        return module.exports;
+    }
+    (()=>{
+        __webpack_require__.p = "/public/path/";
+    })();
+    const image_namespaceObject = __webpack_require__.p + "static/image/image.png";
+    const src = image_namespaceObject;
+    export { src as default };
+    "
+  `);
+
+  // 3. bundleless
+  // esm
+  const { content: imageJs } = queryContent(
+    contents.esm1!,
+    /assets\/image\.js/,
+  );
+  expect(imageJs).toMatchInlineSnapshot(`
+    "var __webpack_module_cache__ = {};
+    function __webpack_require__(moduleId) {
+        var cachedModule = __webpack_module_cache__[moduleId];
+        if (void 0 !== cachedModule) return cachedModule.exports;
+        var module = __webpack_module_cache__[moduleId] = {
+            exports: {}
+        };
+        __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+        return module.exports;
+    }
+    (()=>{
+        __webpack_require__.p = "/public/path/";
+    })();
+    const image_rslib_entry_namespaceObject = __webpack_require__.p + "static/image/image.png";
+    export { image_rslib_entry_namespaceObject as default };
+    "
+  `);
 });
 
 test('use svgr', async () => {

tests/integration/asset/public-path/rslib.config.ts

@@ -1,19 +1,31 @@
 import { defineConfig } from '@rslib/core';
-import { generateBundleUmdConfig } from 'test-helper';
+import { generateBundleEsmConfig, generateBundleUmdConfig } from 'test-helper';
 
 export default defineConfig({
   lib: [
     generateBundleUmdConfig({
       output: {
-        assetPrefix: '/public/path/bundleless',
+        assetPrefix: '/public/path',
+      },
+    }),
+    generateBundleEsmConfig({
+      output: {
+        distPath: {
+          root: './dist/esm/bundle',
+        },
+        assetPrefix: '/public/path',
+      },
+    }),
+    generateBundleEsmConfig({
+      bundle: false,
+      output: {
+        distPath: {
+          root: './dist/esm/bundle-false',
+        },
+        assetPrefix: '/public/path',
       },
     }),
   ],
-  source: {
-    entry: {
-      index: './src/index.js',
-    },
-  },
   output: {
     target: 'web',
   },