Webpack4.0 学习笔记
整篇博客是记录自己在学习 webpack 过程中的一些资料和总结，大部分是网上找到的整理好的内容，在这里只是做一个资源的汇总，方便自己能够更好的复习，从开始入门使用，到慢慢的提高，再到理解各种原理，希望能够达成这个目标。
入门
[第一篇]了解 webpackwebpack 是模块化管理工具，使用 webpack 可以对模块进行压缩、预处理、按需打包、按需加载等。
参考文章：
使用
[第二篇]使用 webpack 打包、编译 JavaScriptwebpack 本身就是为了打包 JavaScript 所设计。
参考文章：
[第三篇]使用 webpack 提取公共代码我们都知道，目前前端开发中，主流的开发模式为模块化开发。为了减少代码冗余，提高加载速度，我们需要提取出公共代码。
参考文章：
参考课程：
[第四篇]使用 webpack 进行代码分割和懒加载不同于多页面应用的提取公共代码，单页面的代码分割和懒加载不是通过 webpack 配置来实现的，而是通过 webpack 的写法和内置函数实现的。
参考文章：
参考课程：
[第五篇]使用 webpack 处理 CSS 文件基于模块化开发的角度，我们需要每个模块都拥有自己的 CSS 样式，在进入不同的模块时，引用不同的 CSS 样式。为了达到这样的效果，我们需要 webpack 来帮助我们对 CSS 文件进行处理。
参考文章：
参考课程：
[第六篇]使用 webpack 处理 Sass、Less 文件我们不仅需要 webpack 来帮助我们对 CSS 文件进行处理，还需要对 Less、Sass 文件进行处理。
参考文章：
[第七篇]使用 webpack 开启 tree shakingtree shaking 可以帮助我们删除掉没有使用的代码，这将会大大缩减打包后的代码量。
参考文章：
参考课程：
文件处理
[第八篇]使用 webpack 进行图片文件处理这次笔记记录了 webpack 如何处理图片文件，包括图片压缩、合成雪碧图以及 base64 编码等。
参考文章：
[第九篇]使用 webpack 进行字体文件处理这次笔记记录了 webpack 如何处理字体文件。
参考文章：
[第十篇]使用 webpack 处理第三方库这次笔记记录了 webpack 如何处理第三方 JS 库，包括 CDN 引入，npm 包管理等等。
参考文章：
[第十一篇]使用 webpack 自动生成html文件在真实生产环境中，运行webpack进行打包后，完整的index.html应该是被自动生成的。例如静态资源、js 脚本都被自动插入了。而不是像之前的教程那样根据生成的文件手动插入。
参考文章：
[第十二篇]使用 webpack 自动压缩文件这次笔记记录了如何使用 webpack 对 JavaScript 代码、css 代码以及 html 代码进行压缩。
参考课程：
[第十三篇]使用 webpack 配置静态资源内联这次笔记记录了如何使用 webpack 进行资源内联的配置。
参考课程：
环境配置
[第十四篇]webpack 自动清理和watch-mode配置在实际开发中，由于需求变化，会经常改动代码，然后用 webpack 进行打包发布。为了让打包目录更简洁，需要 Clean Plugin，在每次打包前，自动清理 dist 目录下的文件。
参考文章：
参考课程：
[第十五篇]webpack 开发模式配置借助 webpack，在开发模式下我们可以使用热重载、路由重定向、代理服务器等功能，而 source-map 更是准确定位代码错误的利器。
参考文章：
参考课程：
[第十六篇]webpack 使用 source-map简单说，Source map 就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。
参考课程：
[第十七篇]webpack 使用 scope-hoisting将所有模块的代码按照引用顺序放在一个函数作用域⾥，然后适当的重命名一些变量以防止变量名冲突。
参考课程：
[第十八篇]webpack 使用 ESlint通过 webpack 配置启用 ESlint 检查代码，保持代码风格统一。
参考课程：
项目构建
[项目构建]webpack 项目构建配置编写可维护的 webpack 项目构建配置。
参考课程：