Webpack 打包---流程和loader

Posted 2021-06-05 michael_yqs

为什么要模块化？

• 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合并、排序

5. 构建module
   runLoaders处理源码，得到一个编译后的字符串或buffer。将文件解析为ast，分析module间的依赖关系，递归解析依赖文件

6. 生成chunk
   实例化chunk并生成chunk graph，设置module id，chunk id，hash等

7. 资源构建
   使用不同的template渲染chunk资源

8. 文件生成
   创建目标文件夹及文件并将资源写入，打印构建信息

加载器(loader)

webpack 默认的 loader 是只能处理js，其他类型资源可以使用相应的 loader ,如css -loader,html-loader。常用的加载器分为三类：编译转换类、
文件操作类、代码检查类。下面列举几个常见的文件操作类加载器。

CSS 资源 - css-loader、style-loader

• css-loader 会将 css 文件打包成一个 js 模块，将 js 文件作为 webpack 的入口文件，然后在 js 文件中通过 import 的方式引入 css 文件
• style-loader 将 css-loader 转换过的代码通过 style 标签的形式追加到页面上

const path = require('path')
module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
    publicPath:'dist/'
  },
  module: {
    rules: [ // 其他资源模块加载规则的配置
      {
        test: /.css$/, // 匹配打包过程中遇到的文件路径
        use: [ // 指定匹配到的文件需要使用的 loader。
          // 如果有多个loader，webpack会从后往前执行loader,所以这里要先调用css-loader把css代码转换成js代码
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

文件资源加载器 file-loader 适合体积较大的文件

对于体积较大的文件，使用文件提取的方式，提高加载速度
将文件拷贝到打包目录，然后将拷贝后的路径作为返回值返回。使用模块的导出成员获取这个资源的访问路径，需要配置 打包后资源的位置

module.exports = {
  output: {
    publicPath: 'dist/' // 资源路径，默认为 '' 即 /
  },
  module: {
    rules: [
      {
        test: /.png$/,
        use: 'file-loader'
      }
    ]
  }
}

url-loader 适合体积较小的文件

对于体积较小的文件，使用data-url的方式，减少请求次数

module.exports = {
  output: {
    publicPath: 'dist/' // 资源路径，默认为 '' 即 /
  },
  module: {
    rules: [
      {
        test: /.png$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024 // 只对 10KB 以下的文件做 data-url 转换，
            // 超过的文件交给 file-loader 处理（webpack会默认调用 file-loader）
          }
        }
      }
    ]
  }
}

手写loader--------markdown-loader

loader其实是一个工作管道，通过某种特定的方式把输入转换成输出，这个输出可以是一段可以执行的js代码，也可以是一个可供其他loader（管道）使用的中间结果。
自定义loader的编写分为两步：

1. 创建 markdown-loader.js 文件
2. markdown-loader.js 导出一个函数，这个函数就是这个loader对加载到的资源的处理过程。输入是资源文件加载到的内容；输出就是此次加工过后的结果。这个结果可以有两种：1.可以执行的js代码 2.返回一个可供其他loader处理的结果

markdown-loader.js

const marked = require('marked');//marked用来处理 markdown 文件
module.exports = source => {
  const html = marked(source);
  // 1. 将html stringify，转义 引号和换行符 ，再导出
  return `module.exports = ${JSON.stringify(html)}`
  // 2. 直接返回 html 字符串，将结果交给下一个 loader 处理
  //return html
}

webpack.config.js中增加loader配置

//webpack.config.js中增加loader配置
module.exports = {
//....其他配置已省略
  module: {
    rules: [
    //...其他配置已省略
      {
        test: /.md$/,
        use: [
          'html-loader',
          './markdown-loader' // 使用相对路径找到 markdown-loader
        ]
      }
    ]
  }
}