基于Webpack的React开发环境搭建
前言
React是现在很流行的前端UI框架，基于React进行开发可以省去很多功夫，让代码更加整洁、高效，而Webpack是一个很优秀的前端JavaScript模块化打包工具，它在前端JavaScript开发中起着举足轻重的作用，现在很多前端技术栈，都是使用React+Webpack+一个合适UI库来完成，本文为大家介绍如何基于Webpack搭建React的开发环境。
创建项目
首先先新建一个文件夹作为我们的项目文件夹，在项目文件夹中使用npm的包初始化指令。
npm init -y
完成初始化之后，可以看见项目文件夹下多了一个package.json，这就是你项目包的基本信息，日后可以在这里任意修改
// project dir
project
+ |- package.json
安装项目依赖
因为项目需要使用到Webpack和React，我们先将这两个依赖安装上:
npm install --save react react-dom
npm install --save-dev webpack webpack-cli
这里的--save意思是作为保存到生产环境依赖，--save-dev的意思是保存到开发环境依赖，也就是说用户不需要接触到webpack，安装完成后，你可以查看package.json，看依赖是否成功安装：
// package.json
{
...
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"webpack": "^4.1.1",
"webpack-cli": "^2.0.10"
}
...
}
可以看见两栏依赖中都正确，如果依赖有缺失，应该尝试重新安装，知道两栏依赖中都正确。
为项目添加dist和src分支
接下来应该在项目目录中新建两个文件夹，分别用来存放源码和分发文件
// project dir
project
+ |- /src
+ |- /dist
|- package.json
以后，所有源码(包括js、css、页面引用资源等)都放在src文件夹中，而分发文件(html、站点图片文件等)放在dist文件夹中，Webpack每一次编译的输出结果都输出到dist中，并供给html引用。
安装Babel编译器
Babel的功能是将ES6、JSX等高版本的JavaScript在编译的时候转化成低版本的JavaScript，以提高浏览器兼容性，因为React使用的语法是JSX，无法被浏览器所支持，所以我们需要使用Babel替我们编译、转化之。
npm install --save--dev babel-core babel-loader babel-preset-es2015 babel-preset-react
添加React测试文件
为了测试项目是否能够跑起来，我们先编写一个React的源文件进行测试
// project dir
project
|- /src
+ |- index.js
|- /dist
+ |- index.html
|- package.json
html文件如下:
// /dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello React!</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
js文件如下:
// /src/index.js
import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
<h1>Hello, React!</h1>,
document.getElementById('root')
);
编写Webpack和Babel的配置文件
我们在项目根目录下新建一个配置文件，用来告诉Webpack该如何编译项目:
// project dir
project
|- /src
|- index.js
|- /dist
|- index.html
+ |- webpack.config.js
|- package.json
配置文件如下:
// webpack.config.js
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, './src/index.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
};
接下来再在项目根目录下建立一个Babel的配置文件
// project dir
project
|- /src
|- index.js
|- /dist
|- index.html
+ |- .babelrc
|- webpack.config.js
|- package.json
请看清文件名，是没文件名只有后缀的文件，如果无法建立可以先新建一个任意文件，然后重命名为这个名字即可，内容如下：
// .babelrc
{
"presets": [
"es2015",
"react"
]
}
编写npm脚本
为了让npm帮我们执行Webpack打包任务，我们可以在npm的配置文件中写一个脚本
// package.json
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack-cli"
},
...
}
之后，只要输入
npm run build
即可运行html文件查看运行结果了
尝试运行
输入
npm run build
运行/dist/html.index文件，可以查看网页成功输出我们写的React代码
index.html
搭建Webpack服务器
你可能会想，每一次都要自己输入一次npm的构建脚本指令，才能查看到结果，岂不是很麻烦，好在Webpack有一个包叫做webpack-dev-server，它是一个前端静态文件服务器，可以自动检测模块的更新并且自动更新，也就是说在webpack-dev-server开启之后，我们更改完react代码之后只要马上打开html文件就能查看变化了。
先安装webpack-dev-server
npm install --save-dev webpack-dev-server
然后在项目根目录下建立bin目录，并且在bin目录下建立webpack-dev-server的配置文件dev-server.js
// project dir
project
+ |- /bin
+ |- dev-server.js
|- /src
|- index.js
|- /dist
|- index.html
|- .babelrc
|- webpack.config.js
|- package.json
接下来编写配置文件
// /bin/dev-server.js
'use strict';
const WebpackDevServer = require('webpack-dev-server');
const webpackConfig = require('../webpack.config');
const webpack = require('webpack');
const path = require('path');
const compiler = webpack(webpackConfig);
const server = new WebpackDevServer(compiler, {
contentBase: path.resolve(__dirname, '../dist'),
historyApiFallback: true,
port: 9090,
publicPath: "/"
});
server.listen(9090, 'localhost', function (err) {
if (err)
throw err;
});
编写完成后再在npm的配置文件中添加一个运行服务器的脚本
// package.json
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack-cli",
"server": "node bin/dev-server"
},
...
}
现在，输入
npm run server
可以看到服务器成功运行了，打开你的浏览器，输入localhost:9090，然后打开，可以看见之前的react网页成功运行
localhost:9090(1)
保持服务器不退出的状态，直接修改/src/index.js里面的内容
// /src/index.js
import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
- <h1>Hello, React!</h1>,
+ <h1>Welcome to react!</h1>,
document.getElementById('root')
);
再次进行localhost:9090，可以看到不用你自己重新打包，网页也直接发生了变化
localhost:9090(2)
至此，就完成了基于webpack的react开发环境搭建，可以开始愉快地用react写前端代码了。
