webpack是什么?webpack打包原理介绍

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

webpack是什么?webpack又有什么用?本篇文章将来给大家介绍一下webpack的含义以及webpack的使用方法,有需要的朋友可以看一看,希望对你有所帮助。

话不多说,我们直接进入正题~

webpack是什么?

我们从官网上可以知道:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

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

所以接下来我们就来看看webpack有什么用?

我们先来简单说一下webpack的工作原理:

在一个配置文件中,指明对某些文件进行编译、压缩、组合等任务。把你的项目当成一个整体,通过一个给定的主文件(index.js),webpack将从这个文件开始找到你的项目的所有的依赖文件,使用loaders处理他们,最后打包为一个浏览器可以识别的js文件。

webpack的理念就是一切皆模块化,把一堆的css文件和js文件放在一个总的入口文件,通过require引入,剩下的事情webpack会处理,包括所有模块的前后依赖关系,打包、压缩、合并成一个js文件,公共代码抽离成一个js文件、某些自己指定的js单独打包,模块可以是css/js/imsge/font等等。

下面我们就具体来看webpack的用法

1、webpack可以根据模板生成HTML,并自动处理上面的css/js引用路径

2、webpack可以自动处理<img>里面的图片路径,css里面背景图的路径,字体引用

3、webpack可以开启本地服务器,一边改写代码,一边自动更新页面内容

4、webpack可以编译jsx es6 sass less coffescript等,并添加md5、sourcemap等辅助

5、webpack可以异步加载内容,不需要时不加载到DOM

6、webpack可以配合vue.js和react.js等框架开发。

本篇文章到这里就全部结束了,更多关于webpack相关知识大家可以关注5G云资源分享网!!!

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » webpack是什么?webpack打包原理介绍

发表评论

提供最优质的资源集合

立即查看 了解详情