Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ChocolateLoverRaj opened this issue Dec 21, 2021 · 6 comments

Comments

@ChocolateLoverRaj
Copy link

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

@alexander-akait
Copy link
Member

You need loader for js inside HTML to do it

@ChocolateLoverRaj
Copy link
Author

You need loader for js inside HTML to do it

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

@alexander-akait
Copy link
Member

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

@ChocolateLoverRaj
Copy link
Author

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

@alexander-akait
Copy link
Member

Can you clarify?

@ChocolateLoverRaj
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants