首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

React+Webpack快速上手指南(小结)

Posted in Javascript onAugust 15, 2018

前言

这篇文章不是有关React和Webpack的教程，只是一篇能够让你快速上手使用目前这两种热门技术的前端指南，并假设你对两者有一个基本的认识。如果你想先行了解下React，可以放肆的移步至 React官方教程，如果你已经使用了其他的模块加载与资源打包技术，不妨也来看看 Webpack 提供的思路。

webstorm+react+webpack

强烈推荐使用webstorm！。（当然你完全可以使用诸如atom，Sublime之类的编辑器，但之所以选择webstorm是因为它默认支持对react JSX 的语法高亮以及可以手动开启Emmet对jsx的支持，棒棒哒~）

首先请这么组织你的项目结构：

--your project
 |--app
 |--components
  |--productBox.jsx
 |--main.js
 |--build
 |--index.html
 |--bundle.js(该文件是webpack打包后生成的)

用npm安装react、webpack

默认已经安装了nodejs，并输入：npm init根据提示输入内容并创建package.json文件

然后依次输入：

npm install react --save-dev
npm install webpack --save-dev

安装最新版本的React与Webpack并将它们保存至package.json内的开发依赖项目中。

创建webpack.config.js配置文件

新建一个名为webpack.config.js的文件，它应该长这个样：

var path = require('path');

module.exports = {
 entry: path.resolve(__dirname, './app/main.js'),
 output: {
 path: path.resolve(__dirname, './build'),
 filename: 'bundle.js',
 }
};

其中entry指定了webpack的入口程序，好比c++和java中的main程序一样，我们把最终要插入到页面指定位置的react模板写入main.js中：

app/main.js

var React = require('react');
var AppComponent = require('./components/productBox.js');
React.render(<AppComponent />, document.getElementById('content'));

以及引入的自定义react组件：

app/components/productBox.js

var React = require('react');
var ProductBox = React.createClass({
 render: function () {
 return (
  <div className="productBox">
  Hello World!
  </div>
 );
 }
});

module.exports = ProductBox;

而output则指定了webpack打包成功之后文件名称以及文件的存放位置。

依照之前指定的项目结构，我们可以在index.html中直接引入打包生成的bundle.js，像这样：

build/index.html

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>React Test</title>
</head>
<body>
 <div id="content"></div>
 <script src="bundle.js"></script>
</body>
</html>

安装并启用webpack-dev-server

webpack-dev-server允许我们可以把本地项目跑在像nginx那样的web服务器上，更重要的是我们可以在package.json文件内定义scripts，同时修改webpack的配置文件来达到类似BrowserSync（即文件修改能被监听，并自动刷新浏览器）的效果！

我们先打开package.json，并找到scripts代码块。在没引入webpack-dev-server之前，我们运行这个项目的姿势是这样的：
修改scripts为

"scripts": {
 "build": "webpack"
}

并且执行：

npm run build

项目就跑起来啦，但是每次修改程序我们都要手动输入npm run build来跑项目，这无疑是一件非常蛋疼的事情。但有了webpack-dev-server光环，我们的姿势应该是这样的：

为scripts添加

"scripts": {
 "build": "webpack",
 "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
}

ps：dev里各属性值的意思是：

  1. webpack-dev-server: 在 localhost:8080 建立一个 Web 服务器
  2. --devtool eval:为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
  3. --progress: 显示合并代码进度
  4. --colors: 在命令行中显示颜色
  5. --content-base build:指向设置的输出目录

并且在index.html里加入：

build/index.html

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>React Test</title>
</head>
<body>
 <div id="content"></div>
 <script src="http://localhost:8080/webpack-dev-server.js"></script>
 <script src="bundle.js"></script>
</body>
</html>

在webpack.config.js的入口处加入：

var path = require('path');

module.exports = {
 entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
 output: {
 path: path.resolve(__dirname, './build'),
 filename: 'bundle.js',
 }
};

以便在进行改动时浏览器可以自动刷新。

最后执行：

npm run dev

你只要在浏览器打开这个地址：http://localhost:8080，webpack-dev-server会为你准备好一切，你只要敲一敲键盘，save一下，所见即所得。

Webpack Loader

讲到这里，我们基本上就可以迅速搭建一个简单的web项目，但不得不提的是webpack loader。它是我个人认为相比于其他模块加载更牛X的地方，将它用于react的开发，结合react与生俱来的优越性能，两者天衣无缝的配合简直就是黄金组合。

总的来说webpack loader可以实现：

  1. 可以将React JSX语法转为js语句
  2. React开发中支持ES6语法
  3. 支持通过import来直接引入css、less、sass甚至是图片
  4. 支持css中引用的图片大小在某一大小范围之内直接转为BASE64格式

。。。。。等等等

为了能够让以上功能奏效，我们要先安装对应的：

babel-loader

npm install babel-loader --save-dev

css-loader

npm install css-loader --save-dev

less-loader

npm install less-loader --save-dev

style-loader

npm install style-loader --save-dev

url-loader

npm install url-loader --save-dev

而具体的实现，我们只要在webpack的配置文件中加入module属性里的loaders：

