Create asset module from custom loader

Feature request

We have a @ecomfe/svg-mixed-loader which transforms an svg file to multiple formats, previously we use url-loader and file-loader to generate an DataURI or standalone asset according to user configuration.

Since url-loader and file-loader are deprecated and webpack recommends asset module instead, is it still possible to generate an asset/resource or asset/inline from my loader?

What is the expected behavior?

I’d prefer to have some helpers like generateAssetModule(this.resource, options) that can be used inside a loader implementation:

// Inside loader
const url = await generateAssetModule(this.resource, this.getOptions().asset);
return `export const url = ${JSON.stringify(url)}`;

What is motivation or use case for adding/changing the behavior?

Currently generating an asset involves end user configuration of module.resolve, we want it to be transparent to end user and encapsulated inside a loader

How should this be implemented in your opinion?

A helper function in webpack or loader-utils to manually generate asset from a file

Are you willing to work on this yourself?

Not familiar with that

[otakustay]

Successfully implement it, works like a charm! Thanks a lot

[alexander-akait]

In this case you should not add type: 'asset', you don’t need it, webpack itself take care about assets modules, your loader should generate this content:

const myURL = new URL('./image.svg?asset-module', import.meta.url);
const ReactComponent = props => /*#__PURE__*/external_React_default().createElement("svg", _extends({});

export default myURL;
export { ReactComponent }; 

And use this:

module: {
    rules: [
        {
            test: /\.svg$/,
            resourceQuery: { not: /asset-module/ },
            use: [
              "babel-loader", // optional, if you need convert new ECMA syntax
              "your-custom-loader.js" // you loader generate code above
            ],
        },
        {
            test: /\.svg$/,
            resourceQuery:  /asset-module/,
            type: 'asset',
        },
    ],
},

We use not to prevent overlapping between two rules with svg extension, also in near future we will have import assertions, so it can be simplified in future too