首页
所有分类
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 相关文章推荐
JavaScript学习笔记（十七）js 优化
Feb 04 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
JS实现评价的星星功能
Aug 20 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 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
触发器(3) Hash(1) html5+(1) Geospatial(1) plus.io(1) Vmware(3) 磁盘管理(1) RabbitMQ(3) 虚拟机(3) 入门基础(1)
You might like
php zend 相对路径问题
2009/01/12 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
php header功能的使用
2013/10/28 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php自定义分页类完整实例
2015/12/25 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
[03:27]最受玩家喜爱奖提名：PZH_Element 致玩家寄语
2016/12/20 DOTA
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
使用python解析xml成对应的html示例分享
2014/04/02 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
护理专业本科生自荐信
2013/10/01 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
文明班集体申报材料
2014/05/23 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
药店营业员岗位职责
2015/04/14 职场文书
基层党建工作简报
2015/07/21 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技