这次搭建分为两部分：一部分是前期必要配置，一部分是开发React代码。

【基于Webpack的React Hello World项目】

1．前期必要配置

（1）首先要确保读者的开发设备上已经安装过Node.js，新建一个项目：

  1. mkdir react-hello-world
  2. cd react-hello-world
  3. npm init -y

（2）项目中使用的是Webpack 4.x，在项目根目录下执行：

  1. 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。

  1. touch webpack.config.js

然后配置内容如下：

  1. var webpack = require('webpack');
  2.  
  3. var path = require('path');
  4.  
  5. var APP_DIR = path.resolve(__dirname, 'src');
  6.  
  7. var BUILD_DIR = path.resolve(__dirname, 'build');
  8.  
  9. var config = {
  10.  
  11.   entry: APP_DIR + '/index.jsx',                   // 入口
  12.  
  13.   output: {
  14.  
  15.     path: BUILD_DIR,                                  // 出口路径
  16.  
  17.     filename: 'bundle.js'                               // 出口文件名
  18.  
  19.   }
  20.  
  21. };
  22.  
  23. module.exports = config;

这是Webpack使用中最简单的配置，只包含了打包的入口和出口。APP_DIR表示当前项目的入口路径，BUILD_DIR表示当前项目打包后的输出路径。

