html-loader icon indicating copy to clipboard operation
html-loader copied to clipboard

Emits seperate js file even when target is `webworker` and max chunks is 1

Open ChocolateLoverRaj opened this issue 4 years ago • 6 comments

Bug report

I'm making a Vscode extension which usea a webview. I'm using webpack to create the file extension.js. I want to import an html file as a string, and also bundle scripts as part of the html string. I'm using html-loader. What's happening is that html-loader is not bundling the <script src='./script.js'></script>. It's creating a seperate file and referencing it with the script tag. This won't work because vscode doesn't load any other files besides the html string.

Actual Behavior

It creates a file like abc123.js and the html has something like <script src="./abc123.js"></script>.

Expected Behavior

It should not output an additional js file. It should just include <script>/* bundled contents of script go here */</script>, which is part of the exported string.

How Do We Reproduce?

This isn't the exact use case, but it is simplified and it reproduces the bug. Link to repl. Run npm start to run webpack.

webpack.config.js:

{
  mode: 'none',
  target: 'webworker',
  entry: './index.js',
  output: {
    filename: 'index.js',
    path: path.join(__dirname, './dist')
  },
  module: {
    rules: [{
      test: /\.html$/,
      exclude: /node_modules/,
      use: 'html-loader'
    }]
  },
  plugins: [
    new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })
  ],
  performance: {
    hints: false
  }
}

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

System: OS: Linux 5.11 Debian GNU/Linux 9 (stretch) 9 (stretch) CPU: (8) x64 Intel(R) Xeon(R) CPU @ 2.20GHz Memory: 3.01 GB / 51.00 GB Binaries: Node: 12.22.6 - /usr/local/bin/node Yarn: 1.22.5 - /usr/local/bin/yarn npm: 6.14.15 - /usr/local/bin/npm Packages: html-loader: ^3.0.1 => 3.0.1 webpack: ^5.65.0 => 5.65.0 webpack-cli: ^4.9.1 => 4.9.1

ChocolateLoverRaj avatar Dec 21 '21 22:12 ChocolateLoverRaj

You need loader for js inside HTML to do it

alexander-akait avatar Dec 22 '21 11:12 alexander-akait

You need loader for js inside HTML to do it

How do you do that? Can you please give an example?

ChocolateLoverRaj avatar Dec 22 '21 20:12 ChocolateLoverRaj

You need to use issuer and set loader for inline scripts, you can use base64 for example for better compressing

alexander-akait avatar Dec 23 '21 10:12 alexander-akait

@alexander-akait Thanks. I got it to work in the vscode extension, but couldn't make a minimum reproducable example that fixes it.

ChocolateLoverRaj avatar Dec 23 '21 15:12 ChocolateLoverRaj

Can you clarify?

alexander-akait avatar Dec 24 '21 12:12 alexander-akait

Here is my attempt: https://replit.com/@Programmerraj/html-loader-bundle-with-issuer#index.js

ChocolateLoverRaj avatar Dec 24 '21 22:12 ChocolateLoverRaj