Webpack：加载 index.html - 模块构建失败，未知：意外令牌 (3:61) (import.meta.url)

问题描述

我正在学习 webpack js；下面是一个示例，其中训练器将 html 页面从 src 文件夹加载到目标 (dist) 文件夹。我正在尝试同样的事情，但在 Webpack5 上。我创建了一个 config 文件夹并从 config 文件夹运行以下 webpack.dev.js。

Webpack.dv.js

const path = require("path");
module.exports = {
    entry: {
        main: ["./src/main.js"]
    },mode: "development",output: {
        filename: "[name]-bundle.js",path: path.resolve(__dirname,"../dist"),publicPath: "/"
    },devServer: {
        contentBase: "dist",overlay: true
    },module: {
        rules: [
            {
                test: /\.css$/i,use: [
                    {
                        loader: "style-loader"
                    },{
                        loader: "css-loader"
                    }
                ]
            },{
                test: /\.html$/i,use: [
                    {
                        loader: "file-loader",options: {
                            name: "[name].html"
                        }
                    },{
                        loader: "extract-loader"
                    },{
                        loader: "html-loader",}
                ]
            }
        ]
    }
};

执行 yarn serve --config=config/webpack.dev.js 命令时，出现以下错误，

./src/index.html 39 字节 [内置] [代码生成] [1 个错误]

ERROR in ./src/index.html
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
SyntaxError: unknown: Unexpected token (3:61)
  1 | // Imports
  2 | import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../node_modules/html-loader/dist/runtime/getUrl.js";
> 3 | var ___HTML_LOADER_IMPORT_0___ = new URL("./main-bundle.js",import.meta.url);
    |                                                              ^
  4 | // Module
  5 | var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
  6 | var code = "<!DOCTYPE html>\n<html>\n    <head>\n        <title>Testing Webpack with Yarn!</title>\n    </head>\n    <body>\n        <div class=\"profile\">\n            <h1>Hello World!</h1>\n        </div>\n        <script src=\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\"></script>\n    </body>\n</html>";
    at Parser.pp$5.raise (/Users/syedahmedhussain/Documents/workspaces/Webpack/YarnWebpackMix/node_modules/babylon/lib/index.js:4454:13)
    at Parser.pp.unexpected (/Users/syedahmedhussain/Documents/workspaces/Webpack/YarnWebpackMix/node_modules/babylon/lib/index.js:1761:8)
    at Parser.pp$3.parseExprAtom (/Users/syedahmedhussain/Documents/workspaces/Webpack/YarnWebpackMix/node_modules/babylon/lib/index.js:3627:50)
    at Parser.pp$3.parseExprSubscripts (/Users/syedahmedhussain/Documents/workspaces/Webpack/YarnWebpackMix/node_modules/babylon/lib/index.js:3494:19)

所以我在 HTML 文件中使用了 Script 标签（如下所示），

<!DOCTYPE html>
<html>
    <head>
        <title>Testing Webpack with Yarn!</title>
    </head>
    <body>
        <div class="profile">
            <h1>Hello World!</h1>
        </div>
        <script src="main-bundle.js"></script>
    </body>
</html>

事实证明，如果我删除 <script> 标签，项目构建良好，但没有任何内容复制到 dist 文件夹。有人可以指出上述配置有什么问题吗？我错过了什么或者我能做些什么来完成这项工作？还请指出为什么从 src 加载 index.html 是好还是坏的主意？

package.json：

{
  "name": "name-this-anything","version": "1.0.0","main": "index.js","license": "MIT","scripts": {
    "start": "webpack serve --config=config/webpack.dev.js"
  },"devDependencies": {
    "css-loader": "^5.2.5","extract-loader": "^5.1.0","file-loader": "^6.2.0","html-loader": "^2.1.2","style-loader": "^2.0.0","webpack": "^5.37.1","webpack-cli": "^4.7.0","webpack-dev-middleware": "^4.3.0","webpack-dev-server": "^3.11.2"
  }
}

谢谢！

解决方法

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

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

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

javascript webpack webpack webpack-5 webpack-html-loader

Webpack：加载 index.html - 模块构建失败，未知：意外令牌 (3:61) (import.meta.url)

问题描述

解决方法

相关问答