为什么webpack配置中常常用path库处理路径

我们常常发现在webpack中或一些对于路径相关的配置文件中常常使用path库进行处理

像是下面这样

  entry: {
    bundle: [
      './src/old/index.web.js', 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000'   
         ],
    }, 
  output: { 
   path: path.resolve(__dirname, '../dist/client'),  
   filename: '[name].js',  
   chunkFilename: '[name].js',    
   publicPath: '/' 
 },

在这里使用path.resolve处理总共有两个原因

1.兼容windows和mac/linux路径写法问题 。 windows使用\进行分割目录 而mac或linux使用的是/

2.工作当前目录问题，如果你写成下面这样

output: {
    path: '../dist/client',
    filename: '[name].js'
}

如果你的脚本执行命令与其在同一目录下，那么恭喜你侥幸成功。为什么说侥幸呢 ，这是因为其相对路径并不是相对于当前配置文件，而是相对于pwd。像下面这样

你期望是打包在 ./test/build文件中  然而其因为相对的是pwd 所以其便会打包在了/Users/dist/client文件夹中。这显然不是我们想要的。

所以当我们使用path.resolve处理后其路径便被改为/Users/apple/test/dist/client。

但其实webpack当前已经强制性进行了绝对路径写法，如果你不写的话将会像如下