【云驻共创】作为前端开发者，学习webpack有必要吗？
前端项目日益复杂，构建系统已经成为开发过程中不可或缺的一个部分，而模块打包（module bundler）正是前端构建系统的核心。webpack能成为最流行的打包解决方案，并不是偶然。接下来就通过下面的这些问题深入的了解一下webpack吧。
一、 什么是webpack？
webpack，web是网络的意思，pack是包装的意思。本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。通俗的来讲，我们可以把webpack理解为一个模块处理工厂，我们把源代码交给webpack,由它去进行加工，拼装处理，最后产出最终的资源文件。
二、 学习webpack有必要吗？
答案肯定是有必要的。
（1）现在的网页其实可以看成是功能非常丰富的应用，它们拥有着一大堆的JavaScript代码和一大堆的依赖包。为了简化开发的复杂度，前端社区涌现出很多好的实践方法。比如模块化，让我们可以把较为复杂的代码细化为小的文件；类似于TypeScript这种在JavaScript基础上拓展的开发语言，使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；scss，less等CSS预处理器。这些改进确实大大的提高了我们的开发效率，但是利用他们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这时我们就很有必要学习一下webpack类的工具。
（2）现在node.js的快速发展，基于npm的第三方依赖包不能直接在浏览器中直接引入，所以需要借助webpack等构建工具来复用组件。而且现在当前留下的React，Vue和Angular的三大框架的一些语法特点，如JSX，{{}}等不能被浏览器直接解析，需要构建工具进行转换。所以，借助webpack等构建工具打包尤为重要，再则，webpack在各类打包工具中体现了优越的构建能力，例如功能强大、配置灵活，及特有的code spliting等，还有基于loader/plugin丰富的配套工具和生态。
（3）webpack 在GitHub上已拥有58.7k的star，在前端代码打包器领域内，算得上是时下最流行的前端打包工具。它可以分析各个模块的依赖关系，最终打包成我们常见的静态文件：.js、.css、.jpg、.png，极大地提升了开发至发布过程的效率。而且现在前端工程越来越受重视，不少大厂在面试前端时webpack相关知识点也是必考项。
（4）与其他工具相比，webpack还有其他优点，社区生态丰富；配置灵活和插件化扩展；官方更新迭代速度快。
三、 深入学习webpack
3.1 为什么选择webpack
（1）大多数团队在开发新项目时会采用紧跟时代的技术，这些技术几乎都会采用“模块化+新语言+新框架”，webpack 可以为这些新项目提供一站式的解决方案；
（2）Webpack 有良好的生态链和维护团队，能提供良好的开发体验和保证质量；
（3）Webpack 被全世界的大量 Web 开发者使用和验证，能找到各个层面所需的教程和经验分享；
（4）而且不同的时代有不同的产物，在 Npm Script 和 Grunt 时代，Web 开发要做的事情变多，流程复杂，自动化思想被引入，用于简化流程；在 Gulp 时代开始出现一些新语言用于提高开发效率，流程式处理思想的出现是为了简化文件转换的流程，例如将 ES6 转换成 ES5。在 Webpack 时代由于单页应用的流行，一个网页的功能和实现代码变得庞大，Web 开发向模块化改进。
3.2 学习webpack的难点
（1）入手webpack可能对其打包理念：一切皆模块感到困惑，在webpack中，不仅JS 是模块，例如HTML，CSS，图片等皆可为模块。
（2）其次就是webpack强大的插件扩展功能及其配置：entry、output、loaders、plugins 和基本概念热更新、code spliting等感到迷茫。
（3）最后就是对webpack打包优化，体积优化等的深入。
3.3 学习webpack的路线
（1）基础篇：webpack的基本用法；webpack的进阶用法
（2）进阶篇：编写可维护的webpack构建配置；webpack构建速度和体积优化
（3）原理篇：通过源码掌握webpack打包原理
3.4 webpack安装
（1）安装webpack之前需要安装Node.js，建议安装最新版本，使用旧版本容易出现各种问题，Node.js安装也非常简单。
Node.js的各种版本下载地址：https://nodejs.org/zh-cn/download/releases/
下载后缀为.msi版本的可以直接安装，无需配置各种环境变量。
安装完成之后可以用node -v，检验是否安装成功。
（2）运行以下命令安装webpack，npm install --save-dev webpack.
当你在本地安装 webpack 后，你能够从node_modules/.bin/webpack访问它的 bin 版本。
（3）如果你使用 webpack v4+ 版本，并且想要在命令行中调用 webpack，你还需要安装 CLI安装命令行为npm install --save-dev webpack-cli。
3.5 项目中使用webpack
（1）首先你需要创建一个index.html文件，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webpack</title>
</head>
<body>
</body>
</html>
（2）创建一个main.js文件，
function hello()
{
alert("Hello World!");
}
hello();
（3）然后编译main.js并打包到bundle.js,运行命令为：
$ webpack ./main.js bundle.js
如果成功完成的话，打包过程会显示日志。
3.6 webpack学习资料推荐
（1）官方文档:https://www.webpackjs.com/
这份官方文档还是比较好用的，从webpack的基础概念到入口起点再到输出等都有详细地介绍。其中的蓝色字体都是超链接，可以跳转到其他的教程中，比如箭头所指的“安装”，点击就可以跳转到webpack的安装教程中。
（2）学习书籍：《深入浅出webpack》
本书从实践出发，用简单易懂的例子带你快速入门webpack，再结合实际工作中常用的场景给出最佳实战，通过前3章的学习足以让你解决工作中的常见问题；本书还介绍了如何优化构建的速度和输出，并解析了webpack的工作原理，以及 Plugin和Loader的编写方法，可帮助你进一步学习webpack。本书按照入门、配置、实战、优化和原理的路线层层深入，涵盖了webpack的方方面面。
webpack 凭借强大的功能与良好的使用体验，已经成为目前最流行，社区最活跃的打包工具，是现代Web开发必须掌握的技能之一。作者结合自身的实战经验，介绍了webpack的使用与常见优化方法、并深入讲解了webpack 原理与架构，相信各阶段的webpack用户都能通过本书得到启发。
（3）学习课程：webpack原理与实践
这是一个教育平台的专栏课程，课程链接为：https://t6.lagounews.com/rR98RTRYsGF8C
本专栏将从基础知识开始，带你建立对webpack的整体认知，让你掌握自定义和扩展webpack的方法与技巧。不论是面试还是解决实际问题，都能为你提供解决方案，14讲助你成为前端高手。
专栏基于webpack最新的 v4.42.1 版本展开，划分为4个模块：
① 模块化及模块化标准：包括模块化所解决的问题、模块化标准的演进过程、ES Modules 标准规范。通过这个模块，你会对webpack和它能解决的问题有更深入的理解。
② webpack 核心知识：包括工作模式、Loader 机制、插件机制等。这个部分让你完全掌握webpack的基本使用，理解打包过程和结果的工作原理，甚至自己开发Loader和插件。
③ Webpack 高阶内容：包括 Source Map、Proxy 等周边技能的使用，以及 Tree-shaking、sideEffects 等高级特性的实践，掌握这个部分，你就掌握了webpack的高级特性，为开发效率添砖加瓦。
④ 其他同类优秀方案：Rollup、Parcel。理解同类方案中的差异点，让你在应对不同项目和需求时有更多选择。
四、结语
webpack凭借自身强大的功能和良好的使用体验，成为了现在最流行、社区最活跃的打包工具。他为我们提供了极大地便利，解决了我们手动处理开发文件的难题，是前端开发者在开发工作中必备的工具，而且现在很多大厂要求学会这些开发工具，这也是前端工程师简历上的加分项,所以非常有必要学习webpack。
本文整理自华为云社区【内容共创】活动第13期。
https://bbs.huaweicloud.com/blogs/330939
任务29：作为前端开发者，学习webpack有必要吗？
- 点赞
- 收藏
- 关注作者
评论（0）