Support asset-modules instead of file-loader

[caseyjhol]

Feature Proposal

Support using asset-modules with style-loader instead of having to use file-loader.

Feature Use Case

file-loader is deprecated, so it would be great to be able to use asset-modules instead alongside style-loader. However, this doesn't currently seem possible. A file is generated -- however, it is not a valid CSS file (it contains JavaScript). In addition, the file is not included on the page at runtime.

Example configuration:

                {
                    test: /\.css$/i,
                    include: /node_modules/,
                    type: 'asset/resource',
                    generator: {
                        filename: 'lib/css/[name].[contenthash].[ext]',
                    },
                    use: [
                        {
                            loader: 'style-loader',
                            options: {
                                injectType: 'linkTag',
                            }
                        },
                    ]
                },

Please paste the results of npx webpack-cli info here, and mention other relevant information

• Operating System: Ubuntu 22.04
• Node Version: 14.17.6
• NPM Version: 8.5.3
• webpack Version: 5.74.0
• style-loader Version: 3.3.1

[alexander-akait]

For <link> we have mini-css-extract-plugin, also we have https://github.com/webpack-contrib/css-loader#exporttype ("string"), so css-loader return text CSS which can be used to using new URL("", import.meta.url) and injected in document, extracting is out of scope style-loader

[caseyjhol]

Thank you for pointing me to css-loader/exporttype.

You mention here to use asset modules, and that the documentation needs to be updated. It might be good to mention in the documentation that asset-modules cannot be used with linkTag (as I wasn't expecting it necessary to use a deprecated plugin in order to achieve this).

[alexander-akait]

@caseyjhol Yeah, PR welcome, it was described in some migration guide, but looks like we missed it here