（4）上面配置的入口需要新建一个应用的入口文件./src/index.jsx，我们让其打印简单的一句：

  1. console.log('Hello World’);

（5）用终端在根目录下执行：

  1. ./node_modules/.bin/webpack -d

上面的命令在开发环境运行之后，会在根目录下生成一个新的build文件夹，里面包含了Webpack打包的bundle.js文件。

（6）接下来创建index.html，用于在浏览器执行bundle.js ：

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4.  
  5. <head>
  6.  
  7.     <meta charset="UTF-8">
  8.  
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.  
  11.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  12.  
  13.     <title>Hello World</title>
  14.  
  15. </head>
  16.  
  17. <body>
  18.  
  19.     <div id=“app”></div>
  20.  
  21.     <!--bundle.js是Webpack打包后生成的文件-->
  22.  
  23.     <script src="build/bundle.js" type="text/javascript"></script>
  24.  
  25. </body>
  26.  
  27. </html>

　　现在读者可以在浏览器中打开index.html文件，在控制台能看到./src/index.jsx打印的内容：Hello World 。

（7）为了提高效率和使用最新的ES语法，通常使用JSX和ES 6来进行开发。但JSX和ES6语法在浏览器中还没有被完全支持，所以需要在Webpack中配置相应的loader模块来编译它们。只有这样，打包出来的bundle.js文件才能被浏览器识别和运行。

接下来安装Babel：

  1. 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：

  1. var webpack = require("webpack");
  2.  
  3. var path = require("path");
  4.  
  5. var BUILD_DIR = path.resolve(__dirname, "build");           // 构建路径
  6.  
  7. var APP_DIR = path.resolve(__dirname, "src");                            // 项目路径
  8.  
  9. var config = {
  10.  
  11.   entry: APP_DIR + "/index.jsx",                                              // 项目入口
  12.  
  13.   output: {
  14.  
  15.     path: BUILD_DIR,                                                               // 输出路由
  16.  
  17.     filename: "bundle.js"                                                                   // 输出文件命名
  18.  
  19.   },
  20.  
  21.   module: {
  22.  
  23.     rules: [
  24.  
  25.       {
  26.  
  27.         test: /\.(js|jsx)$/,                                                            // 编译后缀为js和jsx格式文件
  28.  
  29.         exclude: /node_modules/,
  30.  
  31.         use: {
  32.  
  33.           loader: "babel-loader"                                           // 使用babel-loader这个loader库
  34.  
  35.         }
  36.  
  37.       }
  38.  
  39.     ]
  40.  
  41.   }
  42.  
  43. };
  44.  
  45. module.exports = config;

（9）创建.babelrc文件：

  1. touch .babelrc

配置相应内容来告诉babel-loader使用ES6和JSX插件：

  1. {
  2.  
  3.   "presets" : ["env", "react"]
  4.  
  5. }

至此为止，已经配置完开发该项目的基础工作。

《海贼王》中罗杰说，每个人都有自己出场的机会！在将来，React可能会在前端历史的浪潮中被人遗忘，但今天，React的设计思想影响了无数的开发者，当下正是属于它的时代！！

《React+Redux前端开发实战》笔记2：基于Webpack构建的Hello World案例（上）的更多相关文章

  1. 《React+Redux前端开发实战》笔记3：基于Webpack构建的Hello World案例（下）

    2．使用React编码 下面正式开始使用React来编写前端代码. (1)npm安装react和react-dom: npm install react react-dom -S (2)用下面代码替换 ...

  2. 《React+Redux前端开发实战》笔记1：不涉及React项目构建的Hello World案例

    本小节实现一个不涉及项目构建的Hello World. [React的第一个Hello World网页] 源码地址:https://jsfiddle.net/allan91/2h1sf0ky/8/ & ...

  3. React前端有钱途吗？《React+Redux前端开发实战》学起来

    再不学React就真的跟不上大前端的形式了,目前几乎所有前端的招聘条件都是精通React者优先,看看拉勾网的React薪资,都是15K-20K,这个暑假,必须动起来了. 如果你熟悉JavaScript ...

  4. webpack+react+redux+es6开发模式---续

    一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...

  5. React Native移动开发实战-4-Android平台的适配原理

    打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. ...

  6. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  7. React Native移动开发实战-5-Android平台的调试技巧

    Android平台的调试和其他平台的调试也很类似,例如:在Android Studio打开的工程中,打开源码MainActivity.java,然后,将鼠标移至代码编辑区的左侧后,单击鼠标即可添加断点 ...

  8. React Native移动开发实战-3-实现页面间的数据传递

    React Native使用props来实现页面间数据传递和通信.在React Native中,有两种方式可以存储和传递数据:props(属性)以及state(状态),其中: props通常是在父组件 ...

  9. React Native移动开发实战-2-如何调试React Native项目

    在实际开发中,还有一个影响开发效率的重要因素:调试. 在1.4.3节中已经介绍了Enable Live Debugger的使用.本节来介绍另一个非常重要的调试选项:Debug JSRemotely选项 ...

随机推荐

  1. HDU - 6582 Path (最短路+最小割)

    题意:给定一个n个点m条边的有向图,每条边有个长度,可以花费等同于其长度的代价将其破坏掉,求最小的花费使得从1到n的最短路变长. 解法:先用dijkstra求出以1为源点的最短路,并建立最短路图(只保 ...

  2. 【hiho1715】树的联通问题

    题目大意:给定一棵 1~n 标号的树.Tree[L,R]表示最少需要选择的边的数量使得 L~R 号点两两连通.求: \[ \sum_{L=1}^{n} \sum_{R=L}^{n} \operator ...

  3. Python 操作 MySQL 数据库Ⅳ

    执行事务 事务机制可以确保数据一致性. 事务应该具有4个属性:原子性.一致性.隔离性.持久性.这四个属性通常称为ACID特性. 原子性(atomicity).一个事务是一个不可分割的工作单位,事务中包 ...

  4. ovs-vsctl patch 连接两个网桥

    1.命令如下: ovs-vsctl add-port bridge-name port-name ovs-vsctl set interface port-name type=patch ovs-vs ...

  5. Linux 环境安装运行Sqlmap

    1.官网下载 .tar.gz 文件   官网地址:http://sqlmap.org/ 2.登录访问linux环境,将压缩包放入/usr/local 路径. 3.在该路径下通过 tar -xzvf f ...

  6. task.delay 和 thread.sleep

    1.Thread.Sleep 是同步延迟. Task.Delay异步延迟. 2.Thread.Sleep 会阻塞线程,Task.Delay不会. 3.Thread.Sleep不能取消,Task.Del ...

  7. python 随机数详细使用，推到以及字符串，双色球小程序

    #随机数的使用import random #导入randomrandom.randint(0,9)#制定随机数0到9i=random.sample(range(1,34),6)#输出6个随机数,范围是 ...

  8. 数据重塑图解—Pivot, Pivot-Table, Stack and Unstack

    Pivot pivot函数用于创建一个新的派生表,该函数有三个参数:index, columns和values.你需要在原始表中指定这三个参数所对定的列名,接下来pivot函数会创建一个新的表格,其中 ...

  9. WebView的基础用法

    新建一个WebView项目,然后修改activity_main.xml布局文件中的代码,如下所示: <LinearLayout xmlns:android="http://schema ...

  10. 设置Google浏览器不缓存JS

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...