Webpackを使う時は、resolve.modulesの設定に気を付けよう。(特にModule not found: Error: Can't resolve～が表示された時)

resolve.modules

ひっそりと書いてありますが・・
https://webpack.js.org/configuration/resolve/#resolve-modules

resolve.modules defaults to:
modules: ["node_modules"]

これ、結構重要です。
デフォルトは、"node_modules"

If you want to add a directory to search in that takes precedences over node_modules/:
modules: [path.resolve(__dirname, "src"), "node_modules"]

変更する時は、設定例にあるように
"node_modules"を残します。

このページを見た方が、設定の全体像がつかみやすいかも。
Configuration - Options

resolve.modulesに書いてある"node_modules"を、うっかり消してしまうと・・

ビルド時や、webpack-dev-serverの実行時などに、
Module not found: Error: Can't resolve ～～
という感じに、おこられます。

原因は、importとかrequireしているものが、node_modulesの中にあるから。

でも、はっきり言って、気づきません。
Issueを上げてる人もたまにいますが、
再現しないよ？npm installしてないんでしょ？と言われて終わりです。

ということで、Webpackのハマリぽいんとでした。

蛇足1

node_modules/.bin/にある.cmdが付いているコマンドを直接実行する場合は、
そのファイルに書いてあるパスを変更しないと動かないようなので、めも。
(元のファイルは、カレントディレクトリがnode_modules/.bin/になっている事をを想定している？)

(例)node_modules/.bin/webpack-dev-server.cmdの場合

カレントディレクトリが、作業フォルダと同じ(直下にnode_modulesがある)場合
(動く)"%~dp0\node_modules\webpack-dev-server\bin\webpack-dev-server.js"
(変更前)"%~dp0\..\webpack-dev-server\bin\webpack-dev-server.js"

フォルダの位置の参考資料：
npm-folders

フォルダ構成の参考資料：
Node: Command Line Options --preserve-symlinks
preserve-symlinksの所にある図が、わかりやすいかと思います。
この図で、作業フォルダに相当するのは、{appDir}/app/

{appDir}
 ├── app
 │   ├── index.js
 │   └── node_modules
 │       ├── moduleA -> {appDir}/moduleA
 │       └── moduleB
 │           ├── index.js
 │           └── package.json
 └── moduleA
     ├── index.js
     └── package.json

蛇足2

Webpack用のプロジェクトのテンプレートなどでは、作業フォルダの中に、さらに作業フォルダを作る構成になっているようです。
(こんな感じの構成になっています。どの設定ファイルが使われるか、間違いやすい・・)

/ 作業フォルダ(本来のフォルダ)
L node_modules
L package.json
L その他設定ファイル
L   /作業フォルダ(サイト1用)
    L node_modules
    L package.json
    L その他設定ファイル