通过<script>标记将JQuery插入webpack 4生成的HTML文件

Question

我将Webpack 4用作任务捆绑器，并且正在通过Webpack管理所有资源和资产。
由于Drupal集成的原因，我被要求只将JQuery之类的所有js资源作为常规标签包含到HTML文件中。
当我出于某种原因包含脚本标签时，生成的HTML文件将不会加载js文件，从而给我一个 404 错误。

这是我现在将js添加到HTMLs文件中的方式：

  



<脚本
  src =“ ./ js / jquery-2.1.4.js”
  完整性=“ sha256-siFczlgw4jULnUICcdm9gjQPZkw / YPDqhQ9 + nAOScE4 =”
  crossorigin =“ anonymous”>


<链接
  rel =“ stylesheet”
  href =“ <％= htmlWebpackPlugin.files.chunks.main.css％>”
/>

 

这是我的webpack配置文件：

  const path = require（“ path”）;
const HtmlWebpackPlugin = require（“ html-webpack-plugin”）;
const globImporter = require（“ node-sass-glob-importer”）;
const MiniCssExtractPlugin = require（“ mini-css-extract-plugin”）;
const CleanWebpackPlugin = require（“ clean-webpack-plugin”）;

module.exports = {
  条目：{
    main：“ ./ src / js / scripts.js”，
    应用程序：“ ./ src / js / app.js”
  }，
  输出：{
    文件名：“ js / [名称]。[哈希] .js”，
    路径：path.resolve（__ dirname，“ dist”）
  }，
  模块：{
    规则：[
      {
        测试：/ \。js $ /，
        排除：/ node_modules /，
        采用： {
          加载程序：“ babel-loader”
        }
      }，
      {
        测试：/ \。scss $ /，
        采用： [
          {
            loader：“样式加载器”，
            选项：{
              sourceMap：true
            }
          }，
          MiniCssExtractPlugin.loader，
          {
            加载程序：“ css-loader”，
            选项：{
              网址：false，
              sourceMap：true
            }
          }，
          {
            loader：“ postcss-loader”，
            选项：{
              sourceMap：true
            }
          }，
          {
            加载程序：“ sass-loader”，
            选项：{
              进口商：globImporter（），
              sourceMap：true
            }
          }
        ]
      }，
      {
        测试：/\.(png|jpg|gif|svg)$/，
        采用： {
          加载器：“文件加载器”，
          选项：{
            名称：“图像/ [名称]。[ext]”
          }
        }
      }
    ]
  }，
  devServer：{
    端口：8080，
    contentBase：“ dist”，
    重叠：正确
  }，
  devtool：“源地图”，
  插件：[
    新的CleanWebpackPlugin（“ dist”，{}），
    新的MiniCssExtractPlugin（{
      文件名：“ css / style。[contenthash] .css”
    }），
    新的HtmlWebpackPlugin（{
      模板：“ ./ src / index.html”，
      注入：错误，
      哈希：true，
      档名：“ index.html”
    }），
    新的HtmlWebpackPlugin（{
      模板：“ ./ src / home.html”，
      注入：错误，
      哈希：true，
      档名：“ home.html”
    }），
    新的HtmlWebpackPlugin（{
      模板：“ ./ src / coneix-imi.html”，
      注入：错误，
      哈希：true，
      档名：“ coneix-imi.html”
    }）
  ]
};
 

所有这些js文件确实位于js文件夹中，而在开发环境中工作时却遇到这些错误。任何帮助将不胜感激。