I have a basic webpack configuration:
module.exports = {
context: __dirname,
entry: './example.js',
experiments: {
asset: true,
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '',
filename: 'bundle.js',
},
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.png$/, type: 'asset/resource' },
{ test: /\.html$/, use: ['raw-loader'] },
// { test: /\.html$/, type: 'asset/source' },
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
}),
],
};
This configuration inject the bundle.js in the index.html using the html-webpack-plugin. However, I needed a loader for html and I used raw loader. Everything was working fine.
Then, I wanted to use the feature asset modules. Looking at the webpack 5 asset modules documentation, it seems that asset/source is the same that raw-loader, therefore I change the loader with this type (see the commented code in the webpack config above) and the output of the index.html is not what I had before. Indeed, it seems that it is interpreted by webpack instead of just raw like before.
var _ = non_webpack_require("C:\Users...\node_modules\lodash\lodash.js");module.exports = function (templateParams) { with(templateParams) {return (function(data) { var __t, __p = ''; __p += '<!doctype html>Webpack App'; return __p })();}}
Looking at the documentation of html-webpack-plugin, if there is a html loader, it will use it. It means that asset/source does not work like raw-loader.