什么是插件
- webpack的官方网站：webpack.js.org
- html-webpack-plugin：实现了自动生成html入口文件和引用js文件的功能
- 清理dist：在output的这个选项里边设置一个clean true实现了在打包之前，清理dist文件夹的目的
搭建开发环境
- mode选项：将mode选项设置为development，使webpack编译的模式变为开发模式
- source map:我们使用source map的devtool这个属性，将属性值设置为inline-source-map,实现了精准定位代码的行数
- watch mode:在编译webpack的时候，我们通过添加--watch这个属性，来实现编译时的自动监测文件变化的功能，但是还得需要手动的刷新浏览器
- webpack-dev-server:不仅能监测到文件的变化，从而重新的编译，还能够帮助我们自动的实现浏览器的刷新
资源模块
- 第一种：他会发送一个单独的文件并导出URL，url是个资源路径
- 第二种：他会导出一个资源的Data URL，比如我们可以把一个svg转化为base64的字符串，可以在业务代码里面引用这个字符串了
- 第三种：他会导出资源的源代码
- 第四种：他会在导出一个Data URL和发送一个单独的文件URL之间自动进行选择，他选择的依据是资源的大小，默认的资源大小是8kb
管理资源
- loader 可以让webpack去处理其他类型的文件，并且将他们转换为有效的模块来供我们应用程序来使用
- 加载css：通过styLe-loader，css-loader让webpack来去加载css资源，并且把css代码放在html页面的head里，同时我们还可以将lessloader ，sassloader，stylesoader来引入css预处理工具
- 抽离和压缩css：通过mini-css-extract-plugin，和相应的louder来去抽离css文件，通过css-mini-mizer-webpack-plugin来去压缩css文件
- 加载images图像：通过asset modules这种资源模块来去加载图片资源，也可以在css样式里边直接引入图像的路径
- 加载fonts字体：利用asset resource这个资源类型，引入了字体文件，从而让webpack来帮助我们打包iconfont
- 加载数据：通过csv loader 以及xml loader让webpack来加载csv tsv或者是xml类型的文件
- json模块parser：可以利用这个类型去加载yaml toml以及json5
