前端工程化（一）—— 打包工具webpack篇

随着技术的进步，现在的前端开发工作对开发者提出了更为严格的要求，不仅仅是简单的制作页面，而是需要考虑各方面的问题，比如性能的优化，代码的可维护性和健壮性等问题，因此现在前端越来越工程化，工程化就需要从模块化、组件化、规范化和自动化多方面考虑。

参考链接：A mostly complete guide to webpack (2020)

一、什么是webpack？

本篇文章主要分享前端工程化中模块化必不可少的打包工具webpack，对于webpack来说模块包括以下：

Common JS modules
AMD modules
CSS import
Images url
ES modules

也就是说，webpack能够从以上模块源中获取依赖项。webpack中主要包括以下配置项目：

Entry point

webpack的入口点是收集前端项目所有依赖项的起点。实际上，它是一个简单的JavaScript文件。这些依赖关系形成一个依赖关系图。webpack的默认入口点(自版本4以来)是src/index。它是可配置的。webpack可以有多个入口点。

Output

输出是生成的JavaScript和静态文件在构建过程中收集的地方。webpack的默认输出文件夹(自版本4以来)是dist/，也是可配置的。产生的JavaScript文件是所谓包的一部分。

Loaders

加载器是帮助webpack处理各种文件扩展的第三方扩展。例如，有用于CSS、图像或txt文件的加载器。
加载器的目标是在模块中转换文件(而不是JavaScript)。一旦该文件成为模块，webpack就可以将其作为项目中的依赖项使用。

Plugins

插件是可以改变webpack工作方式的第三方扩展。例如，有用于提取HTML、CSS或设置环境变量的插件。

Mode

webpack有两种操作模式:开发和生产。它们之间的主要区别是生产模式会自动神奇般地对JavaScript代码应用缩小和其他优化。

Code splitting

代码分割或延迟加载是一种避免更大bundle的优化技术。
通过代码分割，开发人员可以决定仅在响应某些用户交互时加载整个JavaScript块，比如单击或路由更改(或其他条件)。一段代码被分解成一个chunk。

二、webpack运行流程

Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：
1、初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
2、开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
3、确定入口：根据配置中的 entry 找出所有的入口文件；
4、编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
5、完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
6、输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
7、输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

三、配置webpack

1、创建webpack.config.js文件
2、在webpack.config.js文件中必须要有module.exports;并且可以修改如下选项：

entry point
output
loaders
plugins

code splitting

const path = require("path");

module.exports = {
    entry: { index: path.resolve(__dirname, "source", "index.js")}
}
// 现在webpack会在入口source/index.js加载文件
// 修改output
module.exports = {
    entry: { index: path.resolve(__dirname, "source", "index.js")},
    output: {
        path: path.resolve(__dirname, "build")
    }
}

3、处理HTML，需安装plugin：html-webpack-plugin
处理不同的css文件等，根据上面类似需要安装对应的plugin，然后增加配置项。