您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

WebPack 介绍

WebPack 介绍

webpack 是现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建 依赖图(dependency graph),此依赖图会映射项目所需的每个模块,并或多个 bundle。

为什要使用 WebPack

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

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

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

Scss,less等CSS预处理器

...

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

什么是 Webpack

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

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

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

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

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

如果实在要把二者进行比较,Webpack的处理速度更快更直接,能打包更多不同类型的。

可以在 这里 了解更多关于 JavaScript 模块和 webpack 模块的信息。

从 v4.0.0 开始,webpack 可以不用再引入来打包项目,然而,但它仍然有着 高度可配置性,可以很好满足你的需求。

在开始前你需要先理解一些核心概念:

入口(entry)

(output)

loader

(plugin)

模式(mode)

浏览器兼容性(browser compatibility)

本文档旨在给出这些概念的高度概述,同时提供具体概念的详尽相关用例。

为了更好地理解模块打包工具背后的理念,以及在底层它们是如何运作的,请参考以下资源:


联系我
置顶