WebPack基础知识详解资源-CSDN文库

175 浏览量 2020-11-27 03:35:21 上传评论收藏 139KB PDF 举报

资源推荐

资源详情

资源评论

WebPack基础知识详解基础知识详解

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

2、、CSS modules

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38621565

粉丝: 4
资源: 959

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip