手动用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 null和undefined区别分析
Oct 14 Javascript
jquery.validate使用攻略 第三部
Jul 01 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
vue组件入门知识全梳理
Sep 21 Javascript
vue解决跨域问题(推荐)
Nov 10 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 IP及IP段进行访问限制的代码
2008/12/17 PHP
php基础学习之变量的使用
2011/06/09 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
pandas对指定列进行填充的方法
2018/04/11 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
python中if及if-else如何使用
2020/06/02 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
《藏戏》教学反思
2016/02/23 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android