htmlWebpackPlugin 只添加一个入口点到生成的 html

Question

以下是 webpack 配置条目：

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

一个 HTML 页面被提供给 htmlwebpackplugin 如下

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

这导致在 options.html 页面中同时注入 background.js、options.js，如下所示：

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

有没有办法限制只能在一个JS文件或者指定在html页面注入的文件名？

Answer 1

看来你可以使用 html-webpack-exclude-assets-plugin

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

Answer 2

chunks 选项可能是您要使用的选项（请参阅文档的 filtering chunks section）。我不知道为什么它会在您的代码段中发表评论，但您可以这样写：

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

如果您只想在生成的 HTML 中注入 options 入口点，请指定块：

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

htmlWebpackPlugin 只添加一个入口点到生成的 html

htmlWebpackPlugin add only one entry point to the generated html

webpack

html-webpack-plugin