I am at windows Built in the environment ,ios Self exploration .
Code address PreByter <https://github.com/Tomny2016/react-project>

<> Project initialization

The first is project initialization , Be sure to install node perhaps yarn Either ,
npm init // perhaps yarn init
The package.json file , This file contains a description of the project , Version number , author , Project address, etc . Of course, there's always a return here . So don't worry .

<> install webpack
yarn add webpack webpack-cli -D // or npm install --save-dev webpack
Here's an explanation ( Personal understanding only )
--save-dev Is to install the dependency into the development environment , That is to say package.json Medium devDependencies Under the table of contents .--save It is installed in the production environment, that is, in the
package.json Medium dependencies Under the table of contents . In the same way -D Is install to development dependency .-S Is installed to the production dependency .

<> establish webpack configuration file

* Create in the root directory build folder , Create three new webpack.base.conf,webpack.dev.conf,
webpack.prod.conf Of js. They are public configuration , Development configuration , Production configuration .
webpack Document address for webpack <https://www.webpackjs.com/>; It has a detailed explanation . //
webpack.base.conf.js file const path = require('path'); //node.js Self contained path parameters const
DIST_PATH = path.resolve(__dirname, '../dist'); // Production catalogue const APP_PATH =
path.resolve(__dirname, '../src'); // Source file directory module.exports = { entry: { app:
'./src/index.js', }, output: { filename: 'js/[name].[hash].js', // use hash Mark
path: DIST_PATH }, },
Because of the split 3 Configuration files are required webpack-merge To merge , Of course, you can put it in one configuration without using the same one .
npm install --save-dev webpack-merge
stay ** webpack.prod.conf.js** It's used inside
// webpack.prod.conf.js file const merge = require('webpack-merge'); // Merge configuration
const baseWebpackConfig = require('./webpack.base.conf'); module.exports =
merge(baseWebpackConfig, { mode: 'production', //mode yes webpack4 New mode });
<> Create in root src catalog , Then create index.js Documents and index.html
const element =document.getElementById('root'); element.innerHTML = 'hello,
<> Create a public folder , Then create a new one index.html file
<!-- index.html --> // index.html <!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8"> <title>webpack4+react+antd Build from scratch React Scaffolding </title> </head>
<body> <div id="root"></div> <script src="../dist/js/bundle.js"></script>
</body> </html>
<> Current directory tree
|- /src |- index.js |- /node_modules |- /public |- index.html |- /build |-
webpack.base.conf.js |- webpack.prod.conf.js |- package.json |-
<> stay package.json file scripts Property to add a build command
// package.json "scripts": { "build": "webpack --config
build/webpack.prod.conf.js", "test": "echo \"Error: no test specified\" && exit
1" },
Don't run it yet , The operation will also report an error .

<> install React
yarn add react react-dom -S
The official documentation also gives some guidance to add in a minute -react
Yes index.js Edit
import React from "react"; import ReactDom from "react-dom"; ReactDom.render(
<h1>hello, world!</h1>, document.getElementById("root") );
be careful ,react Using es6, Here you need to convert the code to es5, So it needs to be installed babel.
Babel Official document address of Babel <https://babel.docschina.org/>. There are also bable stay webpack Introduction to the configuration of babel
in webpack <https://babel.docschina.org/setup#installation>. Yes react Introduction to babel in
react <https://babel.docschina.org/docs/en/babel-preset-react>.

<> install Babel
npm install --save-dev babel-loader babel-core babel-preset-env
Create in root .babelrc file , to configure presets.
{ "presets": [ "env", "react" ] }
<> Then modify it webpack.base.conf.js file
// webpack.base.conf.js const path = require('path'); const APP_PATH =
path.resolve(__dirname, '../src'); const DIST_PATH = path.resolve(__dirname,
'../dist'); module.exports = { entry: { app: './app/index.js' }, output: {
filename: 'js/bundle.js', path: DIST_PATH }, module: { rules: [ { test:
/\.js?$/, use: "babel-loader", include: APP_PATH } ] } };
function npm run build

Then there will be all kinds of wonderful mistakes . I was just in the middle of babel from 6.x Version upgrade to 7.x In the version , So there are some plug-ins npm There is no upgrade in curry , Google for a long time , It's a foreign brother ,babel Is caused by incompatible versions of .
So the version is degraded here ,pack.json Code in
"babel-cli": "^6.26.0", "babel-core": "^6.26.3", "babel-loader": "^7.0.2",
"babel-plugin-import": "^1.9.1", "babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
It's miraculous .

<>webpack Plug in for


Automatic production html File for .

install HtmlWebpackPlugin
npm install --save-dev html-webpack-plugin
modify public Medium html File for
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
name="viewport" content="width=device-width, initial-scale=1.0"> <meta
http-equiv="X-UA-Compatible" content="ie=edge"> <title> <%=
htmlWebpackPlugin.options.title %> </title> </head> <body> </body> </html>
webpack.prod.conf.js Medium configuration plugins attribute
const merge = require('webpack-merge'); const baseWebpackConfig =
require('./webpack.base.conf.js'); const HtmlWebpackPlugin =
require('html-webpack-plugin'); module.exports = merge(baseWebpackConfig, {
mode: 'production', plugins: [ new HtmlWebpackPlugin({ template:
'public/index.html', title: 'PresByter', // change HTML Of title Content of minify: {
removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true },
}), ] });
import React from "react"; import ReactDom from "react-dom"; const Div =
document.createElement("div"); Div.setAttribute("id", "root")
document.body.appendChild(Div) ReactDom.render( <div> <h1>hello, world!333</h1>
</div>, document.getElementById("root") );
This will load automatically js It's a document .
sure yarn run build