webpack手动配置React开发环境

简介: React提供了create-react-app的快速构建工具, 但作为一个专业的程序员(老司机), 面对复杂的项目, 入门级的构建工具, 是远远不够的, 我们这里从零开始, 用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静态文件的支持

  • 在根目录下新建文件夹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.jsonscripts中添加"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/1zGRtjltIcqVVJRFNHFhxAw 密码:6lwm

目录
相关文章
|
2月前
create-react-app配置环境变量
create-react-app配置环境变量
98 0
|
12天前
|
缓存 JavaScript
webpack配置中的3种hash值
webpack配置中的3种hash值
|
18天前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
32 3
|
24天前
|
前端开发
|
2月前
|
前端开发
【专栏】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译
【4月更文挑战第29天】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译。通过配置键值对,如 `ENV: JSON.stringify(process.env.NODE_ENV)`,可以在代码中根据环境执行相应逻辑。实际应用包括动态加载资源、动态配置接口地址和条件编译优化代码。注意变量定义的合法性和避免覆盖,解决变量未定义或值错误的问题,以提升开发效率和项目质量。
|
2月前
|
缓存 JavaScript 前端开发
webpack学习笔记--基本配置
webpack学习笔记--基本配置
|
2月前
|
前端开发 数据可视化 API
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
124 0
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
|
2月前
|
前端开发 JavaScript CDN
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(一)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
81 0
|
2月前
|
JavaScript 前端开发
构建工具:配置Webpack打包Vue项目
【4月更文挑战第24天】本文介绍了如何配置Webpack来打包Vue项目。首先,Webpack作为模块打包器处理依赖并打包成可执行文件。接着,通过安装Node.js和npm,创建Vue项目,进入项目目录并配置Webpack的入口、输出、加载器和插件。最后,运行构建命令完成打包。理解Webpack基础并按需配置,能优化前端项目构建和开发体验。
|
2月前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
50 2