htmlWebpackPlugin add only one entry point to the generated html

Question

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?

Answer 1

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
}),

Answer 2

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

plugins: [
  new HtmlWebpackPlugin({
    excludeAssets: [/style.*.js/] // exclude style.js or style.[chunkhash].js 
  }),
  new HtmlWebpackExcludeAssetsPlugin()
]