16

Below are the webpack config entries :

entry:{
    background: './app/main/background.js',
    options: './app/main/options.js'
}

One HTML page which is suplied to htmlwebpackplugin as below

new HtmlWebpackPlugin({
    template :'./app/templates/options.html',
    // chunks : ['jquery','angular','app'],
    filename: "./options.html",
    cache : true
}),

This results in injecting both background.js, options.js in the options.html page as below:

 <script type="text/javascript" src="js/background.js"></script><script type="text/javascript" src="js/options.js"></script></body>

Is there a way to restrict it to only one JS file or specify the file names to be injected in html page?

Max
  • 739
  • 2
  • 8
  • 23
Irshad
  • 1,016
  • 11
  • 30
  • Honestly it seems like this should just be an option in the plugin. Not sure how this has not been implemented after all these years. – eltiare Dec 14 '21 at 00:28

2 Answers2

21

The chunks option is probably what you want to use (see the filtering chunks section of the documentation). I don't know why it's commented in your snippet but you could write this:

entry: {
    background: './app/main/background.js',
    options: './app/main/options.js'
}

If you want to only inject the options entrypoint in the generated HTML, specify the chunks:

new HtmlWebpackPlugin({
    template :'./app/templates/options.html',
    chunks : ['options'],
    filename: "./options.html",
    cache : true
}),
fstephany
  • 2,254
  • 3
  • 25
  • 32
5

Seems you can use html-webpack-exclude-assets-plugin

plugins: [
  new HtmlWebpackPlugin({
    excludeAssets: [/style.*.js/] // exclude style.js or style.[chunkhash].js 
  }),
  new HtmlWebpackExcludeAssetsPlugin()
]
user2473015
  • 1,392
  • 3
  • 22
  • 47