// 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