webpack_07 (resolve)

webpack能解析三种文件路径：

绝对路径
　　由于已经获得文件的绝对路径，因此不需要再做进一步解析。
相对路径
　　在这种情况下，使用 import 或 require 的资源文件所处的目录，被认为是上下文目录；
　　在 import/require 中给定的相对路径，会拼接此上下文路径，来生成模块的绝对路径；
模块路径
　　在 resolve.modules中指定的所有目录检索模块；
　　　　默认值是 ['node_modules']，所以默认会从node_modules中查找文件；
　　我们可以通过设置别名的方式来替换初识模块路径，具体后面讲解alias的配置；

#webpack.config.js
module.exports = {
 resolve: {
    extensions: ['.js', '.json', '.mjs', '.vue', '.ts', '.jsx', '.tsx'],
    alias: {
      '@': path.resolve(__dirname, './src'),
      'js': path.resolve(__dirname, './src/js')
    }
  }
}

如果是一个文件：

　　如果文件具有扩展名，则直接打包文件；
　　使用 resolve.extensions选项作为文件扩展名解析

如果是一个文件夹：

会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找；
　　resolve.mainFiles的默认值是 ['index']；
　　再根据 resolve.extensions来解析扩展名；

extensions是解析到文件时自动添加扩展名：
　　默认值是 ['.wasm', '.mjs', '.js', '.json']；
　　所以如果我们代码中想要添加加载 .vue 或者 jsx 或者 ts 等文件时，我们必须自己写上扩展名；

标签：文件,resolve,扩展名,07,js,webpack,extensions,解析
来源： https://www.cnblogs.com/hexrui/p/15673425.html