webpack.config.json
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const config = {
mode: process.env.NODE_ENV ? process.env.NODE_ENV : "development",
module: {
rules: [
{
test: /\.m?(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: [
["@babel/plugin-proposal-class-properties", { loose: true }],
"@babel/plugin-transform-runtime",
],
},
},
},
{
test: /\.s[ac]ss$/i,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: "My React Project",
template: "./src/index.html",
}),
],
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "build"),
},
optimization: {
splitChunks: {
chunks: "all",
},
},
}
module.exports = (env) => {
return config
}
package.json
{
"name": "webpackreact",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"webpack": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"webpack": "^5.33.2"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-transform-runtime": "^7.13.15",
"@babel/preset-env": "^7.13.15",
"@babel/preset-react": "^7.13.13",
"babel": "^6.23.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"css-loader": "^5.2.3",
"html-webpack-plugin": "^5.3.1",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"webpack-cli": "^4.6.0"
}
}