入门学习webpack打包工具（一）

       

作为一个学习webpack打包工具的初学者，看了很多文章。根据自己的理解，总结了一些学习webpack的学习的内容，这篇文章仅作为个人用来巩固，复习webpack打包工具的参考。适合入门的前端爱好者阅读，希望对你我会起到一定的作用。不喜勿喷。

•  什么是webpack？

webpack的官方定义是“模块打包工具，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。”虽然说的贴切到位，但是对于大部分新手来说还是不太容易理解。 

用我自己的浅显的理解来说，webpack就是将你代码中的js，css, (less, sass)等多个文件，打包成一个浏览器可以识别的文件。举个简单的例子：

图片中小麦可以理解为（less,sass）等浏览器不可直接识别的文件，webpack将它们打包时把它转变为浏览器可以识别的css语言。然后再和蔬菜等食物打包成一个食物。这样做，在不考虑食用价值上来说。现在我们只需要吃一个压缩饼干就可以解决所有的需求。这样就减少了食物向嘴巴发出的吃的请求。

也就是说Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

那么，webpack是如何做到识别不同文件，然后打包成单个文件的呢？

首先webpack会浏览你的项目，分析出你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

• webpack的安装

安装前提：

你要安装了node.js。最好使用新版本，避免遇到各种问题。

     首先：按住window+R，进入运行界面。输入cmd，进入命令提示符界面。

输入以下代码:

npm install webpack -g 全局安装webpack

安装成功后，输入代码

webpack -v

如果返回一个版本号，证明安装成功。