React + Webpack + Babel
Thu Aug 04 2022 08:50:46 GMT+0000 (UTC)
Saved by @jen_magpantay #javascript #react.js
// React with webpack and babel configuration, to support Sass and SVG files // npm init to initialize the project, then install packages // set project structure similar to CRA // index.jsx and App.jsx following same of CRA // package.json { "name": "something project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "npm run start & npx webpack serve", "build": "cross-env NODE_ENV=production webpack", }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@babel/cli": "^7.18.10", "@babel/core": "^7.18.10", "@babel/preset-env": "^7.18.10", "@babel/preset-react": "^7.18.6", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7", "babel-loader": "^8.2.5", "cross-env": "^7.0.3", "css-loader": "^6.7.1", "dotenv": "^16.0.1", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.5.0", "react-refresh": "^0.14.0", "sass": "^1.54.1", "sass-loader": "^13.0.2", "style-loader": "^3.3.1", "svg-url-loader": "^7.1.1", "webpack": "^5.74.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.9.3" } } //webpack.config.js const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); const isDevelopment = process.env.NODE_ENV !== "production"; module.exports = { mode: isDevelopment ? "development" : "production", devtool: isDevelopment ? "eval-source-map" : "source-map", entry: path.resolve(__dirname, "src", "index.jsx"), output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", }, resolve: { extensions: [".js", ".jsx"], }, module: { rules: [ { test: /\.jsx$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { plugins: [ isDevelopment && require.resolve("react-refresh/babel"), ].filter(Boolean), }, }, }, { test: /\.css$/, exclude: /node_modules/, use: ["style-loader", "css-loader"], }, { test: /\.scss$/, exclude: /node_modules/, use: ["style-loader", "css-loader", "sass-loader"], }, { test: /\.svg$/, use: [ { loader: "svg-url-loader", options: { limit: 10000, }, }, ], }, { test: /\.(png|jpe?g|gif)$/i, use: [ { loader: "file-loader", options: { name: "images/[hash]-[name].[ext]", }, }, ], }, ], }, plugins: [ isDevelopment && new ReactRefreshWebpackPlugin(), new HtmlWebpackPlugin({ template: path.resolve(__dirname, "public", "index.html"), }), ].filter(Boolean), devServer: { // contentBase: path.join(__dirname, "public") // renamed to 'static' static: path.join(__dirname, "public"), hot: true, }, }; // babel.config.js module.exports = { presets: [ "@babel/preset-env", ["@babel/preset-react", { runtime: "automatic" }], ], };
Comments