手动用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读取中文COOKIE的解决办法
Feb 15 Javascript
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
vue实现全选和反选功能
Aug 31 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
Yii2单元测试用法示例
2016/11/12 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
PHP时间类完整代码实例
2021/02/26 PHP
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python 变量类型及命名规则介绍
2013/06/08 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
澳洲的服装老品牌:SABA
2018/02/06 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
消防器材管理制度
2014/01/28 职场文书
同学会主持词
2014/03/18 职场文书
数学教育专业求职信
2014/07/22 职场文书
党的生日活动方案
2014/08/15 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
义诊活动通知
2015/04/24 职场文书
项目备案申请报告
2015/05/15 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis