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文字滚动停顿效果代码
Jun 28 Javascript
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 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应用中使用XOR运算加密算法分享
2011/08/28 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
php基础教程
2015/08/26 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
python中的随机函数random的用法示例
2018/01/27 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
python支持多线程的爬虫实例
2019/12/21 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
大学生毕业自荐信
2013/10/10 职场文书
医学专业大学生求职的自我评价
2013/11/27 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
就业推荐表导师评语
2014/12/31 职场文书
小学安全工作总结2015
2015/05/18 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
Go语言入门exec的基本使用
2022/05/20 Golang
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技