webpack笔记-webpack之模块module、路径解析、resolve 配置（三）

module

webpack 的初衷是让 js 支持模块化管理，并且将前端中的各种资源都纳入到对应的模块管理中来，所以在 webpack 的设计中，最重要的部分就是管理模块和模块之间的关系。

在 webpack 支持的前端代码模块化中，我们可以使用类似 import * as m from './index.js' 来引用代码模块 index.js。webpack 构建的时候，会解析依赖后，然后再去加载依赖的模块文件。所谓 webpack 构建的起点，本质上也是一个 module，而我们在设置好 webpack 后，开发的过程亦是在写一个个的业务 module。

在 JavaScript 中尽量使用 ES6 module 的语法来引用依赖。

路径解析

当我们写一个 import 语句来引用一个模块时，webpack 是如何获取到对应模块的文件路径的呢？这其中有十分复杂的实现逻辑和相对繁琐的配置选择。

webpack 中有一个很关键的模块 enhanced-resolve 就是处理依赖模块路径的解析的，这个模块可以说是 Node.js 那一套模块路径解析的增强版本，有很多可以自定义的解析配置。

不熟悉 Node.js 模块路径解析机制的同学可以参考这篇文章：深入 Node.js 的模块机制。

简单整理一下基本的模块解析规则，以便更好地理解后续 webpack 的一些配置会产生的影响。

解析相对路径

查找相对当前模块的路径下是否有对应文件或文件夹
是文件则直接加载
是文件夹则继续查找文件夹下的 package.json 文件
有 package.json 文件则按照文件中 main 字段的文件名来查找文件
无 package.json 或者无 main 字段则查找 index.js 文件

解析模块名

查找当前文件目录下，父级目录及以上目录下的 node_modules 文件夹，看是否有对应名称的模块

解析绝对路径（不建议使用）

直接查找对应路径的文件

在 webpack 配置中，和模块路径解析相关的配置都在 resolve 字段下：

module.exports = {
  resolve: {
    // ...
  }
}

resolve 配置

resolve.alias

假设我们有个 utils 模块极其常用，经常编写相对路径很麻烦，希望可以直接 import 'utils' 来引用，那么我们可以配置某个模块的别名，如：

alias: {
  utils: path.resolve(__dirname,'src/utils')  这里使用 path.resolve 和 __dirname 来获取绝对路径
}

上述的配置是模糊匹配，意味着只要模块路径中携带了 utils 就可以被替换掉，如：

import 'utils/query.js'  等同于 import '[项目绝对路径]/src/utils/query.js'

如果需要进行精确匹配可以使用：

alias: {
  utils$: path.resolve(__dirname,1)"> 只会匹配 import 'utils'
}

查看下vue-cli的别名配置代码如下：

function resolve (dir) {
  return path.join(__dirname,'..',dir)
}

 ...省略其它代码
resolve: {
    extensions: ['.js','.vue','.json'],alias: {
      '@': resolve('src'),'#': resolve('config')
    }
}
 ...省略其它代码

resolve.extensions

我们在页面中常常这样引用文件：

import * as common from './src/utils/common'

webpack 会自行补全文件后缀，而这个补全的行为，也是可以配置的。

extensions: ['.wasm','.mjs','.js','.json','.jsx' 这里的顺序代表匹配后缀的优先级，例如对于 index.js 和 index.jsx，会优先选择 index.js

webpack 会尝试给你依赖的路径添加上 extensions 字段所配置的后缀，然后进行依赖路径查找，所以可以命中 src/utils/common.js 文件。

vue脚手架的extensions的配置如下：

extensions: ['.js','.json']

resolve.modules

对于直接声明依赖名的模块，webpack 会类似 Node.js 一样进行路径搜索，搜索 node_modules 目录，这个目录就是使用resolve.modules 字段进行配置的，默认就是：

resolve: {
  modules: ['node_modules'绝对路径：

resolve: {
  modules: [
    path.resolve(__dirname,'node_modules'), 指定当前目录下的 node_modules 优先查找
    'node_modules',1)"> 如果有一些类库是放在一些奇怪的地方的，你可以添加自定义的路径或者目录
  ],

这样配置在某种程度上可以简化模块的查找，提升构建速度。
resolve.mainFields
有 package.json 文件则按照文件中 main 字段的文件名来查找文件
我们之前有提到这么一句话，其实确切的情况并不是这样的，webpack 的 resolve.mainFields 配置可以进行调整。当引用的是一个模块或者一个目录时，会使用 package.json 文件的哪一个字段下指定的文件，默认的配置是这样的：

resolve: {
   配置 target === "web" 或者 target === "webworker" 时 mainFields 默认值是：
  mainFields: ['browser','module','main' target 的值为其他时，mainFields 默认值为：
  mainFields: ["module","main"因为通常情况下，模块的 package 都不会声明 browser 或 module 字段，所以便是使用 main 了。
在 NPM packages 中，会有些 package 提供了两个实现，分别给浏览器和 Node.js 两个不同的运行时使用，这个时候就需要区分不同的实现入口在哪里。如果你有留意一些社区开源模块的 package.json 的话，你也许会发现 browser 或者 module 等字段的声明。
resolve.mainFiles
当目录下没有 package.json 文件时，我们说会默认使用目录下的 index.js 这个文件，其实这个也是可以配置的，是的，使用 resolve.mainFiles 字段，默认配置是：

resolve: {
  mainFiles: ['index'],1)"> 你可以添加其他默认使用的文件名
},

通常情况下我们也无须修改这个配置，index.js 基本就是约定俗成的了。
resolve.resolveLoader
这个字段 resolve.resolveLoader 用于配置解析 loader 时的 resolve 配置，原本 resolve 的配置项在这个字段下基本都有。我们看下默认的配置：

resolve: {
  resolveLoader: {
    extensions: ['.js',mainFields: ['loader',

这里提供的配置相对少用，我们一般遵从标准的使用方式，使用默认配置，然后把 loader 安装在项目根路径下的 node_modules 下就可以了。
      
      
                 
        上一篇：GitBook相关使用以及配置笔记下一篇：webpack笔记-webpack初识与构建工具

webpack笔记-webpack之模块module、路径解析、resolve 配置（三）

module

路径解析

resolve 配置

resolve.alias

resolve.extensions

resolve.modules

resolve.mainFields

resolve.mainFiles

resolve.resolveLoader

猜你在找的Webpack相关文章