webpack4から5へ移行、Vue2から3へ移行ビルドを通す【webpack4から5へ移行編】

投稿

こんにちは、フリー写真素材サイト「Canvaspace」管理人のYasuです。

「webpack4から5へ移行、Vue2から3へ移行ビルドを通す」を2回に分けて行っていきたいと思います。

今回はwebpack4から5へ移行方法の解説になります。

その前に、前回の記事で解説したwebpac4、Vue2、Typescriptの環境ができていることを前提として進めていきます。

環境ができていない方は以下のリンクを参考に事前の環境構築をお願いします。

GitHubにコードがありますので忙しい方はそちらからコードを落としてお試しください。

なぜ最初にwebpackのアップグレードを行うのか

Vue3自体はwebpack4でも動きますが、webpack5にすることでビルド時間の短縮やエラーが見やすくなるためです。

今回は使用していませんが、Vuetify3を使用している場合はwebpack5が必須になります。

webpackのアップグレード手順

基本は公式ガイドを参考にアップグレードを進めていきます。

①webpack4系の最新にする

以下のコマンドを実行

npm i-D webpack@4

②webpack-cliを3系の最新にする

以下のコマンドを実行

npm i -D webpack@3

③プラグインとローダーを現時点で使用できる最新のバージョンにアップグレードする

以下のコマンドを実行

npm i -D babel-loader@8 copy-webpack-plugin@5 css-loader@6 style-loader@3 ts-loader@8 vue-loader@15

現段階でnpm run startをしてエラーが出なければOKです。

④webpack5にアップグレードする際に現時点で必要な対応事項を確認する

以下のコマンドを実行

node --trace-deprecation node_modules/webpack/bin/webpack.js

今回は以下のエラーが表示された

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/

ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\webpack-vue-typescript-2023'

上記のエラー、warningは一旦無視でOK

上記以外でエラーやwarningが発生している場合は該当箇所を修正する。

⑤modeを設定する

module.exports = {
  mode: "development",
};

⑥オプションを更新する

こちらを参考にする

今回は複雑な事を行っていないため変更箇所はなし

⑦webpack5の互換性を確認する

以下のコードを追加する

module.exports = {
  node: {
    Buffer: false,
    process: false,
  },
};

ここでnpm run startをして実行できればOK

⑧webpack5へアップグレードする

以下のコマンドを実行

npm i -D webpack@5

webpack5の互換性を確認するで追加したコードを削除する

※webpack5からpolifillの自動挿入が無くなったため必要な方は以下を参考に各自でインストールする

⑨「プラグインとローダーを現時点で使用できる最新のバージョンにアップグレード」手順で最新にできなかったローダー、プラグインを最新にする

npm i -D babel-loader@9 copy-webpack-plugin@11 css-loader@6 style-loader@3 ts-loader@9 typescript@5

ここでnpm run startを実行するとCopyWebpackPluginでエラーが出ているため修正する

ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] has an unknown property 'from'. These properties are valid:
   object { patterns, options? }
- new CopyPlugin([{ from: "./public" }])
+ new CopyPlugin({
+ 	patterns:[
+ 		{ from: "./public" },
+ 	],
+ }),

修正後にnpm run startを実行し、

コマンドプロントにwebpack 5.78.0 compiled successfullyと出ればwebpack5への移行は成功です。

今回はシンプルな構成であったため比較的スムーズに移行が行えましたが、複雑な場合は今回解説していない他の設定を変更する必要もあります。

次回は「Vue2から3へ移行ビルドを通す」を解説します。