Search code examples
webpackhtml-webpack-plugin

htmlWebpackPlugin add only one entry point to the generated html

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?

Solution

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

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