webpack从0到手写webpack_02

Bundler：模块打包工具

看完了上一篇：[https://blog.youkuaiyun.com/frontendchen/article/details/109724243]
可能很多人认为webpack就是一个js的翻译器，对不起，大家千万不要被眼前的东西所蒙蔽，webpack实际上称不上一个翻译器，以为它
只认识import这样的语句，其它高级的JS语法它一概不认，你把它称作js翻译器实际上是高看了它
如果我们打开google输入webpack,可以看到结构是webpack 是一个模块打包器

像 import引入的这些文件我们都可以把它们看作模块，webpack就是一个把他们打包到一起的模块打包工具

大家知道在我们写js代码的时候不仅有es module这样的代码规范，实际上还有CommonJS，CMD，AMD等规范
webpack对这样规范下的代码一样可以识别，以CommonJs为例
我们使用require的方式导入模块

三个模块的模块的导出也要对应修改

这样的话，我们每个模块通过CommonJS的方式导出，在index.js中，我们又通过CommonJs的方式引入进来，webpack是一个模块打包工具，它能够识别任何模块引入的语法所以这种语法它也能正常的帮我们进行翻译。我们将dist文件夹删除，进行重新打印，同样生成了dist目录，index.html打开内容正常显示

这一篇的重点讲的是webpack其实是一个模块打包工具并不是js翻译器
最早的时候webpack是一个js的模块打包工具，后来随着webpack的发展，webpack能打包的文件不仅仅是js文件，它还可以打包其它任何形式的模块文件
比如说我们vue或react的项目的时候，引入过一些css样式文件。它还能打包png,jpg类型的图片文件等等。所以webpack准确定义就是一个模块打包工具