diff --git a/webpack-react/README.md b/webpack-react/README.md
index 993bbf6..a259348 100644
--- a/webpack-react/README.md
+++ b/webpack-react/README.md
@@ -9,3 +9,6 @@
# Links
* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
+* [Production](https://webpack.js.org/guides/production/)
+* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
+* [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
diff --git a/webpack-react/package.json b/webpack-react/package.json
index 3130dae..204587d 100644
--- a/webpack-react/package.json
+++ b/webpack-react/package.json
@@ -14,13 +14,15 @@
"node": ">=10"
},
"scripts": {
- "start": "webpack serve --config ./webpack.config.js --mode development"
+ "start": "webpack serve --open --config webpack.dev.js",
+ "build": "webpack --config webpack.prod.js"
},
"devDependencies": {
"@babel/core": "^7.18.2",
"@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.17.12",
"babel-loader": "^8.2.5",
+ "html-webpack-plugin": "^5.5.0",
"webpack": "^5.73.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.2",
diff --git a/webpack-react/public/index.html b/webpack-react/public/index.html
index 0411cd4..965d3b5 100644
--- a/webpack-react/public/index.html
+++ b/webpack-react/public/index.html
@@ -1,10 +1,10 @@
+
React Example
-
diff --git a/webpack-react/src/index.js b/webpack-react/src/index.js
index 9565356..eee756b 100644
--- a/webpack-react/src/index.js
+++ b/webpack-react/src/index.js
@@ -1,7 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Home from './pages/home';
-
+//TODO remove debugging
+if (process.env.NODE_ENV !== 'production') {
+ console.log('development mode!');
+}
//since react 18
import { createRoot } from 'react-dom/client';
//create root container
diff --git a/webpack-react/webpack.common.js b/webpack-react/webpack.common.js
new file mode 100644
index 0000000..2ea923a
--- /dev/null
+++ b/webpack-react/webpack.common.js
@@ -0,0 +1,36 @@
+//generate an HTML5 file including all webpack bundles in the body using script tags
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+//path is used to resolve properly across the OS
+const path = require('path');
+module.exports = {
+ //bundle *.js from this entry point
+ entry: path.resolve(__dirname, 'src/index.js'),
+ //create output file to be linked to index.html
+ output: {
+ filename: '[name].bundle.js',
+ path: path.resolve(__dirname, './dist'),
+ clean: true,
+ },
+ module: {
+ rules: [
+ {
+ //test all *.js using babel-loader
+ //test all *.jsx (e.g. React.js) using babel-loader
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ include: path.resolve(__dirname, 'src'),
+ use: ['babel-loader'],
+ }
+ ]
+ },
+ resolve: {
+ extensions: ['*', '.js', '.jsx'],
+ },
+ plugins: [
+ // create an plugin instance so that you can use it several times anywhere
+ new HtmlWebpackPlugin({
+ title: 'Production',
+ template: path.resolve(__dirname, "public/index.html")
+ }),
+ ],
+};
diff --git a/webpack-react/webpack.dev.js b/webpack-react/webpack.dev.js
new file mode 100644
index 0000000..b96558f
--- /dev/null
+++ b/webpack-react/webpack.dev.js
@@ -0,0 +1,14 @@
+//path is used to resolve properly across the OS
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+//merge() calls in the environment-specific configuration to include commons
+module.exports = merge(common, {
+ //set development mode
+ mode: 'development',
+ //enable strong source mapping
+ devtool: 'inline-source-map',
+ devServer: {
+ static: path.resolve(__dirname, 'dist'),
+ },
+});
diff --git a/webpack-react/webpack.prod.js b/webpack-react/webpack.prod.js
new file mode 100644
index 0000000..e47c24a
--- /dev/null
+++ b/webpack-react/webpack.prod.js
@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+module.exports = merge(common, {
+ mode: 'production',
+ //source maps encouraged in production
+ //choose mapping with fairly quick build speed like source-map
+ devtool: 'source-map',
+});