emitted data:text/javascript,__webpack_public_path__ = htmlWebpackPluginPublicPath;

[await-ovo]

Current behaviour 💣

after using webpack 5 build, seen that a file named 01b0bacef142817ca1a5 emitted in dist, which content is:

__webpack_public_path__ = htmlWebpackPluginPublicPath;

Expected behaviour ☀️

I'm not sure if this is the correct behavior and what this file does.

can i ignore this file by plugin like ignore-emit-webpack-plugin ?

Reproduction Example 👾

my webpack.config.js as below:

module.exports = {
  "mode": "production",
  entry: {
    'app': './src/index.js'
  },
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack', 'url-loader'],
        type: 'javascript/auto'
      },
      // fallback for other asset modules
      {
        exclude: [/\.(svg|js|jsx|ts|tsx|html)$/],
        type: 'asset/resource',
      }
    ]
  },
  optimization: {
    minimize: false,
    runtimeChunk: {
      name: entrypoint => `runtime~${entrypoint.name}`
    },
    splitChunks: {
      chunks: 'all'
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html'
    }),
  ]
}

Environment 🖥

• Node.js v12.20.1
• darwin 19.6.0
• webpack@5.16.0
• html-webpack-plugin@5.0.0-beta.6

[jantimon]

This is a bug we should fix on html-webpack-plugin site.

Is the bug fixed if you remove your optimization section?

[jantimon]

Unfortunately I can't reproduce this issue - can you please help me so I can try to fix this issue?

[await-ovo]

Unfortunately I can't reproduce this issue - can you please help me so I can try to fix this issue?

OK，I will make a repo reproduce this tomorrow

[await-ovo]

Unfortunately I can't reproduce this issue - can you please help me so I can try to fix this issue?

The git repository is here: html-webpack-plugin-next-demo, just yarn install && yarn build will reproduce this.

If I remove the last rule configuration, the build will be as expected:

  {
        exclude: [/\.png$/, /\.html$/],
        type: 'asset/resource'
  }

maybe data:text/javascript,__webpack_public_path__ = htmlWebpackPluginPublicPath; matched this rule ?

[jantimon]

Oh you are right! :)

Nice job - yes this rule says export all files which are NOT '.png' or '.html' files.. that is creating this strange behaviour

[await-ovo]

Oh you are right! :)

Nice job - yes this rule says export all files which are NOT '.png' or '.html' files.. that is creating this strange behaviour

Is it possible to fix it in html-webpack-plugin?

[jantimon]

I have one idea - I'll try and let you know :)

[jantimon]

Unfortunately it is cached up by your fallback loader no matter what I try to do..

However you can change your regexp slightly to ignore it:

{
        exclude: [/(^|\.(svg|js|jsx|ts|tsx|html))$/],
        type: 'asset/resource',
}

[roman-kirsanov]

Same bug with:

const Path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
    entry: Path.resolve(__dirname, 'src/index.tsx'),
    output: {
        path: Path.resolve(__dirname, (process.env.OUT_PATH || 'out/debug')),
        filename: 'index.js'
    },
    module: {
        rules: [{
            test: /\.tsx?$/i,
            loader: 'ts-loader',
            exclude: /node_modules/,
            options: {
                configFile : Path.resolve(__dirname, 'tsconfig.json')
            }
        }]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
        plugins: [new TsconfigPathsPlugin({
            configFile: Path.resolve(__dirname, 'tsconfig.json')
        })]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Hot Module Replacement',
            template: Path.resolve(__dirname, 'src/index.html')
        })
    ]
}

[connebs]

Yes, I'm getting the same error message but the above solution doesn't work for me, as I'm not actually using any sort of catchall webpack rule (or processing HTML files at all with my rules) so not really sure where this mangling is happening that must be short-circuiting HtmlWebpackPlugin.

I am also trying to use a .tsx file as my entrypoint though, so maybe that is our issue, @Rok-Star.

EDIT: the problem was using an old Webpack. Was on 5.5.x, needed to be on > 5.21.x

[utrumo]

Same problem with strange file

versions:
"webpack": "^5.33.2",
"webpack-cli": "^4.6.0",
"html-webpack-plugin": "^5.3.1",

filename:
'javascript,__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;.1feff74faaf0efc6a044355c92cd15d9.bin'

content:
__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;

and content

[rockcitystore]

Same problem with strange file

versions:
"webpack": "^5.35.0",
"webpack-cli": "^4.6.0",
"html-webpack-plugin": "^5.3.1",

filename:
'javascript,webpack_public_path = webpack_base_uri = htmlWebpackPluginPublicPath;.1feff74f.bin'

content:
webpack_public_path = webpack_base_uri = htmlWebpackPluginPublicPath;

webpack config:
new HtmlWebpackPlugin({ title: '中文', template: paths.appIndexHtml, favicon: paths.publicFolder + '/favicon.ico', minify: { collapseWhitespace: true, removeComments: true, removeRedundantAttributes: true, useShortDoctype: true }, inject: true, }),

and when remove file-loader its ok

{ exclude: [/\.js$/, /\.jsx$/, /\.html$/], use: { loader: 'file-loader', options: { name: 'assets/[name].[hash:8].[ext]' } } }

[Pavel910]

Unfortunately it is cached up by your fallback loader no matter what I try to do..

However you can change your regexp slightly to ignore it:

{
        exclude: [/(^|\.(svg|js|jsx|ts|tsx|html))$/],
        type: 'asset/resource',
}

@jantimon wanted to ask for clarification here: I also came to a conclusion that something is pushing an asset with an empty filename and that regex makes it skip that empty asset. I found it by using a function as an exclude and logging every file processed by the file-loader. When I disable html-webpack-plugin - no empty assets are being detected. So this must be coming from the plugin, but I can't find where from.

What was your idea behind this? What can be the possible reason this is happening? Cheers!

[jantimon]

The html-webpack-plugin 5.x adds an inline javascript to add support for the new asset/* loader types.

It's an entry chunk added directly to the child compiler here:

html-webpack-plugin/lib/child-compiler.js

Line 119 in 0a6568d

new EntryPlugin(childCompiler.context, 'data:text/javascript,__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;', `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);

Inline javascript assets won't have a name so the following regexp allows you to ignore it:

{
        exclude: [
          /^$/,
        ],
}