手动用webpack搭建第一个ReactApp的示例


Posted in Javascript onApril 11, 2018

学习 React 可以用以下方法直接创建一个 ReactApp ,本文主要介绍如何手动来搭这个环境。

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

使用淘宝 NPM 镜像

使用 React 和 Webpack 需要安装很多依赖包,不走代理的话速度会非常慢,也很容易出错,所以这里推荐使用淘宝的 npm 镜像来安装,速度非常理想。

使用淘宝镜像安装 npm 包只需要两步即可:

安装 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用 cnpm 来安装包

只需要将 npm 替换成 cnpm 即可获得高速下载。

cnpm install [name]

下文中给出的所有安装依赖包的命令都使用 cnpm 安装的。你也可以用 npm。

开始第一个 React

初始化一个 json 配置文件

npm init

执行上面这条命令后输入一些信息即可创建 json 文件,这个文件也可以手动建。entry point 要填 index.js,其他的随意。

手动用webpack搭建第一个ReactApp的示例

安装 React

cnpm install react react-dom --save

安装编译工具 babel

cnpm install babel-core babel-loader babel-preset-react babel-preset-es2015 --save-dev

安装打包工具 wepback

全局的和当前文件夹的最好都装上,这样可以花式打包。

cnpm install webpack webpack-cli --save-dev
cnpm install webpack-dev-server --save-dev
cnpm install webpack webpack-cli -g
cnpm install webpack-dev-server -g

配置 webpack

为了方便,以下所有文件都建在同一个文件夹下面。

新建 webpack.config.js 并添加以下内容

const path =require('path'); 
module.exports = { 
 entry: path.resolve(__dirname, 'index.js'), 
 output: { 
 path: path.resolve(__dirname, ''), 
 filename: "bundle.js" 
 }, 
 mode: 'development',
 module: { 
 rules: [ 
  { 
  test: /\.js$/, 
  exclude: /node_modules/, 
  loader: "babel-loader", 
  options: { 
   presets: ["es2015","react"] 
  } 
  } 
 ] 
 } 
};

在 webpack4 中 mode 属性如果不指定会有警告。

创建测试文件

新建 index.js 文件

import React from 'react'; 
import ReactDOM from 'react-dom'; 
 ReactDOM.render( 
 <h1>我的第一个react例子</h1>, 
 document.getElementById('root') 
 );

新建 index.html 文件

<!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="UTF-8" /> 
 <title>example</title> 
 </head> 
 <body> 
 <div id="root"></div> 
 <script src="bundle.js"></script> 
 </body> 
 </html>

启动

最后执行 webpack 即可将 index.js 打包生成浏览器可执行的 bundle.js 文件。此时,index.html 文件已经可在浏览器中执行了。

附上我的 package.json 文件,直接执行 cnpm install 就能安装所有依赖。

{
 "name": "myapp",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "start": "webpack",
 "start:dev": "webpack-dev-server"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "babel-core": "^6.26.0",
 "babel-loader": "^7.1.4",
 "babel-preset-es2015": "^6.24.1",
 "babel-preset-react": "^6.24.1",
 "webpack": "^4.2.0",
 "webpack-cli": "^2.0.12",
 "webpack-dev-server": "^3.1.1"
 },
 "dependencies": {
 "react": "^16.2.0",
 "react-dom": "^16.2.0"
 }
}

热启动

如果 index.js 发生了改变,则需要再编译打包一次,才能更新 bundle.js 文件,这样效率非常低。webpack 提供了一条命令可以实时进行编译打包。

webpack --watch

执行这条命令后,index.js 文件就能被动态编译打包了,非常方便。

不过上面的热启动还是很麻烦,还要手动刷新浏览器,这里还有很牛逼的。

直接执行 webpack-dev-server 即可自动刷新浏览器

 手动用webpack搭建第一个ReactApp的示例

如果要换端口的话,在启动命令后面加上--port 端口号即可,例如:webpack-dev-server --port 8001

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

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
浅谈javascript的分号的使用
May 12 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
浅谈vue-cli 3.0.x 初体验
Apr 11 #Javascript
vue 组件高级用法实例详解
Apr 11 #Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 #Javascript
React如何避免重渲染
Apr 10 #Javascript
vue select组件的使用与禁用实现代码
Apr 10 #Javascript
vue 自定义 select内置组件
Apr 10 #Javascript
JavaScript如何对图片进行黑白化
Apr 10 #Javascript
You might like
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
简单易懂的python环境安装教程
2017/07/13 Python
python的socket编程入门
2018/01/29 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
详解Python 函数参数的拆解
2020/09/02 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
《美丽的小路》教学反思
2014/02/26 职场文书
小学生安全演讲稿
2014/04/25 职场文书
爱心捐助倡议书
2014/05/19 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
英文慰问信范文
2015/03/24 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python