Home>

In the build folder I get a jsx file which is a stupid copy of the index.jsx input file. It creates 2 html files, didn’t assemble the styles at all, and at the end there is nothing in main.bundle.js (The console didn’t give any errors, all the necessary packages are installed) What could be the reason?

CONSOLE:

The final build folder:

Webpack.config.js configuration file

const path= require("path")
const webpack= require("webpack")
const { CleanWebpackPlugin }= require("clean-webpack-plugin")
const HtmlWebpackPlugin= require("html-webpack-plugin")
const MiniCssExtractPlugin= require("mini-css-extract-plugin")
module.exports= ( env, args )=> {
    const isProduction= args.mode=== "production"
    const config= {
        entry: "./src/index.jsx",
        output: {
            filename: "[name].bundle.js",
            path: path.join(__dirname, "build"),
            publicPath: "/"
        },
        module: {
            rules: [
                {
                    test: /.(js?x)$/,
                    use: ["babel-loader"]
                },
                {
                    test: /.s?css$/,
                    use: [
                        isProduction? MiniCssExtractPlugin.loader : "style-loader",
                        "css-loader",
                        "sass-loader"
                    ]
                },
                {
                    test: /.(ico|jpg|jpeg|png|webp)$/,
                    use: ["url-loader"]
                },
                {
                    test: /.(svg|eot|ttf|woff|)$/,
                    use: ["file-loader"]
                }
            ]
        },
        plugins: [
            new webpack.ProgressPlugin(),
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
                template: "./public/index.html"
            })
        ],
        resolve: {
            extensions: [".js", ".jsx"]
        }
    }
    if (isProduction) {
        config.plugins.push(
            new MiniCssExtractPlugin({
                template: "[name].css"
            })
        )
    }
    return config
}

.babelrc configuration file

{
    "presets": [
        ["@babel/preset-env", {
            "targets": "> one%",
            "useBuiltIns": "usage",
            "corejs": 3
        }],
        "@babel/preset-react"
    ],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

Build command:

"build": "webpack --mode production"

fixed the script check, nothing changed :)

Nikita2022-02-13 21:03:27

{ test: /.(jsx?)$/, use: ["babel-loader"] },

Nikita2022-02-13 21:03:56