调试 webpack 之 html-webpack-plugin调试 html-webpack-plugin , 调试

正文

修改 index.html , 在其中增加 <% debugger %>, 如下:

<!doctype html>
<html lang="zh" data-portal="<%= portal %>">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <% for (let index in htmlWebpackPlugin.files.css) { %>
    <link
      rel="stylesheet"
      href="<%= htmlWebpackPlugin.files.css[index] + '?fh=' + compilation.fullHash.substring(0, 8) + '&oh=\<%= oh %\>' %>"
      integrity="<%= htmlWebpackPlugin.files.cssIntegrity[index] %>"
      crossorigin="<%= webpackConfig.output.crossOriginLoading %>"
      nonce="<%= '\<%= nonce %\>' %>"
    />
    <% } %>
    <!-- your meta info -->
  </head>
  <body class="bg-default text-primary print:bg-inherit">
    <div id="root" class="relative grid h-full grid-rows-1"></div>
    <% debugger %>
  </body>
</html>

在 VSCODE TERMINAL (快捷键 Ctrl + ` ) 中增加 JavaScript Debug Terminal 终端

3. 然后在这个终端跑 build 一会就会进入这个断点，就可以开心的调试了~

附参考

html-webpack-plugin 解析 template(也就是 index.html) 使用的库是 lodash, API 参见 _.template