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的拖动布局插件
Nov 25 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 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
用mysql内存表来代替php session的类
2009/02/01 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
python字典DICT类型合并详解
2017/08/17 Python
Python中进程和线程的区别详解
2017/10/29 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
通信生自我鉴定
2014/01/18 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
毕业生对母校寄语
2015/02/26 职场文书
2015年药房工作总结
2015/04/25 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书