【前端开发】前端自动化构建工具 Webpack

什么是Webpack：

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

在学习本课程前，你可以先看下阿里云大学全新“学+测”模式，提供前端基础测试题（当前已有531人参加), 评估你的前端基础水平，参加测试后学习提升效果更精准！马上开始测试：测试入口点击这里

更多关于Webpack的内容：前端自动化构建工具 Webpack

为什要使用WebPack：

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

a:模块化，让我们可以把复杂的程序细化为小的文件;

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

c:scss，less等CSS预处理器

.........

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

WebPack的工作方式：

Webpack会把我们的项目当做一个整体，通过一个给定的主文件（如: index.js），Webpack将从这个 给定的主文件 开始找到你的项目的所有依赖文件，使用loaders处理它们。最后打包成一个或多个浏览器可识别的JavaScript文件.

如下图所示：​

webpack有什么优点？

同时支持CommonJS和AMD模块；
串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持；
可以基于配置或者智能分析打包成多个文件，实现公共模块或者按需加载；支持对CSS，图片等资源进行打包，从而无需借助Grunt或Gulp
开发时在内存中完成打包，性能更快，完全可以支持开发过程的实时打包需求
对sourcemap有很好的支持，易于调试

更多精品技术课程：

阿里云大学官网（阿里云大学 - 官方网站，云生态下的创新人才工场）

转载于:https://juejin.im/post/5ceb9ac3f265da1bc55241c1