var path = require('path');

module.exports = {
 entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
 output: {
 path: path.resolve(__dirname, './build'),
 filename: 'bundle.js',
 },
 module: {
 loaders: [{
  test: /\.jsx?$/,
  loader: 'babel'
 }, {
  test: /\.css$/,
  loader: 'style!css'
 }, {
  test: /\.less$/,
  loader: 'style!css!less'
 },{ 
  test: /\.(png|jpg)$/, 
  loader: 'url?limit=25000' 
 }]
 }
};

通过指定文件后缀来执行对应的loader操作，我们甚至可以轻松的引入其他类型的文件，最后所有被引入进来的文件都会统统打包到bundle.js中去！

开发环境下的优化

在开发React组件的代码中，在webpack的帮助下我们都是通过require(‘react')的方式引入ReactJS，默认的require()方法会在webpack打包的时候去遍历ReactJS及其依赖。试想下，如果我们还引入了其他的库，例如jQuery、react-router、moment等，require都会以同样的方式去遍历，这会大大增加打包的时间。这显然会影响到开发的效率。

为了能够尽可能的加速打包过程，我们应该重写它的行为，鼓励在开发中使用依赖的压缩版本

假如我们只引入了react，我们可以这样修改webpack.config.js:

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

var config = {
 entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
 resolve: {
 alias: {
  'react': pathToReact
 }
 },
 output: {
 path: path.resolve(__dirname, './build'),
 filename: 'bundle.js'
 },
 module: {
 noParse: [pathToReact],
 loaders: [{
  test: /\.jsx?$/,
  loader: 'babel'
 }, {
  test: /\.css$/,
  loader: 'style!css'
 }, {
  test: /\.less$/,
  loader: 'style!css!less'
 },{ 
  test: /\.(png|jpg)$/, 
  loader: 'url?limit=25000' 
 }]
 }
};

module.exports = config;

resolve属性里的alias用来告诉webpack，当引入react时，试图去匹配压缩过的react；

而module中的noParse则是告诉当webpack尝试去解析压缩文件时，这种行为是不允许的。

当然啦，细心的你可能会发现当引入更多的库时，这样写多少会显得有点冗余，为此下面有个更加优雅的写法：

var path = require('path');
var node_modules_dir = path.join(__dirname, 'node_modules');
var deps = [ 
 'react/dist/react.min.js',
 'react-router/dist/react-router.min.js',
 'moment/min/moment.min.js'
];
var config = {
 entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
 resolve: {
 alias: {}
 },
 output: {
 path: path.resolve(__dirname, './build'),
 filename: 'bundle.js'
 },
 module: {
 noParse: [],
 loaders: [{
  test: /\.jsx?$/,
  loader: 'babel'
 }, {
  test: /\.css$/,
  loader: 'style!css'
 }, {
  test: /\.less$/,
  loader: 'style!css!less'
 },{ 
  test: /\.(png|jpg)$/, 
  loader: 'url?limit=25000' 
 }]
 }
};

deps.forEach(function (dep) {
 var depPath = path.resolve(node_modules_dir, dep);
 config.resolve.alias[dep.split(path.sep)[0]] = depPath;
 config.module.noParse.push(depPath);
});

module.exports = config;

瞬间biger起来了，待加以修饰之后，让我们更加便捷高效的享受React与Webpack带来的乐趣吧。

相关的代码请狠狠点击这里查看，自行体验下哈

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

React+Webpack快速上手指南(小结)

- Author -

Chester723

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
JS实现小米轮播图
Sep 21 Javascript
javascript实现计算器功能详解流程
Nov 01 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 #Javascript
关于微信小程序bug记录与解决方法
Aug 15 #Javascript
layui select获取自定义属性方法
Aug 15 #Javascript
Vue自定义toast组件的实例代码
Aug 15 #Javascript
JavaScript中set与get方法用法示例
Aug 15 #Javascript
基于JavaScript实现瀑布流布局
Aug 15 #Javascript
解决Layui 表单提交数据为空的问题
Aug 15 #Javascript
D1835(1) ATS-909X(1) 德生PL330(2) PHILIPS(3) 飞利浦(2) 德生9700DX(1) D1875(1) 山进(2) SANGEAN(1) L4X25T(1)
You might like
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
Javascript验证方法大全
2015/09/21 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
Python回调函数用法实例详解
2015/07/02 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
python安装Scrapy图文教程
2017/08/14 Python
Python3生成手写体数字方法
2018/01/30 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
纪伊国屋泰国网上书店：Kinokuniya泰国
2017/12/24 全球购物
Stutterheim瑞典：瑞典高级外套时装品牌
2019/06/24 全球购物
英国羊皮鞋类领先品牌：Just Sheepskin
2019/12/12 全球购物
优秀党支部事迹材料
2014/01/14 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
商业项目策划方案
2014/06/05 职场文书
银行先进个人总结
2015/02/15 职场文书
2016公司年会主持词
2015/07/01 职场文书
请病假条范文
2015/08/17 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
使用javascript解析二维码的三种方式
2021/11/11 Javascript
关于使用Redisson订阅数问题
2022/01/18 Redis