通过webpack搭建React原生工程

需求

1.搭建React原生工程
2.包含一个Input框，一个显示区域(div,span等)，要求在Input框中输入值，在显示区同时显示当前Input的内容

前提

已安装node.js

步骤如下

（cmd中）

• 设置npm代理
  由于公司网络限制，所以需要设置代理才能正常使用npm来下载（无网络限制的可忽略）

npm config set proxy http://10.167.196.133:8080
npm config set https-proxy http://10.167.196.133:8080

• 创建根目录并初始化
  创建一个命为 react-webpack 的文件夹作为根目录（项目）
  在该文件夹下打开cmd，执行下列命令，生成package.json文件

npm init -y 

如果执行npm init，会有一个交互式的命令行让你输入需要的字段值（不会填就回车，就是默认值），npm init -y是跳过交互，全部使用默认值，方便一点

生成的package.json如下所示

{
  "name": "react-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

各属性的含义

name ：项目名称
version ：项目的版本号
description ：项目的描述信息
main ：项目的入口文件
scripts ：指定了项目的生命周期个各个环节需要执行的命令，可以自己指定命令
keywords ：关键词，方便别人搜索到本项目
author ：作者
license ：项目要发行的时候需要的证书

• 安装各种依赖包

安装webpack

npm install --save-dev webpack   
npm install --save-dev webpack-cli

webpack4以前只安装webpack就可以，因为在以前的版本，webpack本身和它的cli以前都是在同一个包中，但在第4版中，已经将两者分开来更好地管理它们，所以要两个都下载

--save-dev的含义是将模块安装到项目node_modules目录（自动生成，不需要自己创建）下，并在package.json文件的devDependencies节点写入依赖（参考下面的package.json文件的内容），devDependencies是开发时需要的依赖

安装webpack-dev-server

npm install --save-dev webpack-dev-server    

webpack-dev-server是小型的node.js Express服务器,为webpack打包生成的资源文件提供Web服务

安装babel

npm install --save-dev babel-core
npm install --save-dev babel-loader@7   
npm install --save-dev babel-preset-env
npm install --save-dev 

babel是一个JavaScript编译器，能将ES2015+的代码转换正ES2015

babel-core 核心功能，主要在node等环境中使用，可以用来开发自己的babel转译器，直接调用babel的api对某些代码或者某些文件进行转译
babel-loader jsx加载器， @7是下载7.x版本 如果不指定版本 现阶段下载的是8.x版本 而babel其他插件下载的6.x版本，不能一起使用，会报错，所以在此指定版本下载
babel-preset-env 语法转译器，转译为es5代码
babel-preset-react 转译器，转义react代码

安装react

npm install --save react 
npm install --save react-dom 

--save的含义是将模块安装到项目node_modules目录下，并在package.json文件的dependencies节点写入依赖（参考下面的package.json文件的内容），dependencies是项目运行时需要的依赖

安装依赖之后的package.json

{
  "name": "react-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",

  "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
  },
  
  "keywords": [],
  "author": "",
  "license": "ISC",
  
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

如果其他项目使用同样的是依赖包，可以把上面的devDependencies dependencies直接copy过去，然后命令行执行npm install，就会一起下载好上述的依赖包和版本

• 创建文件
  目录结构如下

react-webpack
  |--app
    |--component.js
    |--index.js
  |--build
    |--bundle.js（该文件是由webpack打包生成，不用自己创建）
  |--node_modules（下载依赖时自动创建）
  |--index.html
  |--package.json（已存在）
  |--webpack.config.js

• 配置

webpack.config.js中

//该文件是一个 node.js 模块，返回一个 json 格式的配置信息对象
var path = require('path');
const webpack = require('webpack');
 
module.exports = {
    // 入口文件（需要打包的文件）
    entry:[
        path.join(__dirname, '/app/index.js'),// __dirname 是当前运行的js所在的目录
    ], 
    // 出口文件（打包出来的文件）
    output: {  
      path: path.resolve(__dirname, 'build'),//打包后的文件存放的地方
      filename: 'bundle.js',//打包后输出文件的文件名
      publicPath: '/' //在热加载模块应当关注它，必须通过这个属性来告诉热加载模块去哪加载
    },

    //webpack-dev-server服务器配置
    devServer: {
        hot:true,//热替换
        port: 1717, //设置监听端口，默认8080
        contentBase: './',//用来指定被访问html页面所在目录的 
        publicPath: '/'//与output中的publicPath相同
    },
    //插件
    plugins:[
        new webpack.HotModuleReplacementPlugin()//热替换
    ],
 
    // babel配置
    module:{
        rules:[
            {
                test:/\.js$/,//解析以.js结尾的文件
                exclude:/node_modules/,//排除node_modules文件的内容，node_modules中为下载的依赖包
                loaders:"babel-loader",//加载器
                query:{
                    presets:['env','react']//转义器
                }
            }
        ]
    }
}

热替换就是修改代码时可以局部刷新，提高开发效率，webpack-dev-server自带的Hot Module Replacement模块就是用来实现热替换的，这里你需要在devServer下设置hot:true，并且在plugins下new webpack.HotModuleReplacementPlugin()，还要在output和devServer下配置相同的publicPath，关于这部分，我也没有搞清楚，只是照着教程写写改改能实现而已

babel的配置还可以在根目录创建一个.babelrc文件进行，这里就不详述了

package.json中修改

  "scripts": {
    "build": "webpack",
    "server": "webpack-dev-server --open chrome"
  },

这里可以自己定义脚本，我定义了两个，执行npm run build就是webpack打包，执行npm run server就是启动服务器，--open chrome是启动时自动打开chrome浏览器的意思，也可以去掉--open chrome，然后在浏览器中访问localhost:1717是同样的效果
在这里也可以启动 webpack-dev-server的Hot Module Replacement，将脚本改成"server": "webpack-dev-server --hot --open chrome"，就不用在webpack.config.js文件中配置了

• 编码

component.js

import React from 'react';
import ReactDOM from 'react-dom';

//定义了一个叫Comp 的组件来实现需求
class Comp extends React.Component{
  constructor(props){
    super(props);
    this.state={value:''};
  }

  fn(ev){
    this.setState({
      value:ev.target.value
    });
  }

  render(){
    return(
      <div>
      <input type="text" onChange={this.fn.bind(this)}></input> //input输入框
      <br></br>
      <span>{this.state.value}</span> //显示区域
    </div>
    );
  }
}

//将Comp组件渲染到index.html的“app”中
ReactDOM.render(
    <Comp/>,
    document.getElementById("app")
);

index.js

require("./component.js");

//实现热替换
if(module.hot) { 
  module.hot.accept();
}

index.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>test</title>
</head>
<body>
  <div id="app"></div> 
  <script src="build/bundle.js"></script>
  <script src="/bundle.js"></script>
</body>
</html>

• 运行服务

npm run build  //打包
npm run server //运行服务器

执行npm run build，build文件夹下会生成一个bundle.js文件
执行npm run server，实现需求如图所示

结果
成功设置热替换可以看到
热替换

总结

搭建原生的React工程虽然步骤不多，只是实现了一个很简单的需求，但还花费了不少时间，其一是我没有这方面的经验，是个小白，其二是教程不多，或老或错，尤其是w3cschool上的安装教程居然也不能成功。不过需要搭建原生工程的时候并不多，都是使用脚手架，自己搭一下对一些插件和依赖能更加熟悉，接下来要利用Ant Design Pro脚手架来进行之后的学习

参考文章

webpack-react之webpack篇（上）
创建react项目的几种方法
Markdown基本语法