webpack手动配置React开发环境的步骤

更新时间：2020-07-15 03:48:01 作者：startmvc

React提供了create-react-app的快速构建工具,但作为一个专业的程序员(老司机),面对复杂的项目,

React提供了create-react-app的快速构建工具, 但作为一个专业的程序员(老司机), 面对复杂的项目, 入门级的构建工具, 是远远不够的, 我们这里从零开始, 用webpack, 手动配置一个独立的React开发环境, 开发环境完成后, 支持自动构建, 自动刷新, sass语法等功能...

1. 首先用npm初始化环境


mkdir react-webpack-demo
cd react-webpack-demo
npm init -y

安装相关软件包


npm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin -D
npm install babel-core babel-loader babel-plugin-transform-runtime -D
npm install babel-preset-env babel-preset-stage-0 babel-preset-react -D
# 识别html转换为jsx语法
npm install babel-preset-react -D

2.添加对html静态文件的支持

在根目录下新建文件夹src, 在src内加入index.html index.js
在根目录下新建webpack.config.js
在webpack.config.js中加入如下配置


const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 负责将html文档虚拟到根目录下
let htmlWebpackPlugin = new HtmlWebpackPlugin({
 // 虚拟的html文件名 index.html
 filename: 'index.html',
 // 虚拟html的模板为 src下的index.html
 template: path.resolve(__dirname, './src/index.html')
})

module.exports = {
 // 开发模式
 mode: 'development',
 // 配置入口文件
 entry: './src/index.js',
 // 出口文件目录为根目录下dist, 输出的文件名为main
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: 'main.js'
 },
 // 配置开发服务器, 并配置自动刷新
 devServer: {
 // 根目录下dist为基本目录
 contentBase: path.join(__dirname, 'dist'),
 // 自动压缩代码
 compress: true,
 // 服务端口为1208
 port: 1208,
 // 自动打开浏览器
 open: true
 },
 // 装载虚拟目录插件
 plugins: [htmlWebpackPlugin],
}

在package.json内scripts中添加"dev": "webpack-dev-server"

在src/index.html中添加内容


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>react-webpack-demo</title>
</head>
<body>
 react-webpack-demo
 <hr>
 高堂明镜悲白发, 朝如青丝暮成雪
</body>
</html>

在命令行内运行npm run dev, 即可看到刚添加的index.html内容

接下来我们配置babel对es6语法的支持, 以及对jsx语法的支持

3. 添加对js高级语法的支持

在项目根目录, 添加.babelrc配置文件 presets为语法配置,plugins为插件配置


{
 "presets": ["env", "stage-0", "react"],
 "plugins": ["transform-runtime"]
}

在webpack.config.js中添加module字段, 进行插件loader配置


// webpack.config.js
module.exports = {
 ...
 // 配置loader
 module: {
 // 根据文件后缀匹配规则
 rules: [
 // 配置js/jsx语法解析
 { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
 ]
 }
};

在src/index.html中加入id为root的div节点


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>react-webpack-demo</title>
</head>
<body>

 react-webpack-demo
 <hr>
 高堂明镜悲白发, 朝如青丝暮成雪
 <hr>
 <div id="root"></div>
</body>
</html>

在src/index.js中加入包含jsx语法的react组件


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


class Counter extends React.Component {
 constructor(props) {
 super(props);
 this.state = { number: 0 };
 this.decrease = this.decrease.bind(this);
 this.increase = this.increase.bind(this);
 }
 // 加1
 increase() {
 let self = this;
 self.setState({ number: self.state.number + 1 })
 }
 // 减一
 decrease() {
 let self = this;
 self.setState({ number: self.state.number - 1 })

 }


 render() {
 return ( 
 <div>
 <input type = "button" value = "减1"onClick = { this.decrease }/> 
 <span> { this.state.number } </span>
 <input type = "button" value = "加1" onClick = { this.increase }/> 
 </div> )
 }
}

ReactDOM.render(<Counter /> , document.getElementById('root'))

附录: 添加对sass语法的支持(没兴趣可以跳过)

安装sass相关的loader


npm install style-loader css-loader node-sass sass-loader -D

在webpack.config.js内新增规则


// webpack.config.js
module.exports = {
 ...
 module: {
 rules: [{
 test: /\.scss$/,
 use: [
 "style-loader", // creates style nodes from JS strings
 "css-loader", // translates CSS into CommonJS
 "sass-loader" // compiles Sass to CSS
 ]
 }]
 }
};

在src内新增index.scss


$designWidth: 750;
@function px2rem($px) {
 @return $px*10/$designWidth + rem;
}

#root {
 div {
 font-size: px2rem(500);
 display: flex;
 color: #64B587;
 input {
 flex: 1 1 auto;
 }
 span {
 flex: 1 1 auto;
 text-align: center;
 }
 }
}

在index.js中新增import index.scss

最终效果: