# fed-e-task-02-02

**Repository Path**: zuojinsheng/fed-e-task-02-02

## Basic Information

- **Project Name**: fed-e-task-02-02
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-19
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程
Webpack的执行是一个串行的过程，从启动到结束会依次执行
1、初始化参数：从shell参数和配置文件合并参数，得出最终参数
2、开始编辑：从上一步获取的参数初始化compiler对象，加载所有的插件，通过run方法执行编译
3、确定入口：根据配置文件中的entry找出所有文件入口
4、编译模块：从入口文件开始，调用所有配置的loader对模块进行翻译成compliation，然后递归所有依赖的模块，然后重复编译。得到每个模块翻译后的最终内容以及他们之间的依赖关系
5、输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，然后将chunk转换成一个单独的文件加入输出列表
6、输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，将文件的内容写入文件系统上

# Loader 和 Plugin 有哪些不同？请描述一下开发 Loader 和 Plugin 的思路
作用不同：
  Loader：Loader为加载器，因为Webpack将一切文件视为模块，但是Webpack原生只能解析JS文件，Loader的作用就是加载和解析非JS文件
  Plugin：Plugin为插件，Plugin可以扩展Webpack的功能，让Webpack拥有更多的灵活性。在Webpack运行的生命周期中会广播出很多事件，Plugin可以监听这些事件，在合适的时机通过Webpack提供的API改变输出结果

用法不同：
  Loader：Loader在module.rules中配置，就是作为模块的解析规则存在。类型为数组，每一项都是Object，里面描述了对于什么类型的文件（test），使用什么加载器（Loader）和Loader使用的参数（options）
  Plugin：Plugin在Plugins中单独配置，类型为数组，每一项是一个plugin实例，参数通过构造函数传入

# 编程题
1、首先定义生产环境和开发环境分别对应webpack.prod.js和webpack.dev.js
2、定义公用的webpack配置文件webpack.common.js
3、webpack.common.js配置公用的打包参数
  1）文件的输入和输出目录
  2）打包规则和对应的loader
  3）生成html的plugin
  4）配置EslintWebpackPlugin用于打包代码时候检查是否符合eslint规则
4、生产环境配置mode、devtool、清除、拷贝插件
5、开发环境配置mode、devtool
6、在package.json的scripts中配置启动命令
  1）serve命令用于启动虚拟服务器，用于开发环境中的调试
  2）build命令用于打包生产环境，这是最终需要提交到线上的代码
  3）lint命令用于检查开发者所写代码是否符合eslint开发规则