webpack之resolve

简介

resolve主要设置模块如何被解析

resolve常用配置

resolve: {
  alias: { // 引用路径简化
    utils: path.resolve(__dirname, './src/utils')
  },
  modules: [ // 设置搜索路径
    path.resolve(__dirname, 'node_modules'),
    'node_modules'
  ],
  extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'] // 模糊匹配后缀名
}

常用的一些配置

alias

alias的主要作用是简化我们import时写的路径,比如我们要引入utils中的ajax.js,那么我们需要写很长一段相对路径,如果用alias的话,那么我们可以这样配置

alias: {
  utils: path.resolve(__dirname, './src/utils')
}

我们本来是这样引用的import ajax from './src/utils/ajax.js',用了alias之后就直接这样用就可以了import ajax from 'utils/ajax.js'
这个是模糊配置,如果需要精准配置的话则在key的后面加上$
eg:

alias: {
  utils$: path.resolve(__dirname, './src/utils/ajax.js')
}

访问的时候只需要import ajax from 'utils'就可以了。

modules

modules主要是用于路径搜索,默认配置是

modules: ['node_modules']

如果你知道你的node_modules在哪个路径下的话可以让搜索更加简化
eg:

modules: [
  path.resolve(__dirname, 'node_modules'), // 这个设置在前面的话会优先去检索这个路径
  'node_modules'
]

extensions

extensions主要用于模糊匹配文件的后缀名,检索的顺序是从前到后

如果设置中加了.js,那么在import的时候本来这样写的import ajax from 'utils/ajax.js',可以改为这样import ajax from 'utils/ajax'

eg:

extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']

aliasFields

指定一个字段,例如 browser,根据此规范进行解析。这个我没有搞懂

eg:

aliasFields: ["browser"]