当前位置:Gxlcms > JavaScript > webpack手动配置React开发环境的步骤

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

时间:2021-07-01 10:21:17 帮助过:11人阅读

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

1. 首先用npm初始化环境

  1. mkdir react-webpack-demo
  2. cd react-webpack-demo
  3. npm init -y

安装相关软件包

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

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

  1. 在根目录下新建文件夹src, 在src内加入index.html  index.js
  2. 在根目录下新建webpack.config.js
  3. 在webpack.config.js中加入如下配置
  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. // 负责将html文档虚拟到根目录下
  4. let htmlWebpackPlugin = new HtmlWebpackPlugin({
  5. // 虚拟的html文件名 index.html
  6. filename: 'index.html',
  7. // 虚拟html的模板为 src下的index.html
  8. template: path.resolve(__dirname, './src/index.html')
  9. })
  10. module.exports = {
  11. // 开发模式
  12. mode: 'development',
  13. // 配置入口文件
  14. entry: './src/index.js',
  15. // 出口文件目录为根目录下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中添加内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>react-webpack-demo</title>
  6. </head>
  7. <body>
  8. react-webpack-demo
  9. <hr>
  10. 高堂明镜悲白发, 朝如青丝暮成雪
  11. </body>
  12. </html>

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

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

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

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

  1. {
  2. "presets": ["env", "stage-0", "react"],
  3. "plugins": ["transform-runtime"]
  4. }

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

  1. // webpack.config.js
  2. module.exports = {
  3. ...
  4. // 配置loader
  5. module: {
  6. // 根据文件后缀匹配规则
  7. rules: [
  8. // 配置js/jsx语法解析
  9. { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
  10. ]
  11. }
  12. };

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>react-webpack-demo</title>
  6. </head>
  7. <body>
  8. react-webpack-demo
  9. <hr>
  10. 高堂明镜悲白发, 朝如青丝暮成雪
  11. <hr>
  12. <div id="root"></div>
  13. </body>
  14. </html>

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

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. class Counter extends React.Component {
  4. constructor(props) {
  5. super(props);
  6. this.state = { number: 0 };
  7. this.decrease = this.decrease.bind(this);
  8. this.increase = this.increase.bind(this);
  9. }
  10. // 加1
  11. increase() {
  12. let self = this;
  13. self.setState({ number: self.state.number + 1 })
  14. }
  15. // 减一
  16. decrease() {
  17. let self = this;
  18. self.setState({ number: self.state.number - 1 })
  19. }
  20. render() {
  21. return (
  22. <div>
  23. <input type = "button" value = "减1"onClick = { this.decrease }/>
  24. <span> { this.state.number } </span>
  25. <input type = "button" value = "加1" onClick = { this.increase }/>
  26. </div> )
  27. }
  28. }
  29. ReactDOM.render(<Counter /> , document.getElementById('root'))

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

安装sass相关的loader

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

在webpack.config.js内新增规则

  1. // webpack.config.js
  2. module.exports = {
  3. ...
  4. module: {
  5. rules: [{
  6. test: /\.scss$/,
  7. use: [
  8. "style-loader", // creates style nodes from JS strings
  9. "css-loader", // translates CSS into CommonJS
  10. "sass-loader" // compiles Sass to CSS
  11. ]
  12. }]
  13. }
  14. };

在src内新增index.scss

  1. $designWidth: 750;
  2. @function px2rem($px) {
  3. @return $px*10/$designWidth + rem;
  4. }
  5. #root {
  6. div {
  7. font-size: px2rem(500);
  8. display: flex;
  9. color: #64B587;
  10. input {
  11. flex: 1 1 auto;
  12. }
  13. span {
  14. flex: 1 1 auto;
  15. text-align: center;
  16. }
  17. }
  18. }

在index.js中新增import index.scss

最终效果:

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

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

人气教程排行