手动用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 相关文章推荐
javascript div 弹出可拖动窗口
Feb 26 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
使用javascript做在线算法编程
May 25 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
浅谈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去除字符串换行符示例分享
2014/02/13 PHP
php去掉文件前几行的方法
2015/07/29 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
Python中的自省(反射)详解
2015/06/02 Python
Python类的动态修改的实例方法
2017/03/24 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
python nmap实现端口扫描器教程
2020/05/28 Python
Python中if有多个条件处理方法
2020/02/26 Python
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
shell程序中如何注释
2012/01/28 面试题
小学教师事迹材料
2014/01/13 职场文书
社区十八大感言
2014/01/19 职场文书
销售经理工作职责
2014/02/03 职场文书
大学生个人求职信例文
2014/07/07 职场文书
护士节活动总结
2014/08/29 职场文书
毕业横幅标语
2014/10/08 职场文书
公司租房协议书范本
2014/10/08 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
泰山导游词
2015/02/02 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
JavaScript的Set数据结构详解
2022/02/18 Javascript
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