Html-webpack-plugin: 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
• [email protected]
• [email protected]

[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',
}

[rok-star]

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')
        })
    ]
}

[acnebs]

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