webpack学习笔记

webpack的核心机制分为两部分，loader和plugins。

loader是不同类型模块的加载器，默认Loader加载js，其余的资源需要各自不同的专用Loader来加载。如css，需要css-loader，style-loader，html需要html-loader，等等。

plugins承包除了加载打包成统一的bundle.js外的所有前端工程化功能，如：自动生成html，自动复制指定路径下的资源文件到目标文件夹（一般是dist），清除上次打包结果等等。插件可以自定义，根据定义时使用的钩子不同，可以作用在打包时间周期的各个阶段，实现非常多功能。

webpack打包的通常流程：

1. 前置流程，大致就是生成webpack的核心上下文——compiler。这里还需要再学习和深入理解一下。

2. 找到配置文件中的应用入口，一般是index.js或main.js，从入口文件触发，生成资源和模块的依赖树。

3. 对不同类型的模块，采用不同的loader进行解析，解析出的js代码，依次放到统一输出，如bundle.js中。

4. 在生命周期的不同阶段，引入对应插件，执行相关操作，如资源复制等。

5. 将bundle.js，html，资源等输出到指定路径，完成打包。