全面掌握Webpack4.0 (一)Webpack究竟是什么（2） （持续更新...

上一篇文章我们在一个demo中见到了webpack的身影，如果从未接触过webpack的同学学完了上一篇文章可能会觉得webpack只是一个“翻译官”，但事实上webpack可不仅仅可以‘翻译’代码,事实上，webpack是一个‘打包’工具，‘打包‘才是webpack的核心任务。

打开webpack的官网：
webpack中文网

官网首页即可看到“打包”这两个打字。点击‘中文文档‘，我们可以看到webpack官方给出的概念：

可以看到webpack官方对于webpack概念的描述：“本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)”。这足以说明webpack到底是什么，webpack的本质就是一个打包工具，上文所说的webpack是一个‘翻译官’,那只不过是webpack在打包过程中的一些必要的处理而已。
既然说到webpack是一个模块化的打包工具，那么我们就从“模块”和“打包”这两点并结合上篇文章的demo给大家讲一下什么叫“模块打包器”。

首先我们来说一下模块这个概念。其实模块这个概念非常常见，大到生活小到我们的代码中都会有模块这个概念，在代码里模块说白了就是具有特定功能的一个独立的文件或者代码块，将多个模块组织到一起就可以实现一个庞大的功能体系。上文中我们在index.js中通过import的方式引入了三个js文件，分别是header.js、content.js以及footer.js，其实每一个js文件都可以看做是一个模块，我们引入了三个js文件也就是引入了三个模块。当我们执行npx webpack ./index.js命令的时候，webpack做的就是将header.js、content.js、footer.js以及index.js打包生成最后的main.js，至于打包之后为什么多出了一个dist文件夹以及打包之后生成的js文件名为什么叫main.js这些细节我们在以后的章节都会讲到（webpack可以手动配置打包后的输出路径以及文件名）。其实在实际的项目中，我们不仅会引入js文件，css文件和图片这些静态资源文件也是一定以及肯定需要的，webpack的功能之所以强大，还在于它不仅可以打包js文件，css文件以及图片等静态资源文件它都是可以打包的，只要按照webpack的标准去进行相关的配置就可以了。说到这里打包这个概念你是不是也已经懂了呢。我们再回到webpack官网首页：


那么讲到这里，结合上一篇文章，你一定知道webpack的存在意义以及webpack到底是什么了吧，是的，总结来说webpack就是一个可以打包所有静态资源的模块打包器，webpack的出现对于前端的模块化开发具有重大的意义，虽然市面上还有类似于webpack的一些其他的打包工具，但是webpack的市场占有率以及webpack本身的高性能高可配和庞大的生态圈可以说都是排在前列的，所以，跟着我继续学习webpack吧，毕竟这年头，不会webpack的前端是会被瞧不起的。。。本文终。

下一章：全面掌握Webpack4.0 (一)Webpack的正确安装方式（持续更新…