# fed-e-task-02-02

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

## Basic Information

- **Project Name**: fed-e-task-02-02
- **Description**: 大前端训练营第二部分模块二（关于Webpack核心原理及Webpack + Vue打包实践工程项目）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-02
- **Last Updated**: 2021-09-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 揭智勇 ｜ Part 2 | 模块二

------

## 简答题

### 1，Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。

- 根据配置找出打包入口文件
- 把入口文件代码解析成抽象语法树，然后分析，提取形成模块依赖树
- 根据模块依赖树深度递归找到每个节点对应的资源文件
- 然后再根据loader属性找到资源文件的加载器，然后将对应文件交给相应加载器处理
- 最后将加载器处理的结果放入bundle.js中输出实现整个项目打包

### 2，Loader 和 Plugin 有哪些不同？请描述一下开发 Loader 和 Plugin 的思路。

> Loader的定位是模块加载器，用于处理不同的模块资源文件，将模块资源文件从输入到输出的转换，比如css模块，image模块等；Plugin的定位是拓展webpack的功能，增加webpack的自动化能力，比如清空目录，资源复制，资源压缩等等； 
>
> Loader是一个函数，接受资源参数，然后返回直接一段JavaScript代码；或者返回一个module.exports导出的结果然后交给另一个Loader处理，loader处理的顺序从后向前处理；Plugin通过钩子机制实现，在webpack生命周期钩子中挂载任务实现扩展,Plugin是一个函数或者是一个包含apply方法的对象

- Loader实现思路
  - 定义一个函数，函数有个文件资源参数
  - 在函数里面对资源参数进行处理
  - 返回一段JavaScript代码或者返回一个用module.exports或者export default导出的数据
- Plugin实现思路
  - 定义一个插件类
  - 里面实现apply方法，apply方法参数有compile对象
  - 在compiler对象钩子中挂载任务方法，任务方法中接受一个compilation对象参数
  - 在compilaton对象中获取此次打包资源信息，对打包资源信息进行处理

## 编程题

### 1，使用Webpack实现Vue项目打包任务

- 实现思路

  - 配置项目打包入口文件及输出

  - 根据不同的模块资源配置模块loaders

    - es6+资源使用babel-loader,@babel/core,@vue/babel-preset-app或者@vue/cli-plugin-babel
    - scss样式资源使用postcss-loader/scss-loader/css-loader/vue-style-loader/autoprefixer
    - file文件资源使用file-loader/url-loader
    - vue文件资源使用vue-loader/vue-template-compiler（注意vue-template-compiler版本与vue要匹配）

  - 配置自动生成包含bundle的html的插件
    
  - html-webpack-plugin
    
  - 配置lint及git hooks控制代码质量

    - 配置eslint-loader保证代码风格及质量
    - 使用husky及lint-staged控制代码commit质量

  - 根据不同的环境进行不同的配置

    - 开发环境配置

      ```javascript
      // mode: 'development'
      // 开发环境侧重开发体验配置
      // ...
      ```

      

    - 生产发布环境配置

      ```javascript
      // mode: 'production'
      // 生产环境侧重资源优化配置
      // 配置工作流目录清空，静态资源复制
      // 资源分包
      // ...
      ```

  - 其他配置

    - ~~多核打包~~
    - 根据不同环境注入全局变量
    - 解析模块配置
    - ~~配置开发环境mock服务~~
    - 配置生产环境打包资源分析
    - ~~配置生产环境cdn服务~~
    - 配置devtool

- 踩坑日志

  - CleanWebpackPlugin 插件新版本问题
  - babel-loader没有配置exclude或者include的问题，没有配置打包体积大，打包时间长而且运行会报错
  - img中src不能加载图片，引用了[object Module]的坑 在url-loader可选型esModule为false
  - eslint记住一定要安装babel-eslint解析器
  - 开发环境的输出资源不能用contenthash和chunkhash模式

- 代码见code/vue-app-base