Node中path.join()与path.resolve()的区别

path.join()方法顾名思义用于连接路径

path.join('/a', '/b', '/c') // /a/b/c
path.join('a', 'b', 'c')  //  a/b/c
path.join('/a', 'b','..' 'c')  // /a/c    ".."会向前跳一个目录

path.resolve()方法将路径或者路径片段解析成绝对路径

场景举例：webpack 中引入文件时配置别名

  const path = require('path')
  resolve: {
    alias: {
       // __dirname返回当前文件所在的目录地址
       // 因为当前配置文件和src目录同级,所以要加'..'向前跳一个目录,引入时才能正确指向
      '@': path.join(__dirname, '..', 'scr')
    }
  }

这样就可以在项目中用别名愉快的引入了

import info from '@/components/media/detailInfo'

• 传入路径从右至左解析，遇到第一个绝对路径解析停止

  // "/b" 就是遇到的第一个绝对路径
  path.resolve('/a', '/b', 'c')  // /b/c
  path.resolve('/a', './b', 'c') // /a/b/c
  //因为没有遇到第一个绝对路径，所以会一直向上解析(根目录路径/a/b/c)
  path.resolve('a', 'b', 'c') // /Users/siyuan/Desktop/example/node测试/a/b/c
  

• 如果没有传入参数，将只返回当前根目录

假如当前的目录结构是 a/b/c/index.js 那么根目录就是/a

  path.resolve()
  //  /Users/siyuan/Desktop/a

场景举例：webpack中配置include字段

const path = require('path');
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        //只命中app/styles和app/css目录下的文件,加快webpack的搜索速度
        include: [
          path.resolve(__dirname, 'app/styles'),
          path.resolve(__dirname, 'app/css')
        ]
      }
    ]
  }
}

webpack中指定输出文件目录

const path = require('path')
module.exports = {
  entry: 'main.js',
  output: {
    filename: '[name].js',
    //将输出的文件都放在dist文件下
    path: path.resolve(__dirname + './dist')
  }
}