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

Question

我需要你的帮助。

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

在我这样做之前，一切都运行良好：

npm i -D html-webpack-plugin

然后

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

当我使用npm run build命令行时， index.html 在 dist 文件夹中创建。 在这个 dist 文件夹中，我还有 main.js。 在这个 HTML 文件上，我确实有脚本 src 来访问 js 文件，但问题是它不起作用并且脚本文件很奇怪......这是在索引中添加的脚本链接。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>

Answer 1

您很可能需要在其中添加带有 publicPath 的 output hash ，如下所示：

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

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

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

问题描述

1 个解决方案

解决方案1
0 2021-03-15 16:41:43

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

问题描述

1 个解决方案

解决方案1 0 2021-03-15 16:41:43

解决方案1
0 2021-03-15 16:41:43