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 等文件时,我们必须自己写上扩展名;

posted @ 2021-12-10 18:52  Hexrui  阅读(87)  评论(0编辑  收藏  举报
返回顶部