webpack.config.jsで思ったpath.resolveって何のためにあるの？

まずは、Webpack使っているとき、webpack.config.jsでの設定でこんな感じで書いていきますよね。

const path = require('path');

  module.exports = {
    entry: path.resolve(__dirname, "app.js"),
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
    }
    // 省略...
  }
  

気になりません？path

これって何してるの？

path.resolve(__dirname, 'dist')

じゃなくて

__dirname + '/dist'

でいいじゃんって。

とりあえずrequire(‘path’)について調べてみた。

そもそも”path”ってインストールしてないんだけど

そもそもpathってnpm installとかでインストールしていないんですけどって感じなんだけどなぜか使える。。
⇒これはNodeのモジュールぽくてデフォルトで入っているみたい。
https://nodejs.org/api/path.html

path.resolveについてそれっぽいこと書いてた。

webpackでrequireやimportのパスのrootを指定する

要はrequire(‘path’)を書くと、ファイルやディレクトリのパスに介入（操作）できるようになるらしい。例えば、path.resolveという関数だと、絶対パスに変換してくれるみたい。
https://nodejs.org/api/path.html#path_path_resolve_paths

例はこんな感じ

webpack.config.js

path.resolve('/foo/bar', './baz');
// Returns: '/foo/bar/baz'

path.resolve('/foo/bar', '/tmp/file/');
// Returns: '/tmp/file'

path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif');
// if the current working directory is /home/myself/node,
// this returns '/home/myself/node/wwwroot/static_files/gif/image.gif'
    

処理的には右から左に行われるようですが、イメージ的には左からガチャガチャくっつけていく感じですかね。
気をつけないといけないのは1つ前に戻る相対パスや、そもそもresolveの引数？に絶対パスがないとき。
どこにも絶対パスが指定されていないときは、path.resolveが呼ばれたところからのパスになります。1つ前に戻る相対パスも上のコード見たらなんとなくわかるかな？

結局’path.resolve’をいれると何がいいの？

安心なの。

Windowsとかだとパス区切りが/じゃないこともあるみたい。バックスラッシュっていうやつ（\）。だから__dirname + ‘/src’だとパスがおかしくなってしまうことがあるからpath.resolveを使って安心安全で行こうぜ！ってことらしい。

ちなみにプロジェクトによってはpath.resolveじゃうまいこといかないこともあるかもしれないからその場合はpath.joinなども使ってみてもいいかもしれない。
https://stackoverflow.com/questions/35048686/difference-between-path-resolve-and-path-join-invocation