webpack-contrib / html-loader

HTML Loader

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

ChocolateLoverRaj opened this issue · 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

You need loader for js inside HTML to do it

You need loader for js inside HTML to do it

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

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

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

Can you clarify?

Close in favor #33