虽然已经有了create-react-app这种非常方便的工具，但是封装了太多，对于里面的一些细节不是很了解，所以很有必要手动创建。
创建项目目录
mkdir react-project
cd react-project初始化package.json
yarn init在填写回答的时候，entry point写app/main.js，其他问题全部回车即可
~ yarn init
yarn init v1.12.3
question name (react-project):
question version (1.0.0):
question description:
question entry point (index.js): app/main.js
question repository url:
question author:
question license (MIT):
question private:
success Saved package.json
✨ Done in 16.91s.安装依赖
yarn add --dev webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin webpack-merge babel-loader
yarn add react react-dom prop-types创建目录结构
/---babel.config.js
+---app
| \---main.js
| \---index.html
+---build
| \---webpack.config.base.js
| \---webpack.config.dev.js
| \---webpack.config.prod.jdbabel.config.js
module.exports = {
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry",
"targets": {
"browsers": [
"cover 99.5% in CN"
]
}
}
],
"@babel/preset-react"
]
}app/main.js
import ReactDOM from "react-dom";
import React from "react";
function App() {
return (
<div className="App">
<h1>Hello World</h1>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App/>, rootElement);app/index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>build/webpack.config.base.js
"use strict";
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: path.resolve(__dirname, "../app/main.js"),
output: {
path: path.resolve(__dirname, "../dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "app/index.html"
})
]
};build/webpack.config.dev.js
"use strict";
var baseWebpackConfig = require("./webpack.config.base");
var merge = require("webpack-merge");
module.exports = merge(baseWebpackConfig, {
mode: "development",
devtool: "source-map"
});build/webpack.config.prod.js
"use strict";
var baseWebpackConfig = require("./webpack.config.base");
var merge = require("webpack-merge");
var path = require("path");
module.exports = merge(baseWebpackConfig, {
mode: "production",
output: {
path: path.resolve(__dirname, "../dist"),
filename: "bundle.[hash].js"
}
});package.json里加scripts
"scripts": {
"build:dev": "webpack --config build/webpack.config.dev.js",
"build:prod": "webpack --config build/webpack.config.prod.js"
}编译代码
做完上面的所有步骤就可以执行编译命令了，yarn build:dev或者yarn build:prod
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。