Home>
javascript : Why do I get a jsx file instead of js after building a project with webpack using babel
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"
{ test: /.(jsx?)$/, use: ["babel-loader"] },
Nikita2022-02-13 21:03:56Related questions
- javascript : export 'default' (imported as 'Vue') was not found in 'vue'
- javascript : React. Unloading ads for 10 pieces
- javascript : How to restart an existing React app?
- javascript : How to display webpack build error messages on a website
- javascript : Why is there an error when installing Webpack?
- javascript : The simplest code on React.js does not work
- javascript : React. Send a get request to the server when pressing Enter
- javascript : Running webPack 5 in development mode does not see html page
- javascript : Problem with Route
fixed the script check, nothing changed :)
Nikita2022-02-13 21:03:27