WebPack:在html中编译JS文件时出现问题

Question

我在使用Webpack时遇到问题。我使用JS文件来调用API，但这个API应该只在escudos.html中调用，但当我构建Webpack时，JS文件会调用API int both(index.html，escudos.html(/src/js/teams.js调用API时，我在escudos.html，而不是在两个(index.html，escudos.html(html。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/js/index.js',
teams: './src/js/teams.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',
}),
new HtmlWebpackPlugin({
filename: 'escudos.html',
template: './src/escudos.html',
}),
],
devServer: {
static: './dist',
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: { loader: 'babel-loader' },
},
],
},
};

出于某种原因，我的webpacked文件index.html也有teams.js

Answer 1

问题(和解决方案(在HtmlWebpackPlugin中。HtmlWebpackPlugin默认情况下会在每个页面中注入所有条目
我能想到三种解决方案：

1. inject: false：这将禁用将<script>标记自动注入到模板中。您必须使用正确的src手动编写<script>标记。(附言：不要(
2. chunks：指定要为此模板包含哪些条目。E.G：(解决OP问题，在大多数情况下你需要/使用什么(

   new HtmlWebpackPlugin({
   template: "./src/index.html",
   chunks: ["index"]
   }),
   new HtmlWebpackPlugin({
   template: "./src/escudos.html",
   chunks: ["teams"]
   })
   

3. exclude：注入除此数组中指定的项之外的所有项。E.G

   new HtmlWebpackPlugin({
   template: "./src/test.html",
   exclude: ["index"]
   })