初识Webpack

Webpack主要功能-白话理解 （本文仅是记录总结，最好的文档是官网）

打包静态文件的工具。静态文件就是webpack可获得的文件，也就是开发阶段的所有的前端文件。开发阶段获取不到后端的文件，所以也就不包括后端相关的文件。
分为：

1. 入口文件：从入口文件分析出模块之间的依赖关系
   输出文件：输入文件的目录和文件名
   loader:webpack 只能识别js、json文件. 因此css 、图片、xml、csv 、txt等文件需要loader 进行转换。webpack 会逆序加载转换器。
   常见的loader， css-loader、style-loader、sass-loader,xml-loader 、csv-loader、file-loader.，bable-loader或者设置type
2. plugin： 就是有某些作用的插件。例如CleanWebpackPlugin 插件每次运行会帮着先清空输出文件目录，HtmlWebpackPlugin插件会输出html 文件。
3. 自动刷新
   每当更改代码后，需要手动执行webpack，重新打包。自动刷新可以使用 watch: true,开启文件监听，一旦发生更改，就会执行webpack 命令。Webpack-dev-server，发生改动时会实时刷新浏览器页面，但是输出文件夹下不会更新，最后仍然需要执行wenpack 命令。
4. 模块热更新
   自动刷新会重新编译全部代码，造成频繁编译。模块热更新，仅仅会更新发生改动的模块。需要配置HotModuleReplacementPlugin插件。
5. 缓存 访问同一模块时，第二次会直接读取webpack缓存的结果。
6. 环境区分
   当js 代码需要区