javascript - Webpack 一个合适的加载器来处理这种文件类型

Question

我正在使用 webpack 和 React。我已经为生产和开发设置了配置。我在 src/index.js 文件中收到此错误:

./src/index.js 11:1 中出现错误 模块解析失败:意外的标记 (11:1) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loaders

index.js

import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.min.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    // <React.StrictMode>
    <App />
    // </React.StrictMode>
);

reportWebVitals();

package.json

    "name": "client",
    "version": "0.1.0",
    "private": true,
    "proxy": "http://127.0.0.1:9000",
    "dependencies": {
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "axios": "^1.1.2",
        "bootstrap": "^5.1.0",
        "bootstrap-css-only": "^4.4.1",
        "dotenv": "^16.0.3",
        "history": "^5.3.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-router-dom": "^6.4.2",
        "react-scripts": "5.0.1",
        "react-twitter-login": "^1.5.0",
        "reactstrap": "^9.1.4",
        "universal-cookie": "^4.0.4",
        "web-vitals": "^2.1.4",
        "webpack": "^5.75.0",
        "webpack-cli": "^4.10.0"
    },
    "scripts": {
        "start": "webpack serve",
        "build": "webpack",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "@babel/core": "^7.20.2",
        "@babel/preset-env": "^7.20.2",
        "@babel/preset-react": "^7.18.6",
        "babel-loader": "^9.1.0",
        "clean-webpack-plugin": "^4.0.0",
        "css-loader": "^6.7.2",
        "node-sass": "^7.0.3",
        "postcss-loader": "^7.0.1",
        "postcss-preset-env": "^7.8.3",
        "saas": "^1.0.0",
        "sass-loader": "^13.2.0",
        "style-loader": "^3.3.1",
        "webpack-dev-server": "^4.11.1"
    }
}

webpack.common.js

const path = require("./path");

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const paths = require("./paths");

module.exports = {
    // Where webpack looks to start building the bundle
    entry: [paths.src + "/index.js"],

    // Where webpack outputs the assets and bundles
    output: {
        path: paths.build,
        filename: "[name].bundle.js",
        publicPath: "/",
    },

    // Customize the webpack build process
    plugins: [
        // Removes/cleans build folders and unused assets when rebuilding
        new CleanWebpackPlugin(),

        // Copies files from target to destination folder
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: paths.public,
                    to: "assets",
                    globOptions: {
                        ignore: ["*.DS_Store"],
                    },
                    noErrorOnMissing: true,
                },
            ],
        }),

        // Generates an HTML file from a template
        // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
        // new HtmlWebpackPlugin({
        //  title: "webpack Boilerplate",
        //  favicon: paths.src + "/images/favicon.png",
        //  template: paths.src + "/template.html", // template file
        //  filename: "index.html", // output file
        // }),
    ],

    // Determine how modules within the project are treated
    module: {
        rules: [
            // JavaScript: Use Babel to transpile JavaScript files
            { test: /\.(js|jsx)$/, use: ["babel-loader"] },

            // Images: Copy image files to build folder
            { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: "asset/resource" },

            // Fonts and SVGs: Inline files
            { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: "asset/inline" },
        ],
    },

    resolve: {
        modules: [paths.src, "node_modules"],
        extensions: [".js", ".jsx", ".json"],
        alias: {
            "@": paths.src,
            assets: paths.public,
        },
    },
};

webpack.dev.js

const { merge } = require("webpack-merge");

const common = require("./webpack.common");

module.exports = merge(common, {
    // Set the mode to development or production
    mode: "development",

    // Control how source maps are generated
    devtool: "inline-source-map",

    // Spin up a server for quick development
    devServer: {
        historyApiFallback: true,
        open: true,
        compress: true,
        hot: true,
        port: 3000,
    },

    module: {
        rules: [
            // Styles: Inject CSS into the head with source maps
            {
                test: /\.(sass|scss|css)$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: { sourceMap: true, importLoaders: 1, modules: false },
                    },
                    { loader: "postcss-loader", options: { sourceMap: true } },
                    { loader: "sass-loader", options: { sourceMap: true } },
                ],
            },
        ],
    },
});

.babelrc

{
    "presets": ["@babel/preset-env","@babel/preset-react", "react"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
  }

./public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

是一个react类组件 webpack.common.js、webpack.dev.js、webpack.prod.js 都在一个文件夹“config”中

Answer 1

您的 npm 脚本未针对您的配置文件。

    "scripts": {
        "start": "webpack serve --config webpack.dev.js",
        "build": "webpack --config webpack.prod.js",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },