每个 html 文件都包含它自己的 js 脚本

Question

我有一个像这样的 webpack 配置 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'),
},

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>

所以在编译后HtmlWebpackPlugin生成一个这样的结构：

<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>


<script type="text/javascript" src=".././js/language-82d9013312d51ba09842.js"></script>
<script type="text/javascript" src=".././js/vendors~config-620ba3d9ae4472f968ab.js"></script>
<script type="text/javascript" src=".././js/config-28c647d3bd0894bac005.js"></script>
<script type="text/javascript" src=".././js/utilFunctions-1ae3ee4b074ef90d909b.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>

在home.html

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

我无法在 entry 对象（webpack.config.js 内部）中的 utilFunctions 之后添加，然后包含的部分将在每个 html 文件中。

我也不能添加 html 文件，因为顺序应该像 this:First 插件然后是我自己的函数。请帮助我卡住了。

Answer 1

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

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

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

你也可以在他们的仓库中找到这个例子 https://github.com/jaketrent/html-webpack-template/blob/86f285d5c790a6c15263f5cc50fd666d51f974fd/index.html

Answer 2

我是这样解决的：

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

在条目 index 和 home

中添加了另外两个块

然后在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,
      },
    })
  );
})

每个 html 文件都包含它自己的 js 脚本

Each html file include it's own js script

webpack

webpack-4