说说你对webpack的理解？解决了什么问题？

一、有关webpack的概念? 

webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 

现代 javascript 应用程序的 静态模块打包器 (module bundler)

• 静态: 文件资源

• 模块: node环境, 引入文件, 遵守模块化语法

除了合并代码, 还可以翻译和压缩代码

• less/sass -> css

• ES6/7/8 -> ES5

• html/css/js -> 压缩合并

1）什么是webpack?

    1.1静态模块打包器

    1.2还能翻译和压缩代码

    1.3减小代码包体积, 让浏览器更快速打开网页

说明：

• 在一个html中引入多个js文件，并且要注意它们的顺序关系。

• script代码在body的底部，这样可以确保是dom节点渲染在js代码执行之前。

因为在index.js要用到tool.js的功能，所以还在index.html中同时引用了index.js和tool.js，并把tool.js的引用放在index.js的引用之前。如下整个代码的示意图：

上面的代码中有如下问题：

• js文件之间有先后的引用的关系：由于index.js中引用了tool.js的，所以必须要把tool.js放在index.js的前面。

• 存在变量污染的情况：一个文件中定义的变量，在另一个文件中可能会被修改，覆盖。

• 随着.js文件个数增加，则项目会越来越不好管理。

解决思路：模块化 + webpack打包

二、当认识了webpack的配置文件后，就会有个小疑问，是否有特殊指定使用哪个配置文件呢？

1）创建并使用默认配置文件

在项目根目录下创建一个名为webpack.config.js。其内容如下：

        这个文件的意义是导出一个配置项：用来对webpack的打包行为做设置。在操作层面，就是学习如何去使用这个文件。

        然后，再次运行打包命令，查看产生的main.js文件的内容，对比与之间的变化。

 (1) 调整目录结构如下：

(2) 然后，修改配置项

1. 修改src/index.js的名字为src/js/main.js

2. 在webpack.config.js的配置项中添加