Outline
my company starts a new React project. so I got a chance to configure it from the beginning. in this blog post, I will introduce how to set Webpack for React project.
on Github, you can see full source code that I use in this blog post.
Prepare Project
execute the command below to prepare a project.
mkdir react_start
cd react_start
npm init -y
Installation
execute the command below to install libraries for React project.
npm install --save react react-dom
npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react rimraf
we’ve installed so many libraries. let’s see one by one.
- react, react-dom: these are React library for the web.
- webpack: this is Webpack library.
- webpack-cli: this library is to controll Webpack by command line.
- html-webpack-plugin: this is Webpack plugin to controll HTML in Webpack
- webpack-dev-server: this is Webpack test server for developing with Webpack on local PC.
- babel-loader: this library is to use babel in Webpack.
- @babel/core: we’ll compile with babel.
- @babel/preset-env: when we compile with babel, we can set the target for the result of the compile with this library.
- @babel/preset-react: compile React by babel.
- rimraf: thie library makes us to remove folder by same command on Mac and Windows both.
package.json Configuration
add the scripts to package.json like below to use Webpack.
{
"name": "react_start",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "webpack-dev-server --mode development",
"prebuild": "rimraf dist",
"build": "webpack --progress --mode production"
},
"author": "[email protected]",
"dependencies": {
"react": "16.8.6",
"react-dom": "16.8.6"
},
"devDependencies": {
"@babel/core": "7.4.5",
"@babel/preset-env": "7.4.5",
"@babel/preset-react": "7.0.0",
"babel-loader": "8.0.6",
"cross-env": "5.2.0",
"html-webpack-plugin": "3.2.0",
"rimraf": "2.6.3",
"webpack": "4.33.0",
"webpack-cli": "3.3.4",
"webpack-dev-server": "3.7.1"
}
}
let’s see the scripts one by one.
webpack-dev-server --mode development,: this script is executed by npm start or npm run start. this script starts Webpack dev server bydevelopmentmode. always, we need to set the mode(developmentorproduction), when we execute Webpack."prebuild": "rimraf dist",: when we executenpm run buildto start build script, this script is executed before starting build script. we can usepreorpostfor starting a script before or after executing the script. I use this script to delete the folder created by build script."build": "webpack --progress --mode production": this is executed by npm run build. this start bundling by Webpack withproductionmode. –progress option is to monitor the build process.
Webpack Configuration
create webpack.config.js file in the root folder for React project.
// react_start/webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
'js/app': ['./src/App.jsx'],
},
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '/',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: ['babel-loader'],
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
}),
],
};
let’s see details of Webpack configurations.
const path = require('path');
load(import) path for referring the absolute path.
const HtmlWebpackPlugin = require('html-webpack-plugin');
load(import) the plugin for controlling HTML by Webpack.
entry: {
'js/app': ['./src/App.jsx'],
},
this configuration is for the entry file of the bundle file. the bundle file will be created named app.js under js folder. this file will be bundled(combined) started from ./src/App.jsx entry file.
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '/',
},
the bundle file will be created in ./dist/ folder. publicPath is set for that other files(like HTML) refer the bundle file by / standard.(ex> <script type="text/javascript" src="/js/app.js"></script>)
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: ['babel-loader'],
exclude: /node_modules/,
},
],
},
we will build React file(jsx and js) by using babel.
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
}),
],
lastly, create index.html on dist by using ./src/index.html. when the file is created, add the bundle fil(js/app.js) created by Webpack on it.
babel Configuration
create .babelrc and modify it like below to configure babel.
{
"presets": [
[
"@babel/preset-env",
{ "targets": { "browsers": ["last 2 versions", ">= 5% in KR"] } }
],
"@babel/react"
]
}
we set targets in babel compile. this configuration makes complied file to support two higer version of the browser(ex: IE 11, 10), and browsers shared over 5% in Korea. you can also use “>= 5%” for the world. also, we’ve set "@babel/react" to compile React.
Create HTML
create ./src/index.html and modify it like below to use HTML for React.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
our React code will be inserted in <div id="app"></div>.
Create React
finally, we make React file. create and modify ./src/App.jsx like below.
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return <h1>Hello World!</h1>;
};
ReactDOM.render(<App />, document.getElementById('app'));
Check
execute the command below to check our configuration and React worked well.
npm start
and open the browser and go to http://localhost:8080/. you can see Hello World! on the screen. we can add --open option like "start": "webpack-dev-server --mode development --open", instated of "start": "webpack-dev-server --mode development", in package.json script to open the browser and move http://localhost:8080/ automatically when npm start is executed.
kill the test server process, and execute the command below to build.
npm run build
we can see ./dist/ folder created, and index.html, js/app.js created in there. also when you open index.html file, you can see <script type="text/javascript" src="/js/app.js"></script> is added automatically instead of index.html created by us.
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
