From 35ffd8187e27e177a4337d84af5433768798d571 Mon Sep 17 00:00:00 2001 From: "Begerad, Stefan" Date: Wed, 15 Jun 2022 10:01:59 +0200 Subject: [PATCH] feat(webpack-react): merge prod and dev config into common webpack config --- webpack-react/README.md | 3 +++ webpack-react/package.json | 4 +++- webpack-react/public/index.html | 2 +- webpack-react/src/index.js | 5 ++++- webpack-react/webpack.common.js | 36 +++++++++++++++++++++++++++++++++ webpack-react/webpack.dev.js | 14 +++++++++++++ webpack-react/webpack.prod.js | 8 ++++++++ 7 files changed, 69 insertions(+), 3 deletions(-) create mode 100644 webpack-react/webpack.common.js create mode 100644 webpack-react/webpack.dev.js create mode 100644 webpack-react/webpack.prod.js 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', +});