基于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写前端代码了。