WebPack基础知识详解


Posted in Javascript onJanuary 16, 2017

1、什么是Webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

2、为什要使用WebPack

今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法

a:模块化,让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能能装换为JavaScript文件使浏览器可以识别;

c:scss,less等CSS预处理器

.........

这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的,这就为WebPack类的工具的出现提供了需求。

3、WebPack和Grunt以及Gulp相比有什么特性

其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。

Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具之后可以自动替你完成这些任务。

Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。

优点:模块化

在webpack看来一切都是模块!这就是它不可不说的优点,包括你的JavaScript代码,也包括CSS和fonts以及图片等等等,只有通过合适的loaders,它们都可以被当做模块被处理。

1、CSS

webpack提供两个工具处理样式表,css-loader 和 style-loader,二者处理的任务不同,css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

需要分别安装:npm install --save-dev style-loader css-loader

WebPack基础知识详解

2、CSS modules

在过去的一些年里,JavaScript通过一些新的语言特性,更好的工具以及更好的实践方法(比如说模块化)发展得非常迅速。模块使得开发者把复杂的代码转化为小的,干净的,依赖声明明确的单元,且基于优化工具,依赖管理和加载管理可以自动完成。

不过前端的另外一部分,CSS发展就相对慢一些,大多的样式表却依旧是巨大且充满了全局类名,这使得维护和修改都非常困难和复杂。

最近有一个叫做 CSS modules 的技术就意在把JS的模块化思想带入CSS中来,通过CSS模块,所有的类名,动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持,在CSS loader中进行配置后,你所需要做的一切就是把”modules“传递都所需要的地方,然后就可以直接把CSS的类名传递到组件的代码中,且这样做只对当前组件有效,不必担心在不同的模块中具有相同的类名可能会造成的问题。具体的代码如下

WebPack基础知识详解

这样相同的类名也不会互相污染

3、CSS预编译

Sass 和 Less之类的预处理器是对原生CSS的拓展,它们允许你使用类似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS,CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句,

你现在可能都已经熟悉了,在webpack里使用相关loaders进行配置就可以使用了,以下是常用的CSS 处理loaders

a:less-loader

b:sass-loader

c:stylus-loader

还有一个CSS处理平台-PostCSS,可以让你用CSS事先更多功能,比如如何使用PostCSS,我们使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。

首先安装postcss-loader 和 autoprefixer(自动添加前缀的插件)

npm install --save-dev postcss-loader autoprefixer

并在webpack配置文件中进行设置,只需要新建一个postcss关键字,并在里面申明依赖的插件,如下,现在你写的css会自动根据Can i use里的数据添加不同前缀了。

WebPack基础知识详解

二、webpack-pulgins

插件(Plugins)是用来拓展Webpack功能的,它们会在整个构建过程中生效,执行相关的任务。

Loaders和Plugins常常被弄混,但是他们其实是完全不同的东西,可以这么来说,loaders是在打包构建过程中用来处理源文件的(JSX,Scss,Less..),一次处理一个,插件并不直接操作单个文件,它直接对整个构建过程其作用。

Webpack有很多内置插件,同时也有很多第三方插件,可以让我们完成更加丰富的功能。

1、如何使用插件?

要使用某个插件,我们需要通过npm安装它,然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例(plugins是一个数组),我们添加了一个实现版权声明的插件。如HtmlWebpackPugin插件,

该插件的作用是依据一个简单的模板,帮你生成最终的Html5文件,这个文件中自动引用了你打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。

//安装

npm install --save-dev html-webpack-pugin

WebPack基础知识详解

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

Javascript 相关文章推荐
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
微信小程序实现日历效果
Dec 28 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 #Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 #Javascript
函数四种调用模式以及其中的this指向
Jan 16 #Javascript
js实现导航栏中英文切换效果
Jan 16 #Javascript
Bootstrap面板使用方法
Jan 16 #Javascript
codeMirror插件使用讲解
Jan 16 #Javascript
微信小程序 图片边框解决方法
Jan 16 #Javascript
You might like
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
JavaScript 数组循环引起的思考
2010/01/01 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
python通过socket查询whois的方法
2015/07/18 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
python调用百度语音识别api
2018/08/30 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
如何清空Session
2015/02/23 面试题
中职三好学生事迹材料
2014/08/24 职场文书
2015年林业工作总结
2015/05/14 职场文书
大学副班长竞选稿
2015/11/21 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL