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 相关文章推荐
javaScript同意等待代码实现心得
Jan 01 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
Element Backtop回到顶部的具体使用
Jul 27 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
php设计模式 State (状态模式)
2011/06/26 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
HTML颜色选择器实现代码
2010/11/23 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
Python中的zipfile模块使用详解
2015/06/25 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
wxPython实现分隔窗口
2019/11/19 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
全国法制宣传日活动总结2014
2014/11/01 职场文书
合作意向协议书
2015/01/29 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang