3

私はwebpack jsを学んでいます。トレーナーが src フォルダーから宛先 ( dist) フォルダーに html ページをロードする例に従います。私は同じことをしようとしていますが、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