【webpack5】Webpack環境作成時のエラーと警告の解消記録

Gulp4からwebpack5に作業環境を移動するため調べながら作っている最中に出てたエラーをまとめてみました。
都度追加してゆきます。

js周りはwebpackに

• ES6
• vue
• typescript

で書けるようにしています。

typescript

ファイルが読み込めないエラー

画像をTypeScriptを通して読み込むため
/src/js/definitions.d.tsに記述してwebpackを起動（npm run start）した際に出ました。

ERROR in ./src/js/definitions.d.ts
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for /Users/（環境までのパス）/（ディレクトリ）/src/js/definitions.d.ts.
    at makeSourceMapAndFinish (/Users/（環境までのパス）/（ディレクトリ）/node_modules/ts-loader/dist/index.js:52:18)
    at successLoader (/Users/（環境までのパス）/（ディレクトリ）/node_modules/ts-loader/dist/index.js:39:5)
    at Object.loader (/Users/（環境までのパス）/（ディレクトリ）/node_modules/ts-loader/dist/index.js:22:5)

調べたこと・その他の可能性

エラーを調べていく中でtsconfig.jsonの中に"noEmit": true,が入っているのが原因という記事をよく見かけましたが、もともとコメントアウトしていたので今回の影響範囲ではなかったです。

原因

今回の原因はwebpackで管理(監視)しているjsのディレクトリにdefinitions.d.tsファイルを置いていたことが原因でした。

対応

webpackの監視下から外すため別ディレクトリを作ってその中に入れました。
/src/js/から/src/ts/にdefinitions.d.tsを移動。
念のためVScode再起動してからnpm run startを実行で解消されました。

Vue

vue-loader v17の罠

webpackの書き方に問題がありました。
vue-loaderは系統によって書き方変わる恐れがあるので注意。

Error: Cannot find module 'vue-loader/lib/plugin'

webpack.config.js

//（修正前:v15まではこの書き方でOKっぽい）
const VueLoaderPlugin = require('vue-loader/lib/plugin');

//（修正後：v16以降）
const { VueLoaderPlugin } = require('vue-loader');

参考

---

2系統で書くと怒られる

"export 'default' (imported as 'Vue') was not found in 'vue'

vueを実行しているjsファイルのimportの書き方などを3系統の書き方に直す

参考

Warning

Mord（オプション）を設定してくれというWarning

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

developmentかproductionを設定すれば消える。
とりあえず最初は開発のみの予定だったのでdevelopmentで対応。
いずれ本番環境用も用意したい。

ESLint

ESLintによる警告は出ていても問題ないとはいえ
毎回出てくるのが鬱陶しい...

しかしESLintをよくわかっていないので
取り急ぎの対応。

コンソールをおいたら出てきた

Unexpected console statement.

対応

app.ts

//（修正前）
console.log("test");

//（修正後）
console.log("test"); // eslint-disable-line no-console

// eslint-disable-line no-consoleの追加で警告は出なくなりました。
もっとスマートな方法を知りたい( ´ ∵` )