HtmlWebpackPlugin:脚本文件的错误哈希被注入到 html 文件中

问题描述

我正在尝试使用 HtmlWebpackPlugin 生成 .HTML 文件

当使用 webpack 运行构建时,我得到这个问题,即 HTML 文件中脚本标签的 src 与脚本文件名不同

这是我的 webpack 配置:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: { index: path.resolve(__dirname,'../src/index.js') },output: {
    filename: 'bundle.[fullhash].js',path: path.resolve(__dirname,'../dist/'),},devtool: 'source-map',plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname,'../src/index.html'),minify: true,}),],module: {
    rules: [
      // HTML
      {
        test: /\.(html)$/,use: ['html-loader'],// JS
      {
        test: /\.js$/,exclude: /node_modules/,use: ['babel-loader'],// CSS
      {
        test: /\.css$/,use: ['style-loader','css-loader'],// Images
      {
        test: /\.(jpg|png|gif|svg)$/,use: [
          {
            loader: 'file-loader',options: {
              outputPath: 'assets/images/',};


这是生成的 HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <Meta charset="UTF-8" />
    <Meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <Meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Document</title>
    <script
      defer="defer"
      src="bundle.3d5baadb547d13677f00.js?3d5baadb547d13677f00"
    ></script>
  </head>
  <body>

    <script src="1ec740dc7ce75155c1fd.js"></script>
  </body>
</html>

这是我的 dist 文件夹:

dist-folder

如您所见,bundle 文件名称是可以的,但是正文的 and 处的脚本标记的 src 错误

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)