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

 更新时间:2018年07月02日 10:26:17   作者:木子昭  
本篇文章主要介绍了webpack手动配置React开发环境的步骤,webpack手动配置一个独立的React开发环境, 开发环境完成后, 支持自动构建, 自动刷新, sass语法 等功能...感兴趣的小伙伴们可以参考一下

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

  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"

在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

最终效果:

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

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

相关文章

  • 详解Webpack+Babel+React开发环境的搭建的方法步骤

    详解Webpack+Babel+React开发环境的搭建的方法步骤

    本篇文章主要介绍了详解Webpack+Babel+React开发环境的搭建的方法步骤,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 简单介绍react redux的中间件的使用

    简单介绍react redux的中间件的使用

    这篇文章主要介绍了简单介绍redux的中间件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • ES6 class类链式继承,实例化及react super(props)原理详解

    ES6 class类链式继承,实例化及react super(props)原理详解

    这篇文章主要介绍了ES6 class类链式继承,实例化及react super(props)原理,结合实例形式详细分析了ES6 中class类链式继承,实例化及react super(props)原理相关概念、原理、定义与使用技巧,需要的朋友可以参考下
    2020-02-02
  • React实现双向绑定示例代码

    React实现双向绑定示例代码

    这篇文章给大家介绍了在React中如何实现双向绑定,文中给出了示例代码,对大家的理解与学习很有帮助,有需要的朋友下面来一起看看吧。
    2016-09-09
  • react路由配置方式详解

    react路由配置方式详解

    本篇文章主要介绍了react路由配置方式详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • React中事件绑定this指向三种方法的实现

    React中事件绑定this指向三种方法的实现

    这篇文章主要介绍了React中事件绑定this指向三种方法的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 用React-Native+Mobx做一个迷你水果商城APP(附源码)

    用React-Native+Mobx做一个迷你水果商城APP(附源码)

    这篇文章主要介绍了用React-Native+Mobx做一个迷你水果商城APP,功能需要的朋友可以参考下
    2017-12-12
  • react-router实现跳转传值的方法示例

    react-router实现跳转传值的方法示例

    这篇文章主要给大家介绍了关于react-router实现跳转传值的相关资料,文中给出了详细的示例代码,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-05-05
  • 详解如何构建自己的react hooks

    详解如何构建自己的react hooks

    我们组的前端妹子在组内分享时谈到了 react 的钩子,趁此机会我也对我所理解的内容进行下总结,方便更多的同学了解。在 React 的 v16.8.0 版本里添加了 hooks 的这种新的 API,我们非常有必要了解下他的使用方法,并能够结合我们的业务编写几个自定义的 hooks。
    2021-05-05
  • React嵌套组件的构建顺序

    React嵌套组件的构建顺序

    这篇文章主要介绍了React嵌套组件的构建顺序,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下
    2021-04-04

最新评论