HtmlWebpackPlugin - 在 dist 上创建 html 但 js 链接不起作用

问题描述

我需要你的帮助。

几天前我一直在学习使用 Webpack，但遇到了一个我认为很容易解决的问题。

一切都很好，直到我这样做：

npm i -D html-webpack-plugin

然后

plugins: [new HtmlWebpackPlugin({template: "./src/client/index.html,filename = "./index.html})]

当我使用 npm run build 命令行时，会在 dist 文件夹中创建 index.html。在这个 dist 文件夹中，我还有 main.js。在这个 HTML 文件中，我确实有脚本 src 来访问 js 文件，但问题是它不起作用，而且脚本文件很奇怪……这里是在 index.html 文件中添加的脚本链接 dist 文件夹：

<script defer src="main.js"></script>

由于所有这一步，当我删除原始 index.html 文件上的脚本链接时，没有任何作用。

希望我清楚。

感谢您的帮助。

这里是 webpack.config.js :

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path")
const webpack = require("webpack")
module.exports = {
    entry: "./src/index.js",mode: "none",module: {
        rules: [
            {
            test: /\.js$/,exclude: /node_modules/,loader: "babel-loader"
        }
    ]
    },plugins: [
        new HtmlWebpackPlugin({
            template: "./src/client/index.html",filename: "index.html",})
    ]
}

这是在 dist 文件夹中创建的 index.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.0">
    <title>Document</title>
 
<script defer src="main.js"></script></head>
<body>

</body>
</html>

这是我最初创建的 index.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.0">
    <title>Document</title>
    <script type="text/javascript" src="../../dist/main.js"></script>
</head>
<body>

</body>
</html>

解决方法

您很可能需要像这样添加一个带有 publicPath 的输出哈希：

output: {
    path: path.resolve(__dirname,'dist'),publicPath: '/',}

访问 /main.js 时的脚本是什么样的？

html-webpack-plugin javascript plugins plugins webpack webpack webpack