自律是真正的自由

Loader(加载器) 是 webpack 的核心之一。它用于将不同类型的文件转换为 webpack 可识别的模块。本文将尝试深入探索 webpack 中的 loader，揭秘它的工作原理，以及如何开发一个 loader。

没想到这次爆发的肺炎疫情这么严重。 这个是从湘雅医学院老师那获取的 新型冠状病毒肺炎预防手册 普及扩散之。

Plugin(插件) 是 webpack 生态的的一个关键部分。它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程。本文将尝试探索 webpack plugin，揭秘它的工作原理，以及如何开发一个 plugin。

通常我们配置 loader 只需直接使用 loader 的名字，不用关心 loader 的路径。那是因为通过 npm 或者 yarn 安装的 loader 都会安装在 node_modules 目录下，而 webpack 默认所有第三方模块都会去 node_modules 里找。

当我们要使用本地 loader (例如测试自己开发的loader)，而这些模块不在 node_modules 里的时候，就需要告诉 webpack 存放 loader 的位置。

axios 是一个轻量的 HTTP客户端，它基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大大（Vue作者尤雨溪）宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选。（ 如果你还不熟悉 axios，可以在这里查看它的API。）

axios 的API很友好，你完全可以很轻松地在项目中直接使用。不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都就地写一遍，得疯！这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。

为了提高我们的代码质量，我们应该在项目中二次封装一下 axios 再使用。

发HTTP请求是JS前端应用最常见的任务之一。实现HTTP请求有非常多解决方案，目前主流的几个解决方案有 ajax、axios 和 fetch。哪个好？如何选？下面对这几个方案进行一个简单的对比分析。

webpack的常用基本配置我们可能已经耳熟能详，比如 input,output,module,plugins,devServer的配置等等。而在这些基本配置中，其实还有一些细节参数，它可以帮助我们更好的定制化打包的目录结构，但它可能并不是那么好理解，比如publicPath。

上篇文章webpack优化之玩转代码分割和公共代码提取从代码维度出发，为生产环节进行了优化（通过提取公用代码减小打包结果体积，提升线上体验）。而在开发大型前端项目时，经过一段时间的开发维护和不断迭代，随着业务功能增多，就算提取了公共代码，项目体积仍会越来越大（如果不从产品层面优化，这是无法避免的），这意味着编译打包时间会越来越久、从修改代码到看到效果的等待时间越来越长。为了更好的开发体验，这次我们来为开发环节做一些事情。

开发多页应用的时候，如果不对webpack打包进行优化，当某个模块被多个入口模块引用时，它就会被打包多次（在最终打包出来的某几个文件里，它们都会有一份相同的代码）。当项目业务越来越复杂，打包出来的代码会非常冗余，文件体积会非常庞大。大体积文件会增加编译时间，影响开发效率；如果直接上线，还会拉长请求和加载时长，影响网站体验。作为一个追求极致体验的攻城狮，是不能忍的。所以在多页应用中优化打包尤为必要。那么如何优化webpack打包呢？

在一些前端工程中，不是所有的模块都需要打包到最终的生产中，例如开发UI库，我们不需要把依赖的基础框架和库打进去（比如vue，react，jquery等），因为它们在业务工程中会肯定会被引入，没必要在UI库中打包，而且打包进来不仅让UI库体积庞大，还可能在业务工程中引发版本依赖冲突。那么如何让工程在打包中避开某些不希望被打包的第三方模块呢？