初识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 代码需要区分开发或生产环境时，借助new DefinePlugin 插件定义环境变量，然后直接在代码里使用。
7. 压缩代码 使用 UglifyJsPlugin 压缩js 代码，cssnano 压缩css 文件。
8. treeshaking 压缩的代码仍然会包括一些死代码：永远不会执行的代码，需要配置treeshaking
9. 懒加载，一些代码在需要的时候再加载，可以提高访问速度
10. 提取公共代码：一些公共代码会被多个文件引用，这样会出现重复打包，打包后的包体积较大。
11. 对一些第三方的库，并不会频繁变动，因此将第三方库单独打包，这样热更新的速度快，打包速度快。
    12.打包后的代码，如果运行时出现错误时，浏览器报错只会指向打包后的文件，并没有参考价值。通过开启source-map，可以跟踪报错源代码的位置。
    以上仅是主要功能介绍

Webpack 工作流程

1. 读取参数，加载插件，实例化Compolier对象
2. 从入口文件开始，使用配置的loader 去翻译相应的模块，然后找到模块的依赖模块，递归地进行编译
3. 将编译后的模块，组合合并成一个chunk,然后输出到文件系统。