天枫庄资源网 Design By www.wosibo.com
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.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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
天枫庄资源网 Design By www.wosibo.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
天枫庄资源网 Design By www.wosibo.com
暂无webpack手动配置React开发环境的步骤的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]