Webpack 每个html文件都包含它'；s自己的js脚本

我有一个网页包配置js，如下所示：

entry: {
    language: path.resolve(__dirname, 'src/scripts/lang.js'),
    config: path.resolve(__dirname, 'src/scripts/config.js'),
    mainFunctions: path.resolve(__dirname, 'src/scripts/utilFunctions.js'),
},

entry: {
    language: path.resolve(__dirname, 'src/scripts/lang.js'),
    config: path.resolve(__dirname, 'src/scripts/conf.js'),
    mainFunctions: path.resolve(__dirname, 'src/scripts/utilFunctions.js'),
    index: path.resolve(__dirname, 'src/scripts/index.js'),
    home: path.resolve(__dirname, 'src/scripts/home.js'),
},

此脚本序列位于html文件的底部：

<script src="../plugins/jQuery/jquery-3.4.1.min.js"></script>
<script src="../plugins/Popper/popper.min.js"></script>
<script src="../plugins/Bootstrap/bootstrap.min.js"></script>
<script src="../plugins/Magnific/magnificPopup.min.js"></script>


</body>
</html>

问题是如何为每个html文件包含它自己的js脚本，最终结果应该是这样的

index.html中的

// ----- connected scripts in here -------- //
<script type="text/javascript" src=".././js/utilFunctions-1ae3ee4b074ef90d909b.js"></script>
<script type="text/javascript" src=".././js/index.js"></script>
</body>

// ----- connected scripts in here -------- //
<script type="text/javascript" src=".././js/utilFunctions-1ae3ee4b074ef90d909b.js"></script>
<script type="text/javascript" src=".././js/home.js"></script>
</body>

/----此处连接的脚本----//

在home.html中

// ----- connected scripts in here -------- //
<script type="text/javascript" src=".././js/utilFunctions-1ae3ee4b074ef90d909b.js"></script>
<script type="text/javascript" src=".././js/index.js"></script>
</body>

// ----- connected scripts in here -------- //
<script type="text/javascript" src=".././js/utilFunctions-1ae3ee4b074ef90d909b.js"></script>
<script type="text/javascript" src=".././js/home.js"></script>
</body>

/----此处连接的脚本----//

我无法在

条目

对象（在

webpack.config.js

中）中添加到

utilFunctions

之后，则包含的部分将包含在每个html文件中

我也不能添加html文件，因为顺序应该是这样的：首先是插件，然后是我自己的函数。

---

请帮助我卡住。

您可以控制webpack导入文件的顺序并手动导入特定文件

<% if(htmlWebpackPlugin.files.chunks.body) { %>
  <script src="<%= htmlWebpackPlugin.files.chunks.body.entry %>"></script>
<% } %>

<script src="home.js"></script>

你也可以在他们的回购协议中找到这个例子，我是这样解决的：

entry: {
    language: path.resolve(__dirname, 'src/scripts/lang.js'),
    config: path.resolve(__dirname, 'src/scripts/config.js'),
    mainFunctions: path.resolve(__dirname, 'src/scripts/utilFunctions.js'),
},

entry: {
    language: path.resolve(__dirname, 'src/scripts/lang.js'),
    config: path.resolve(__dirname, 'src/scripts/conf.js'),
    mainFunctions: path.resolve(__dirname, 'src/scripts/utilFunctions.js'),
    index: path.resolve(__dirname, 'src/scripts/index.js'),
    home: path.resolve(__dirname, 'src/scripts/home.js'),
},

在条目

索引

和

主页

然后在htmlWebpackPlugin中写道：

['index', 'home'].forEach((file) => {
  webpackConfig.plugins.push(
    new HtmlWebpackPlugin({
      filename: `./html/${file}.html`,
      template: `./src/html/${file}.html`,
      chunks:['language','config','mainFunctions', file],
      minify: {
          removeComments: true,
          // collapseWhitespace: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeStyleLinkTypeAttributes: true,
          keepClosingSlash: true,
      },
    })
  );
})

---

我不使用

ejs

。我使用简单的html。这对网页没有关系：）如果你查看我评论中的链接，你会发现也有使用简单的html的问题是网页没有生成最后一个脚本

home.js

。