ブログ

BLOG

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

2018/02/09

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

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

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

お問い合わせ・ご相談CONTACT

オクワスでは、Webを通して魅力を最大限に伝えるお手伝いをしております。ホームページ制作やWebからの集客などでのお困りごと、Web開発で人手が足りないなどございましたら一度お気軽にご連絡ください。

お問い合わせフォームまたは𝕏のDMからご相談お受けしております。

お問い合わせフォームへDMからご連絡ください
© 2015 - 2024 Okuda Kouki