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


Posted in Javascript onJuly 02, 2018

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

1. 首先用npm初始化环境

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

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

安装相关软件包

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静态文件的支持

  1. 在根目录下新建文件夹src, 在src内加入index.html  index.js
  2. 在根目录下新建webpack.config.js
  3. 在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"

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

在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内容

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

接下来我们配置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

最终效果:

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

文中相关资源链接:链接: https://pan.baidu.com/s/10PYXo_WoIScn-IFRdtuc5w 密码: td78

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Demo模态窗口
Dec 06 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
vue实现跨域的方法分析
May 21 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 #Javascript
angularjs 的数据绑定实现原理
Jul 02 #Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 #Javascript
vue中的数据绑定原理的实现
Jul 02 #Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 #Javascript
jsonp跨域获取数据的基础教程
Jul 01 #Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 #Javascript
You might like
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
数据库中排序的对比及使用条件详解
2012/02/23 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
php 浮点数比较方法详解
2017/05/05 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
node.js超时timeout详解
2014/11/26 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
请用用Java代码写一个堆栈
2012/01/26 面试题
初中英语课后反思
2014/04/25 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android