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 removeChild 使用注意事项
Apr 11 Javascript
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
限制只能输入数字的实现代码
May 16 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 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
德生H-501的评价与改造
2021/03/02 无线电
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
php的hash算法介绍
2014/02/13 PHP
Yii核心验证器api详解
2016/11/23 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
js 格式化时间日期函数小结
2010/03/20 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
layui文件上传实现代码
2017/05/20 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
500行python代码实现飞机大战
2020/04/24 Python
医药工作者的求职信范文
2013/09/21 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
储备店长岗位职责
2015/04/14 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
php字符串倒叙
2021/04/01 PHP
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android