手动用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中,为什么要尽可能使用局部变量?
Apr 06 Javascript
javascript 写类方式之四
Jul 05 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
通过循环优化 JavaScript 程序
Jun 24 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 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+java实现自动新闻滚动窗口
2006/10/09 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
Python实现手势识别
2020/10/21 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
迎新春趣味活动方案
2014/08/24 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python