首页
所有分类
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 DOM操作小结与实例
Jan 07 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
jQuery实现日历效果
Sep 11 jQuery
uniapp微信小程序实现一个页面多个倒计时
Nov 01 Javascript
微信小程序调用后台service教程详解
Nov 06 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
mysql.user(1) offset(1) limit(1) turtle(1) 逻辑架构(1) 计时器(1) Mysql报错(1) MYSQL函数(1) 绘图(1) 定时任务(2)
You might like
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
javaScript中封装的各种写法示例（推荐）
2017/07/03 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
python学习 流程控制语句详解
2016/06/01 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
python ftplib模块使用代码实例
2019/12/31 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
服务标语大全
2014/06/18 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书