dancingCycle
/
sandbox-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(webpack-react): merge prod and dev config into common webpack config

This commit is contained in:
dancingCycle 2022-06-15 10:01:59 +02:00
parent ee698001fa
commit 35ffd8187e
7 changed files with 69 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
webpack-react/README.md
View File

@ -9,3 +9,6 @@
# Links # Links
* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k) * [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/)

4
webpack-react/package.json
View File

@ -14,13 +14,15 @@
"node": ">=10" "node": ">=10"
}, },
"scripts": { "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": { "devDependencies": {
"@babel/core": "^7.18.2", "@babel/core": "^7.18.2",
"@babel/preset-env": "^7.18.2", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.17.12", "@babel/preset-react": "^7.17.12",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.73.0", "webpack": "^5.73.0",
"webpack-cli": "^4.9.2", "webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.2", "webpack-dev-server": "^4.9.2",

2
webpack-react/public/index.html
View File

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8">
<title>React Example</title> <title>React Example</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script src="./bundle.js"></script>
</body> </body>
</html> </html>

5
webpack-react/src/index.js
View File

@ -1,7 +1,10 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import Home from './pages/home'; import Home from './pages/home';
//TODO remove debugging
if (process.env.NODE_ENV !== 'production') {
console.log('development mode!');
}
//since react 18 //since react 18
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
//create root container //create root container

36
webpack-react/webpack.common.js Normal file
View File

@ -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")
}),
],
};

14
webpack-react/webpack.dev.js Normal file
View File

@ -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'),
},
});

8
webpack-react/webpack.prod.js Normal file
View File

@ -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',
});