<progress id="7nnbd"><big id="7nnbd"><em id="7nnbd"></em></big></progress>

<big id="7nnbd"><meter id="7nnbd"></meter></big>
<progress id="7nnbd"><meter id="7nnbd"><cite id="7nnbd"></cite></meter></progress><meter id="7nnbd"></meter>

      <address id="7nnbd"></address>

          為了賬號安全,請及時綁定郵箱和手機立即綁定

          webpack手動配置React開發環境

          2018.07.03 22:20 996瀏覽

          React提供了create-react-app的快速構建工具, 但作為一個專業的程序員(老司機), 面對復雜的項目, 入門級的構建工具, 是遠遠不夠的, 我們這里從零開始, 用webpack, 手動配置一個獨立的React開發環境, 開發環境完成后, 支持自動構建, 自動刷新, sass語法 等功能...

          1. 首先用npm初始化環境

          mkdir?react-webpack-democd?react-webpack-demo
          npm?init?-y

          700

          • 安裝相關軟件包

          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"

          700

          • 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內容

          700

          • 接下來我們配置babel對es6語法的支持, 以及對jsx語法的支持

          3. 添加對js高級語法的支持

          • 在項目根目錄, 添加.babelrc配置文件 presets為語法配置,plugins為插件配置

          {????"presets":?["env",?"stage-0",?"react"],????"plugins":?["transform-runtime"]
          }
          • 在webpack.config.js中添加module字段, 進行插件loader配置

          //?webpack.config.jsmodule.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.jsmodule.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

          最終效果:

          700

          文中相關資源鏈接:https://pan.baidu.com/s/1zGRtjltIcqVVJRFNHFhxAw ?密碼:6lwm




          點擊查看更多內容
          0人點贊

          若覺得本文不錯,就分享一下吧!

          評論

          相關文章推薦

          正在加載中
          意見反饋 邀請有獎 幫助中心 APP下載
          官方微信

          舉報

          0/150
          提交
          取消
          五福彩票 乐平 | 黄山 | 海西 | 丽水 | 柳州 | 曲靖 | 泰兴 | 广汉 | 东莞 | 巴音郭楞 | 黄冈 | 屯昌 | 台北 | 汉中 | 湘潭 | 邹城 | 安顺 | 烟台 | 乐山 | 德州 | 常德 | 云南昆明 | 驻马店 | 佛山 | 宝应县 | 潮州 | 黔南 | 海宁 | 德清 | 巴音郭楞 | 吴忠 | 金昌 | 绥化 | 包头 | 海西 | 海西 | 梧州 | 铜陵 | 禹州 | 巢湖 | 迪庆 | 马鞍山 | 钦州 | 广元 | 明港 | 阿拉尔 | 滁州 | 阿拉尔 | 新沂 | 台北 | 遂宁 | 辽阳 | 铜川 | 汕尾 | 临汾 | 江西南昌 | 燕郊 | 梧州 | 牡丹江 | 芜湖 | 宜昌 | 诸城 | 五家渠 | 海西 | 湖州 | 吉林长春 | 海北 | 烟台 | 宝应县 | 招远 | 新余 | 黑龙江哈尔滨 | 连云港 | 德州 | 清远 | 玉树 | 云浮 | 北海 | 慈溪 | 平凉 | 通辽 | 阿里 | 万宁 | 阜阳 | 枣阳 | 蓬莱 | 三河 | 唐山 | 遂宁 | 肥城 | 黔南 | 苍南 | 台北 | 宣城 | 平顶山 | 江苏苏州 | 白沙 | 临夏 | 随州 | 南阳 | 泸州 | 达州 | 铜仁 | 开封 | 万宁 | 改则 | 泰兴 | 灌云 | 吐鲁番 | 桂林 | 临海 | 安顺 | 石狮 |