前端工程化

通过五个问题来弄懂javascript的模块机制问题，ESM模块机制在语法层面进行了支持，无需第三方实现，它将一统浏览器和服务端模块标准。

前端项目部署一般都是使用nginx，本文列举了nginx配置中常用的配置及一些注意的点，通过本文你将学会独立部署一个前端项目。

webpack的插件机制借助于tapable来实现，tapable利用动态编译函数技术巧妙的串联拼装成能处理不同类型的流程，即支持同步异步，也能支持瀑布流等。

依赖图谱收集是webpack中最重要的工作，通过入口文件名筛选出该入口文件所依赖的模块，最后生成最后的代码输出到文件中。一个入口文件对应一个chunks，一个bundle.js文件。

webpack会把所有依赖模块都打包在一个文件中，模块之间的引用通过自己实现的require方法来加载。模块就是一个对象，这个对象有一个属性exports来向外暴露导出的内容，这样实现了模块间的引用。

js创立之初没有实现模块化语法，随着nodejs采用cjs模块化，导致很多包都是采用cjs规范，随着浏览器支持esm模块化，就存在两者兼容的局面，webpack利用babel把esm转化为cjs来处理

webpack-dev-server是前端开发必备的配置项，本文梳理了devServer常用配置，主要作用是proxy代理以及mock server。

本文主要介绍了利用splitChunk来分割第三方库的代码，详细介绍了chunks三个属性值的具体含义，推荐使用'all'。最后，利用cacheGroups来对单个库进行打包。

本文介绍了webpack中providePlugin插件的使用场景，特别是在多个文件中引用某个库的场景中，最后介绍了providePlugin插件在vue中的配置。

plugin的作用是解决功能定制的问题。complier可以看出是webpack实例化对象，compilation是其中一个重要过程，在这个阶段中提供了很多钩子函数对chunks进行定制。

style-loader通过把css字符串写入到style标签并插入到body中，这样就完成了css文件的模块化，即`css in js`。对于图片，也是将其转化为base64的字符串来实现的。

css-loader的作用是把css文件里面的内容转化为字符串，放在一个module中，但是并没有把css里面的内容插入到style标签中，这部分工作是style-loader来完成的。

webpack配置中需要掌握entry,output,module,plugin等配置，module主要是配置rules，用来解析非js文件。plugin用来对打包过程和打包后的chunk进行处理。

模块化解决了大型项目如何组织的问题，但是它无法解决高效管理包及性能慢的问题，于是出现npm 和 webpack这两个工具来解决上诉问题，这两个工具的出现奠定了今天前端开发模式的形成。

ESM 在编译时就确定模块依赖关系即输入输出，这是与CJS最大的区别，这tree-shaking创造了条件；同时，ESM是值的引用，在使用的地方不能修改。

commonjs利用在模块套一层包装函数解决了变量私有化的问题，接着实现了一个require函数来加载模块，通过参数的方式把module, export, require传入到模块中。

本文介绍了前端模块化的定义及演变过程，从全局function模式，到全局namespace模式，再到最后的IIFE模式，每一种模式都是为了解决特点问题而出现的。

本文概诉了前端开发模式的变迁。从最原始的前后端混合模式，到ajax的出现就进入前后端分离模式，随着项目越来越大就出现了模块化的开发方式，于是npm webpack等围绕模块化的工具就出现了。

本文分析了传统开发方式遇到的问题，主要是没有进行模块化分割，导致代码很难维护，接着引出了解决方案webpack，利用webpack就能实现模块化的开发，大大提高了代码维护效率。