3

我正在学习 webpack js；下面的示例中，培训师将 html 页面从 src 文件夹加载到目标 ( dist) 文件夹。我正在尝试同样的事情，但在Webpack5. 我创建了一个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)

所以我玩弄Script了 HTML 文件中的标签（如下所示），

<!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 是个好主意还是坏主意？

包.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"
  }
}

谢谢！

4

0 回答 0