详解基于webpack搭建react运行环境


Posted in Javascript onJune 01, 2017

最近由于项目需要,所以尝试使用webpack搭建react运行环境,在克服了一系列困难后,终于能在页面输出"Hello World",特地把整个过程记录下来,利人利己。

首先我创建了一个文件夹webpack-helloworld-demo,之后的大部分操作都会在这个文件夹下进行。

1.初始化文件夹

npm init //初始化一个package.json文件
git init  //产生.git文件,便于之后版本提交回退

2.搭建webpack环境

npm install webpack --save-dev //安装webpack依赖

--save建议使用,这样当别人clone你的代码时,只需要npm install就可以安装好所有需要的依赖,并且你也可以在你的package.json文件夹中看到你使用的哪些依赖。

现在我们可以测试下webpack有没有安装成功,在文件夹根目录下创建三个文件,分别是entry.jsbundle.jsindex.html,文件内容分别如下。

//entry.js
document.write('Hello World');
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

bundle.js内容为空

执行命令行:webpack ./entry.js bundle.js

之后会发现bundle.js文件下有好多代码出现,这就是经过webpack打包后的文件。在浏览器打开index.html,页面会出现Hello World,webpack安装成功!

3.配置webpack

创建webpack.config.js文件,进行如下基本配置

module.exports = {
  entry: "./entry.js", // 要打包的入口文件
  output: {        //打包后的文件
    path: __dirname,  //表示使用绝对路径
    filename: "bundle.js" //输出文件名
  },
  module: {
    loaders: [      //用于加载一些静态文件夹(css样式,图片之类)
     { test: /\.css$/, loader: "style!css" },
     {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/, //不进行转换的文件,可以提高打包速度
        query: {
          cacheDirectory: true,
          presets: ['react', 'es2015']
        }
      }
    ]
  }
};

执行命令:webpack

打开index.html出现Hello World,配置成功。

现在我们的文件目录如下:

详解基于webpack搭建react运行环境

4.express下运行

npm install express --save-dev

创建server.js

var express = require('express'); 
var app = express();

app.use(express.static('./')); //访问当前目录下的静态文件。默认访问index.html

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});
执行命令:
webpack // 用于打包文件
node server.js // 开启服务器

浏览器访问 http://localhost:3000/ , 页面显示Hello World,运行成功!

5.配置 React, ES6 & Babel 6

npm install react --save-dev
npm install react-dom --save-dev
npm install babel-loader --save-dev // 转换JSX
npm install babel-core --save-dev // babel的核心包
npm install babel-preset-es2015-dev // es2015的babel预设
npm install babel-preset-react-dev // react的babel预设

创建文件.babelrc

{
  "presets": [
   "es2015",
   "react"
  ]
 }

接下来就是写react小例子测试啦,在entry.js写入:

import React, {Component} from 'react';
import {render} from "react-dom";

class HelloMessage extends React.Component {

  render() {
    return <div>Hello World</div>;
  }
}
render(<HelloMessage />, document.getElementById('app'));

为了将组件渲染到页面,我们需要在index.html中添加一个相当于容器的div:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<div id="app"></div> // 添加的div,渲染至div中
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

浏览器访问 http://localhost:3000/ , 页面显示Hello World,运行成功!

现在我们的文件目录为:

详解基于webpack搭建react运行环境

至此我们就搭建好了一个简单的环境啦~

框架Github地址:https://github.com/DQing/webpack-helloworld-demo.git

大家在搭建框架时不要忘了小步提交。

还可以进行一些额外的配置,步骤其实都差不多

框架Github地址:https://github.com/DQing/jishiben.git

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中需要注意的细节问题小结
Dec 06 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 #jQuery
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 #Javascript
node.js中fs.stat与fs.fstat的区别详解
Jun 01 #Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 #Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 #Javascript
详解vue过滤器在v2.0版本用法
Jun 01 #Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 #Javascript
You might like
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
php验证session无效的解决方法
2014/11/04 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
利用Python读取文件的四种不同方法比对
2017/05/18 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
Django URL参数Template反向解析
2020/11/24 Python
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
好的自荐信的要求
2013/10/30 职场文书
党章培训心得体会
2014/09/04 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
Redis RDB技术底层原理详解
2021/09/04 Redis
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL