Should remove __webpack_require__.p runtime in bundleless mode

[Timeless0911]

What problem does this feature solve?

When we try to transform some files below in bundleless mode

// index.js
import circleURL from './circle.svg';
import image from './image.png';

console.log(circleURL);
console.log(image);

The output contain a __webpack_require__.p which brings a full __webpack_require__ at the top.

// The module cache
var __webpack_module_cache__ = {};
// The require function
function __webpack_require__(moduleId) {
    // Check if module is in cache
    var cachedModule = __webpack_module_cache__[moduleId];
    if (void 0 !== cachedModule) return cachedModule.exports;
    // Create a new module (and put it into the cache)
    var module = __webpack_module_cache__[moduleId] = {
        exports: {}
    };
    // Execute the module function
    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
    // Return the exports of the module
    return module.exports;
}
/************************************************************************/ // webpack/runtime/public_path
(()=>{
    __webpack_require__.p = "/";
})(); /************************************************************************/ 
const circle_namespaceObject = __webpack_require__.p + "static/svg/circle.svg";
const image_namespaceObject = __webpack_require__.p + "static/image/image.png";
console.log(circle_namespaceObject);
console.log(image_namespaceObject);

We should remove this __webpack_require__ implementation to make output clearer.

A proper way to achieve this is to use generator.publicPath in asset module rules to avoid injecting runtime publicpath.

{
  tools: {
    bundlerChain: (chain, { CHAIN_ID }) => {
      const imageAssetGeneratorOptions = chain.module
        .rule(CHAIN_ID.RULE.IMAGE)
        .oneOfs.get('image-asset')
        .get('generator');

      const svgGeneratorOptions = chain.module
        .rule(CHAIN_ID.RULE.SVG)
        .oneOfs.get(CHAIN_ID.ONE_OF.SVG_ASSET)
        .get('generator');

      chain.module
        .rule(CHAIN_ID.RULE.IMAGE)
        .oneOfs.get('image-asset')
        .set('generator', {
          ...imageAssetGeneratorOptions,
          publicPath: 'your/public/path/',
        });

      chain.module
        .rule(CHAIN_ID.RULE.SVG)
        .oneOfs.get(CHAIN_ID.ONE_OF.SVG_ASSET)
        .set('generator', {
          ...svgGeneratorOptions,
          publicPath: 'your/public/path/',
        });
    },
  },
}

The output will be like

const circle_namespaceObject = "your/public/path/static/svg/circle.svg";
const image_namespaceObject = "your/public/path/static/image/image.png";
console.log(circle_namespaceObject);
console.log(image_namespaceObject);

What does the proposed API look like?

1. Sorting out all assets in Rsbuild about asset modules involving publicpath
2. In Rslib bundleless mode, automatically set generator.publicPath for these asset module rules by tools.bundlerChain