Link 带有 HtmlWebpackPlugin 的静态 JS 文件

Question

我正在使用自定义 webpack 配置构建应用程序。

我已经将 HtmlWebpackPlugin 与自定义 index.html 集成在一起，如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Text Mining</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

      new HtmlWebpackPlugin({
        inject: true,
        filename: './index.html',
        template: './public/index.html',
        favicon: './public/favicon.ico',
        scripts: ['./public/static/js/env.js']
      }),

我假设在脚本数组中添加我的静态 js 文件的路径会将 env.js 复制到已编译的 html 中，但我看不到它。

我是否需要从 public 文件夹中复制另一个插件，或者我是否缺少其他内容？

Answer 1

我不确定这是否是一个好的解决方案，但我最近使用 copy-webpack-plugin 解决了类似的问题。也许这会对你有所帮助。

Link 带有 HtmlWebpackPlugin 的静态 JS 文件

Link a static JS file with HtmlWebpackPlugin

javascript

node.js

webpack

webpack-dev-server

fs