webpack4+react+antd从零搭建React脚手架（一） - 好文

本人是在windows环境下搭建的，ios自行摸索。
代码地址PreByter <https://github.com/Tomny2016/react-project>

<>项目初始化

首先就是项目初始化，一定确保安装node或者yarn二者均可，
npm init //或者 yarn init
此时会生成package.json文件，这个文件包含的项目描述，版本号，作者，项目地址等等。当然这里是一直回车的。所以不用在意的。

<>安装webpack
yarn add webpack webpack-cli -D // or npm install --save-dev webpack
webpack-cli
这里解释一下（仅限个人理解）
--save-dev是将依赖安装到开发环境中，即在package.json中的devDependencies目录下。--save是安装到生产环境中也就是在
package.json中的dependencies目录下。同理-D是安装到开发依赖。-S是安装到生产依赖。

<>建立webpack配置文件

* 在根目录下建立build文件夹，分别新建三个名为的webpack.base.conf、webpack.dev.conf、
webpack.prod.conf的js。分别是公共配置，开发配置，生产配置。
webpack的文档地址webpack <https://www.webpackjs.com/>;里面有详细的解释。 //
webpack.base.conf.js 文件 const path = require('path'); //node.js自带的路径参数 const
DIST_PATH = path.resolve(__dirname, '../dist'); //生产目录 const APP_PATH =
path.resolve(__dirname, '../src'); //源文件目录 module.exports = { entry: { app:
'./src/index.js', }, output: { filename: 'js/[name].[hash].js', //使用hash进行标记
path: DIST_PATH }, },
这里因为分成3个配置文件所以需要webpack-merge来进行合并，当然也可以不使用同一放到一个配置里。
npm install --save-dev webpack-merge
在 ** webpack.prod.conf.js** 里面使用
// webpack.prod.conf.js 文件 const merge = require('webpack-merge'); //合并配置
const baseWebpackConfig = require('./webpack.base.conf'); module.exports =
merge(baseWebpackConfig, { mode: 'production', //mode是webpack4新增的模式 });
<>在根目录下创建src目录，然后创建index.js文件和index.html
const element =document.getElementById('root'); element.innerHTML = 'hello,
world!';
<>在根目录创建一个public文件夹，然后新建一个index.html文件
 // index.html <!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8"> <title>webpack4+react+antd从零搭建React脚手架</title> </head>
<body> <div id="root"></div> <script src="../dist/js/bundle.js"></script>
</body> </html>
<>当前的目录树
|- /src |- index.js |- /node_modules |- /public |- index.html |- /build |-
webpack.base.conf.js |- webpack.prod.conf.js |- package.json |-
package-lock.json
<>在package.json文件 scripts属性添加一个build命令
// package.json "scripts": { "build": "webpack --config
build/webpack.prod.conf.js", "test": "echo \"Error: no test specified\" && exit
1" },
先不要运行，运行也会报错的。

<>安装React
yarn add react react-dom -S
同样官方文档也给了一些指导在一分钟内添加-react
<http://react.css88.com/docs/add-react-to-a-website.html#%E5%9C%A8%E4%B8%80%E5%88%86%E9%92%9F%E5%86%85%E6%B7%BB%E5%8A%A0-react>
。
对index.js进行编辑
import React from "react"; import ReactDom from "react-dom"; ReactDom.render(
<h1>hello, world!</h1>, document.getElementById("root") );
注意，react使用的是es6，这里需要将代码转成es5，所以需要安装babel。
Babel的官方文档地址Babel <https://babel.docschina.org/>。这里也有bable在webpack的配置的介绍babel
in webpack <https://babel.docschina.org/setup#installation>。对react的介绍babel in
react <https://babel.docschina.org/docs/en/babel-preset-react>。

<>安装Babel
npm install --save-dev babel-loader babel-core babel-preset-env
babel-preset-react
在根目录下创建.babelrc文件，配置presets.
{ "presets": [ "env", "react" ] }
<>然后修改webpack.base.conf.js文件
// 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 } ] } };
运行 npm run build

然后就会出现各种奇葩的错误。我是正好处于babel从6.x版本升级到7.x版本的时候，所以导致有些插件npm库里是没有升级的，谷歌好久，是一个外国的小哥说，babel的各版本不兼容导致的。
所以在这里进行了版本降级，pack.json中的代码
"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",
这样就奇迹般的好了。

<>webpack的插件

<>HtmlWebpackPlugin

自动生产出html 的文件。

安装HtmlWebpackPlugin
npm install --save-dev html-webpack-plugin
修改public中的html的文件
<!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中配置plugins属性
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', //更改HTML的title的内容 minify: {
removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true },
}), ] });
index.js
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") );
这样就可以自动加载js文件了。
可以 yarn run build

热门工具换一换