webpack入门必知必会


Posted in Javascript onJanuary 16, 2017

前言

这是我第一篇介绍webpack的文章,先从一个入门教程开始吧,后续会有更多相关webpack的文章推出。

首先什么是webpack?如果说它是一个打包工具那真的是有点大材小用了。我个人认为webpack是一个集前端自动化、模块化、组件化于一体的可拓展系统,你可以根据自己的需要来进行一系列的配置和安装,最终实现你需要的功能并进行打包输出。

本文作为一篇入门教程,这里先从webpack最简单的3招开始介绍,即拆分、打包、压缩。

webpack入门必知必会

步骤

1.传统项目中的问题

在不依赖任何自动化、模块化工具的项目中,通常我们的代码是这样的:

index.html

<html>
 <head>
 <title>传统项目</title>
 <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
 </head>
 <body>
 <script src="app/index.js"></script>
 </body>
</html>

app/index.js

function main() {
 $('body').html('hello world!');
}
main();

 以上示例中,脚本之间存在着隐式依赖关系。

index.js取决于被包括在页面运行之前的jQuery,它只是假设有一个全局变量$的存在。

这样管理JavaScript项目有一些问题:

如果依赖项丢失,或者包含在错误的顺序中,应用程序将不会运行。

如果包含依赖项但没有使用,那么浏览器必须下载很多不必要的代码。

所以为了解决以上问题,我们需要使用webpack来实现一些改变。

2.准备

首先我们得在项目中安装webpack,我们打开命令行工具运行:

mkdir demo && cd demo // 新建demo文件夹并打开
npm init // 初始化npm,生成package.json配置文件
npm install --save-dev webpack@beta // 安装webpack2.0版本,mac系统可能需要添加sudo命令

以上使用的npm命令需要安装node.js,可以点击这里安装即可:node.js

为了改进上方传统项目中的不足,我们这里还需要安装jQuery:

npm install --save jQuery // 安装jQuery

3.改变

改变后的index.js

var $ = require('jquery');
function main() {
 $('body').html('hello world!');
}
main();

这里我们可以直接在index.js里引用jQuery,index.js明确要求jQuery的存在,这样就不存在隐式依赖的问题(没有全局污染)。

改变后的index.html

<html>
 <head>
 <title>webpack项目</title>
 </head>
 <body>
 <script src="dist/bundle.js"></script>
 </body>
</html>

这里我们的index.html文件只引入了最终打包后的bundle.js。现在运行webpack命令将index.js输出为bundle.js。

运行命令:webpack app/index.js dist/bundle.js

webpack app/index.js dist/bundle.js
Hash: 3bb91a6dedfc2a2a1c08
Version: webpack 2.2.0-rc.4
Time: 397ms
 Asset Size Chunks Chunk Names
bundle.js 270 kB 0 [emitted] [big] main
 [0] ./~/jquery/dist/jquery.js 267 kB {0} [built]
 [1] ./app/index.js 83 bytes {0} [built]

最终我们在浏览器中打开index.html页面可以看到输出的“hello world!”。

webpack入门必知必会

4.拆分

现在如果我们index.js中的”hello world!”字符串需要放到另外一个hello.js中,然后在index.js中引入使用的话,这就涉及到webpack模块拆分的功能。

app/index.js

var $ = require('jquery');
var str = require('./hello.js');
function main() {
 $('body').html(str);
}
main();

app/hello.js

var str = 'hello world!';
module.exports = str;

我们在hello.js中通过module.exports导出str变量,然后在index.js通过require导入同样可以实现浏览器中输入“hello world!”的效果,当然我们需要重新运行下webpack命令:webpack app/index.js dist/bundle.js

5.打包

其实在上面我们已经使用了打包命令:

webpack app/index.js dist/bundle.js

其中的app/index.js即为打包的入口文件,而dist/bundle.js为输出文件。

