webpack_07 (resolve)

2021-12-10 19:01:50 阅读：199 来源： 互联网

标签：文件 resolve 扩展名 07 js webpack extensions 解析

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack_07 (resolve)