前提

具体学习请看webpack官方文档，有更加详细的解释。

在我们学习webpack的时候我们应该问几个问题:

• webpack是什么？
• 为什么要学习webpack？
• 学习webpack有什么用？
• webpack的安装 下面我们笔者就对以上问题进行解答，或许有不足之处请多多谅解，因为真正的掌握webpack需要下很大的功夫，这只是笔者的笔记。

webpack是什么？

官方文档上说明webpack: 本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

对于初学webpack的小伙伴不知道能不能看懂官方文档的解释，笔者理解的webpack是一个可以把浏览器不能识别的代码转换成可以识别的代码，例如TypeScript，less，lass和等等，转换成浏览器可以识别的ES5和css，这里应该保持一个疑问，webpack怎么把浏览器不能识别的东西转换成可以识别? 后面会讲到，不要着急。

当然笔者的解释也是具有片面性的，但是简单理解的可以认为是这样。

为什么要学习webpack?

前端发展的几个阶段

• 无论是作为专业的开发者还是接触互联网的普通人，其实都能深刻的感知到Web前端的发展是非常快速的；
• 对于开发者来说我们会更加深有体会;从后端渲染的ISP、PHP，到前端原生JavaScript，再到jQuery开发，再到目前的三大框架Vue、React、Angular ;
• 开发方式也从原来的JavaScript的ES5语法，到ES6、7、8、9、10，到TypeScript，包括编写CSS的预处理器less、scss等;

前端开发目前我们面临哪些复杂的问题？

• 比如开发过程中我们需要通过模块化的开发来开发；
• 比如也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑通过sass、less等方式来编写css样式代码;
• 比如开发过程中，我们还希望试试的监听文件的变化来并且反映到浏览器上，提高开发的效率;
• 比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化；

webpack在框架中的使用

对与学习过Vue与React的小伙伴，应该知道在里面有一个build命令就可以把我们写的代码进行打包生成浏览器可以识别的代码。当我们要想知道运行这个命令之后发生的一系列事情的话，学习webpack是一个非常重要的事情，也能使小伙伴能够更好的去使用Vue与React，或者解决一些出现的问题。

对于没有学习过Vue和React的小伙伴，还是建议先学习一下，再来学习webpack。

学习webpack有什么用

• 对于想往前端发展更上一层楼的小伙伴学习webpack是必不可少的知识储备。
• 学习webpack我们能够更好的理解模块化概念
• 在项目中配置自己想要的webpack配置在解决一些问题来
• 等等就不一一列举，反正就有好处没坏处

webpack的安装

mkdir webpack-demo // 创建文件夹
cd webpack-demo // 进入生成的文件夹
npm init -y // 生成package.json文件
npm install webpack webpack-cli --save-dev //开始使用使我们安装webpack与webpack-cli两个包

具体请看官方 webpack的安装