Webpack 打包---流程和loader

为什么要模块化？

• ES Modules 存在环境兼容问题
• 模块文件过多，网络请求频繁
• 所有的前端资源都需要模块化
  主流模块打包工具：webpack（适用于大型应用）、parcel(小型应用，快速开发测试demo)、rollup（适用于单模块开发）

webpack 配置文件

webpack.config.js

module.exports = {
   
  entry: './src/index.js', // 入口文件：相对路径不能省略 ./
  output: {
    // 输出配置
    filename: 'bundle.js', // 打包后的文件名
    path: path.join(__dirname, 'dist') // 打包输出路径：需要绝对路径
  },
}

webpack 的工作模式: mode

• production 生产模式：打包、压缩代码
• development 开发模式：优化打包效率，添加调试辅助
• none 运行最原始的打包，不会做额外的处理

webpack构建流程

webpack是运行在nodejs环境下，配置文件遵循commonjs规范。其配置文件webpack.config.js导出一个object/function/promise/array。 Webpack在启动后，会从entry开始，递归解析entry依赖的所有Module，每找到一个Module，就会根据Module.rules里配置的Loader规则进行相应的转换处理，对Module进行转换后，再解析出当前Module依赖的Module，这些Module会以entry为单位进行分组，即为一个Chunk。因此一个Chunk，就是一个entry及其所有依赖的Module合并的结果。最后Webpack会将所有的Chunk转换成文件输出Output。在整个构建流程中，Webpack会在恰当的时机执行Plugin里定义的逻辑，从而完成Plugin插件的优化任务。其流程如下：

1. 配置初始化
   webpack会首先读取配置文件，执行默认配置

2. 编译前准备
   webpack 会实例化compiler，注册plugins、resolverFactory、hooks。

3. reslove前准备
   webpack 实例化compilation、NormalModuleFactory和ContextModuleFactory

4. reslove流程
   解析文件的路径信息以及inline loader和配置的loader合并、排序