2020年5月へ

Webpack4 が うまく走らなかったときのはなし

公開日：

最終更新日：

要約

Webpack4でjsファイルの読み込みやバンドルがうまくいかず、その原因がwebpack.config.jsの設定ミスにあることが判明。具体的には、module.exportsをmodule.exportと誤記していたため読み込みが失敗。修正により解決し、今後は構文エラー防止のためAtomのWebpackプラグイン導入を検討しています。

  • Webpack4
  • JavaScript
  • 設定ミス
  • module.exports
  • 開発環境
  • エラー対処
  • webpack.config.js

理由が分かってしまえば，大変，しょうもないプログラミングミスでした。

Webpack をつかって，jsファイルを読み込み／生成できない

webpack.config.js に，１通り設定を行って，書き出しの設定を行います。

ちなみに，package.json には，次のような scripts を指定。

（略）,
  "scripts": {
    "build": "webpack --mode production --watch --config webpack.config.js",
    "dev": "webpack --mode development --watch --config webpack.config.js"
  },
（略）

これで， $ npm run dev と叩くと，ファイルを１まとめにしてくれるはずなのですが，次のエラーが出て先に進みません。

ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/~{プロジェクトへのパス}'

webpack.config.js には，entry ポイントを，./webpack 以下を見に行くように設定しているので，./src を見に行くところが間違っています。

なぜ，うまく走らないのか。
webpack.config.js を読み込んでいないのか。

試しに，webpack.config.js に
console.log("webpack.config.js is loaded")
と書き込んでみました。

しっかりと，コンソール（ターミナル）に出力されました。

なら，なぜか。
webpack.config.js の記述が間違っているのでは？

目を皿にして見直すと，

module.exports

と書かねばらならぬところが，

module.export

と書かれていました・・・。
（そりゃ，読み込まれませんね・・・）

結局，ここを修正することで，全てうまく進みました。

Atom に Webpack 用のプラグインがあれば，入れようと思います。
（構文エラーチェック用的な・・・）