《React+Redux前端开发实战》笔记2：基于Webpack构建的Hello World案例（上）
这次搭建分为两部分：一部分是前期必要配置，一部分是开发React代码。
【基于Webpack的React Hello World项目】
1．前期必要配置
（1）首先要确保读者的开发设备上已经安装过Node.js，新建一个项目：
mkdir react-hello-world
cd react-hello-world
npm init -y
（2）项目中使用的是Webpack 4.x，在项目根目录下执行：
npm i webpack webpack-cli -D
注意：上面命令代码中npm install module_name —D 即 npm intsll module_name —save-dev。表示写入package.json的devDependencies，devDependencies里面的插件用于开发环境，不用于生产环境。npm install module_name —S即npm intsll module_name —save。dependencies是需要发布到生产环境的。
（3）安装完Webpack，需要有一个配置文件让Webpack知道要做什么事，这个文件取名为webpack.config.js。
touch webpack.config.js
然后配置内容如下：
var webpack = require('webpack');
var path = require('path');
var APP_DIR = path.resolve(__dirname, 'src');
var BUILD_DIR = path.resolve(__dirname, 'build');
var config = {
entry: APP_DIR + '/index.jsx', // 入口
output: {
path: BUILD_DIR, // 出口路径
filename: 'bundle.js' // 出口文件名
}
};
module.exports = config;
这是Webpack使用中最简单的配置，只包含了打包的入口和出口。APP_DIR表示当前项目的入口路径，BUILD_DIR表示当前项目打包后的输出路径。
（4）上面配置的入口需要新建一个应用的入口文件./src/index.jsx，我们让其打印简单的一句：
console.log('Hello World’);
（5）用终端在根目录下执行：
./node_modules/.bin/webpack -d
上面的命令在开发环境运行之后，会在根目录下生成一个新的build文件夹，里面包含了Webpack打包的bundle.js文件。
（6）接下来创建index.html，用于在浏览器执行bundle.js ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
</head>
<body>
<div id=“app”></div>
<!--bundle.js是Webpack打包后生成的文件-->
<script src="build/bundle.js" type="text/javascript"></script>
</body>
</html>
现在读者可以在浏览器中打开index.html文件，在控制台能看到./src/index.jsx打印的内容：Hello World 。
（7）为了提高效率和使用最新的ES语法，通常使用JSX和ES 6来进行开发。但JSX和ES6语法在浏览器中还没有被完全支持，所以需要在Webpack中配置相应的loader模块来编译它们。只有这样，打包出来的bundle.js文件才能被浏览器识别和运行。
接下来安装Babel：
npm i -D babel-core babel-loader@ babel-preset-env babel-preset-react
注意：babel-core是调用Babel的API进行转码的包；babel-loader是执行转义的核心包；babel-preset-env是一个新的preset，可以根据配置的目标运行环境自动启用需要的Babel插件；babel-preset-react用于转义React的JSX语法。
（8）在webpack.config.js中配置loader：
var webpack = require("webpack");
var path = require("path");
var BUILD_DIR = path.resolve(__dirname, "build"); // 构建路径
var APP_DIR = path.resolve(__dirname, "src"); // 项目路径
var config = {
entry: APP_DIR + "/index.jsx", // 项目入口
output: {
path: BUILD_DIR, // 输出路由
filename: "bundle.js" // 输出文件命名
},
module: {
rules: [
{
test: /\.(js|jsx)$/, // 编译后缀为js和jsx格式文件
exclude: /node_modules/,
use: {
loader: "babel-loader" // 使用babel-loader这个loader库
}
}
]
}
};
module.exports = config;
（9）创建.babelrc文件：
touch .babelrc
配置相应内容来告诉babel-loader使用ES6和JSX插件：
{
"presets" : ["env", "react"]
}
至此为止，已经配置完开发该项目的基础工作。
《海贼王》中罗杰说，每个人都有自己出场的机会！在将来，React可能会在前端历史的浪潮中被人遗忘，但今天，React的设计思想影响了无数的开发者，当下正是属于它的时代！！
《React+Redux前端开发实战》笔记2：基于Webpack构建的Hello World案例（上）的更多相关文章
- 《React+Redux前端开发实战》笔记3：基于Webpack构建的Hello World案例（下）
2．使用React编码 下面正式开始使用React来编写前端代码. (1)npm安装react和react-dom: npm install react react-dom -S (2)用下面代码替换 ...
- 《React+Redux前端开发实战》笔记1：不涉及React项目构建的Hello World案例
本小节实现一个不涉及项目构建的Hello World. [React的第一个Hello World网页] 源码地址:https://jsfiddle.net/allan91/2h1sf0ky/8/ & ...
- React前端有钱途吗？《React+Redux前端开发实战》学起来
再不学React就真的跟不上大前端的形式了,目前几乎所有前端的招聘条件都是精通React者优先,看看拉勾网的React薪资,都是15K-20K,这个暑假,必须动起来了. 如果你熟悉JavaScript ...
- webpack+react+redux+es6开发模式---续
一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...
- React Native移动开发实战-4-Android平台的适配原理
打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- React Native移动开发实战-5-Android平台的调试技巧
Android平台的调试和其他平台的调试也很类似,例如:在Android Studio打开的工程中,打开源码MainActivity.java,然后,将鼠标移至代码编辑区的左侧后,单击鼠标即可添加断点 ...
- React Native移动开发实战-3-实现页面间的数据传递
React Native使用props来实现页面间数据传递和通信.在React Native中,有两种方式可以存储和传递数据:props(属性)以及state(状态),其中: props通常是在父组件 ...
- React Native移动开发实战-2-如何调试React Native项目
在实际开发中,还有一个影响开发效率的重要因素:调试. 在1.4.3节中已经介绍了Enable Live Debugger的使用.本节来介绍另一个非常重要的调试选项:Debug JSRemotely选项 ...
随机推荐
- css 点击打开遮罩
<div> <nav class="bar bar-tab"> <a class="tab-item external" href ...
- C# 跨线程访问控件（MethodInvoker）
参考:https://www.cnblogs.com/lvdongjie/p/5428815.html .Net 通常禁止跨线程访问控件,设置Control.CheckForIllegalCrossT ...
- CSS定位——文档流定位
关于CSS的定位机制Ⅰ ㈠概念 对于盒子模型来说,也就是页面元素,这些盒子究竟在页面的什么位置,怎样排列它,那么找到它的位置,确定它的位置,这个就是定位机制所决定的. ㈡分类 文档流, 浮动定位,层定 ...
- static后期静态绑定
先说一下__CLASS__,get_class() , get_called_class() 区别: __CLASS__获取当前的类名, get_class()与上面一样,都是获取当前的类名, ge ...
- 使用git将代码上传到GitHub
使用git将代码上传到GitHub 结束了前一段的时间的杂七杂八的生活,最近又快开始动一动已经吃了好长时间土的GitHub,以前的git指令基本上忘个差不多,现在记录一下,利用git将代码上传. ...
- [HG]走夜路 题解
前言 整个机房就我一个人在想动态规划. 想了半天发现一堆性质,结果由于DP中出现折线挂了. 题目描述 某NOIP普及组原题加强版. \(Jim\) 非常怕黑,他有一个手电筒,设手电筒的电量上限为 \( ...
- hash索引
hash算法 哈希表(hash table ,也叫散列表),是根据关键码值(key value)而直接进行访问的数据结构.也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度.这个 ...
- [LOJ2538][PKUWC2018]Slay the Spire：DP
分析 学会新姿势!我们可以通过调整DP顺序来体现选取物品的优先顺序! 显然选取强化牌的最优策略是倍数从高到低,能选就选,最多选\(k-1\)张,选取攻击牌的最优策略是伤害从高到低,尽量少选,但最少选\ ...
- ImageIO类说明
最近的项目中遇到ImageIO,因此记录下这个类的用法 一.ImageIO: 这个类中的方法都是静态方法,可以用来进行简单的图片IO操作 1.读入的三种方法 public static Buffere ...
- 使用 SpringBoot+Dubbo 搭建一个简单分布式服务
实战之前,先来看几个重要的概念 开始实战之前,我们先来简单的了解一下这样几个概念:Dubbo.RPC.分布式.由于本文的目的是带大家使用SpringBoot+Dubbo 搭建一个简单的分布式服务,所以 ...