为了更好的学习React，我们先简要的把开发环境搭建起来。
本文主要介绍使用webpack搭建React项目环境，这样更便与专注与学习react语法以使用方式（在webpack环境中），虽然HTML挂载react.js能使用，但是在webpack中使用还是有一定区别的，而往往工作中很少直接引用JS去使用的，此环境也可以直接适用于vue学习（如果你想直接使用vue-cli也可以）
废话不多说开始正题：
创建项目目录
创建一个文件夹first-react（自己取文件夹名称），进入该目录，在该目录下打开一个终端，执行npm init 初始化一下
根据提示输入内容，也可以直接按回车键跳过。执行完后目录中会多一个package.json文件，这是项目的核心文件，包含包依赖管理和脚本任务。
安装react, webpack及相关插件
|
1 2 |
npm install react react-dom --save npm install webpack --save-dev |
如果你之前从来没有使用过webpack的话，需要先全局安装一下webpack-cli，如果安装下面一行可跳过。
|
1 |
npm install webpack webpack-cli -g |
因为我们使用了react，react是使用jsx语法实现的，而jsx不能直接被浏览器识别和执行，所以这里需要引入Babel库进行转码。
开始安装编译插件
|
1 2 3 |
npm install -D babel-loader @babel/core @babel/preset-env 这是用来编译成浏览器支持的JS语法 npm install --save-dev @babel/preset-react 这是用来编译react语法的（jsx 转换成js） |
webpack-dev-server是一个小型的静态文件服务器，为webpack打包的资源文件提供Web服务。并且提供自动刷新和Hot Module Replacement（模块热替换：前端代码变动后无需刷新整个页面，只把变化的部分替换掉）
安装webpack-dev-server
|
1 |
npm install webpack-dev-server --save-dev |
安装html-webpack-plugin 自动打包html模板文件到dist目录中去。
|
1 |
npm install html-webpack-plugin --save-dev |
项目目录结构和源码
dist目录可以不创建，以下结构非正常开发项目目录结构，以供学习使用而已
|
1 2 3 4 5 6 7 8 9 10 11 12 |
--your project（你自己创建一个文件夹） |--dist(项目打包输出目录) |--bundle.js(该文件是由webpack打包生成) |--index.html(该文件是由webpack打包生成) |--src |--index.js |--index.template.html |--webpack |--webpack.config.js |--bin |--dev-server.js |--package.json |
以下是index.template.html文件的内容
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="app"> </div> </body> </html> |
以下是index.js文件内容，以后练习各种react语法知识点。都可以用此文件，当然你也可以另外在创建文件
|
1 2 3 4 5 6 7 |
import React, { Component } from 'react'; import { render } from 'react-dom'; render( <div>Hello React!</div>, document.getElementById('app') ); |
以下是webpack.config.js配置文件，专门配置webpack的
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
const webpack = require('webpack'); const path = require("path"); const HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成解析html页面 module.exports = { entry: path.resolve(__dirname, "../src/index.js"), //指定入口文件，程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录 mode: "development", // 设置默认环境development，命令直接--mode production devtool: 'cheap-module-eval-source-map', // 方便调式，在浏览器中sources方便找问题 output: { path: path.resolve(__dirname, "../dist"), // 输出的路径 filename: "bundle.js" // 打包后文件 }, module: { rules: [{ test: /\.(js|jsx)$/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env", "@babel/preset-react"], } }, exclude: /node_modules/ }] }, plugins: [ new webpack.HotModuleReplacementPlugin(), // 热更新 new HtmlWebpackPlugin({ template: path.resolve(__dirname, '../src/index.template.html'), // html模板文件路径 inject: true }) ], resolve: { // 当你引入文件reuire时，不需要给文件加上以下扩展名（尾缀名） extensions: ['.js', '.jsx', '.vue'], }, } |
以下是dev-server.js文件内容
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
'use strict' const WebpackDevServer = require('webpack-dev-server'); const config = require('../webpack/webpack.config'); const webpack = require('webpack'); const path = require('path'); const compiler = webpack(config); const server = new WebpackDevServer(compiler, { contentBase: path.resolve(__dirname, '../dist'), //默认会以根文件夹提供本地服务器，这里指定文件夹 historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html port: 9090, //如果省略，默认8080 publicPath: "/", inline: true, // 自动刷新 // hot: true, // 开启热模块替换 }); server.listen(9090, 'localhost', function (err) { if (err) throw err }) |
以下是package.json文件内容
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
{ "name": "react", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "node bin/dev-server", "build": "webpack --config webpack/webpack.config.js" }, "author": "", "license": "ISC", "dependencies": { "react": "^16.7.0", "react-dom": "^16.7.0" }, "devDependencies": { "@babel/core": "^7.2.2", "@babel/preset-env": "^7.2.3", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.5", "webpack": "^4.28.4", "webpack-cli": "^3.2.1" } } |
到此所有配置都完成了，日常练习开发 npm run dev 启动服务实时显示，访问域名http://localhost:9090/
如果看到Hello React!， 最后再做一下简单的测试，将App.js修改如下后保存，刷新页面看看是否自动编译完成了。
PS：开启热更新局部刷新功能，和webpack不同版本有兼容性问题，有的版本可以实现局部热更新，有的就不行（解决办法都不一样，所以就不一一举例了），此配置主要用途学习环境使用
