投稿
こんにちは、フリー写真素材サイト「Canvaspace」管理人のYasuです。
「webpack4から5へ移行、Vue2から3へ移行ビルドを通す」を2回に分けて行っていきたいと思います。
今回はwebpack4から5へ移行方法の解説になります。
その前に、前回の記事で解説したwebpac4、Vue2、Typescriptの環境ができていることを前提として進めていきます。
環境ができていない方は以下のリンクを参考に事前の環境構築をお願いします。
GitHubにコードがありますので忙しい方はそちらからコードを落としてお試しください。
Vue3自体はwebpack4でも動きますが、webpack5にすることでビルド時間の短縮やエラーが見やすくなるためです。
今回は使用していませんが、Vuetify3を使用している場合はwebpack5が必須になります。
基本は公式ガイドを参考にアップグレードを進めていきます。
以下のコマンドを実行
npm i-D webpack@4
以下のコマンドを実行
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です。
以下のコマンドを実行
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が発生している場合は該当箇所を修正する。
module.exports = {
mode: "development",
};
こちらを参考にする
今回は複雑な事を行っていないため変更箇所はなし
以下のコードを追加する
module.exports = {
node: {
Buffer: false,
process: false,
},
};
ここでnpm run startをして実行できればOK
以下のコマンドを実行
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へ移行ビルドを通す」を解説します。