但是我们会发现这样的命令不利于我们复杂项目配置的使用,对于更复杂的配置,我们可以利用配置文件webpack.config.js来统一管理。

我们可以在demo文件夹下新建webpack.config.js配置文件:

module.exports = {
 entry: './app/index.js',
 output: {
 filename: 'bundle.js',
 path: './dist'
 }
}

上方配置中的entry就是我们的入口文件,可以有多个入口文件,而output即为webpack打包的输入对象,filename为输出文件名,path为输出路径。

如此我们运行命令行:

webpack --config webpack.config.js

同样可以生成打包目录dist及打包文件bundle.js。

当然你也可以直接运行简化的命令:

webpack

webapck会自动去寻找当前目录下的webpack.config.js文件。

6.压缩

上一步我们利用webpack命令将多个多件打包到了一个bundle.js的文件中,但是并未进行压缩,你可以打开bundle.js进行查看。

而如果我们需要对打包后的代码进一步压缩处理,我们可以运行命令:

webpack -p

这时我们可以来进行下打包和压缩的文件大小对比

打包命令:webpack

webpack
Hash: ab4a1091f0880100eab0
Version: webpack 2.2.0-rc.4
Time: 387ms
 Asset Size Chunks Chunk Names
bundle.js 270 kB 0 [emitted] [big] main
 [0] ./app/hello.js 50 bytes {0} [built]
 [1] ./~/jquery/dist/jquery.js 267 kB {0} [built]
 [2] ./app/index.js 114 bytes {0} [built]

输出的bundle.js整个文件大小为270 kB。

压缩命令:webpack -p

webpack -p
Hash: ab4a1091f0880100eab0
Version: webpack 2.2.0-rc.4
Time: 1967ms
 Asset Size Chunks Chunk Names
bundle.js 88.3 kB 0 [emitted] main
 [0] ./app/hello.js 50 bytes {0} [built]
 [1] ./~/jquery/dist/jquery.js 267 kB {0} [built]
 [2] ./app/index.js 114 bytes {0} [built]

输出的bundle.js整个文件大小为88.3 kB。

很明显,文件被压缩了。

7.进一步压缩优化

上方我们通过webpack的压缩命令将文件打包并压缩了,但是对于webpack -p压缩后的文件来说其实还有压缩的余地。如果你使用的是webpack1.0,那么你可以在配置文件中添加plugins配置项,并且加入如下插件:

var webpack = require('webpack');
module.exports = {
 ...
 plugins:[
 // 去除代码块内的告警语句
 new webpack.optimize.UglifyJsPlugin({
 compress: {
 warnings: false
 }
 }),
 // 优先考虑使用最多的模块,并为它们分配最小的ID
 new webpack.optimize.OccurenceOrderPlugin()
 ]
 ...
}

而本示例中使用的是webpack2.0版本,在2.0中UglifyJsPlugin的compress选项默认为false,并且OccurrenceOrderPlugin默认启用,所以无需进行配置。

结语

本文主要介绍了webpack入门的一些简单命令和基本配置信息,从代码拆分、打包、压缩的角度和传统的前端项目进行对比,希望以此加深大家对webpack基础知识的印象。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
一些常用的JS功能函数(2009-06-04更新)
Jun 04 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 #Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 #Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 #Javascript
Javascript的this用法
Jan 16 #Javascript
jQuery向webApi提交post json数据
Jan 16 #Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 #Javascript
jQuery插件扩展操作入门示例
Jan 16 #Javascript
You might like
PHP 和 MySQL 基础教程(二)
2006/10/09 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
英文简历中的自荐信范文
2013/12/14 职场文书
自荐书4要点
2014/01/25 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
初中教师业务学习材料
2014/05/12 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
单位租房协议书范本
2014/12/04 职场文书
学习保证书
2015/01/17 职场文书
婚前保证书范文
2015/02/28 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
详解Golang如何优雅的终止一个服务
2022/03/21 Golang