Webpack 5 - 模块

模块

一个文件就是一个模块，模块可以是任何类型的文件，原生支持 js 和 json 文件，其他类型的文件需要使用对应的 loader 转换成 js 文件。

模块的依赖关系

模块之间存在依赖关系，通过以下方式来表明依赖关系，根据依赖关系绘制依赖图。

js 文件中：

• import
• require
• import()

css 文件中：

• @import
• url()

html 文件中：

• <img src="">

模块的路径解析

模块的路径有三种表达方式：

• 绝对路径：不要使用
• 相对路径：在代码中引入自定义的模块（js 模块、css、img 等资源等），相对当前代码所在的文件路径
• 模块路径：在代码中引入第三方模块

当使用模块路径的时候，优先使用 resolve.alias 设置的模块别名的路径来解析模块，如果没有对应的模块别名，再根据模块解析的步骤来解析模块路径。

import 'module/lib/file' 模块路径解析步骤：

1. 首先在当前文件所在目录下的 ./node_modules/ 查找，找不到再到上一级目
   录 ../node_modules/ ，一直到顶层 /node_modules/ 目录中
2. 将 file 当做文件，在对应的 node_moudles 目录中查找 module/lib/file.js
3. 将 file 当做目录，在对应的 node_moudles 目录中查找 module/lib/file/package.json，根据 package.json 中的 main 字段找到对应的模块文件
4. 将 file 当做目录，在对应的 node_moudles 目录中查找 module/lib/file/index.js 文件

// 第三方模块使用模块路径
import _ from 'lodash'
// 自己的模块使用相对路径
import sum from './vendor/sum.js'
import './css/style.css'
import Icon from './images/icon.png'
// js 文件可以省略扩展名，推荐不要省略
import sum from './vendor/sum'

// 动态引入模块可以使用相对路径、绝对路径和模块路径
import('./vendor/sum.js')
import('lodash')

通过 css-loader 可以将 css 文件中的 url() 理解为模块依赖，引入图片等资源，推荐使用相对路径

.hello {
  background: url('../images/icon.png') no-repeat;
}

通过 html-loader 可以将 html 文件中的 img src="" 理解为模块依赖，引入图片等资源，推荐使用相对路径

<img src="./images/icon.png">

entry 的路径解析

entry 可以是绝对路径、相对路径，也可以是模块路径，相对路径相对于 context 选项（该选项默认值为配置文件所在的目录），模块路径采用模块解析规则。

module.exports = {
  // context 必须是绝对路径
  context: path.resolve(__dirname),
  entry: {
   // 相对路径，相对 context 选项
   index: './src/index.js',
   // 模块路径，根据模块的解析规则来解析
   vendor: 'lodash'
  }
};

loader 的路径解析

loader 可以是绝对路径、相对路径，也可以是模块路径，相对路径相对于 context 选项（该选项默认值为配置文件所在的目录），模块路径采用模块解析规则。

module: {
  rules: [
    test: /\.css$/,
    // 推荐使用模块路径
    use: ['style-loader', 'css-loader']              
  ]
}