手动用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 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
详解jquery和vue对比
Apr 16 jQuery
浅析 Vue 3.0 的组装式 API(一)
Aug 31 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
咖啡与水的关系
2021/03/03 冲泡冲煮
php基于session实现数据库交互的类实例
2015/08/03 PHP
php实现的顺序线性表示例
2019/05/04 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
js友好的时间返回函数
2016/08/24 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
利用Python如何生成随机密码
2016/04/20 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
python logging 日志的级别调整方式
2020/02/21 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
介绍一下如何优化MySql
2016/12/20 面试题
日语翻译个人求职的自我评价
2013/10/14 职场文书
应届生财务管理求职信
2013/11/06 职场文书
网络信息管理员岗位职责
2014/01/05 职场文书
保研推荐信
2014/05/09 职场文书
感恩节活动策划方案
2014/05/16 职场文书
英语专业自荐书
2014/06/13 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
村官2015年度工作总结
2015/10/14 职场文书