Webpack5への更新

NPMパッケージのアンインストール

• webpack-serveを利用している場合は、アンインストールする

npm uninstall webpack-serve --force

webpack.config.js

画像などのリソース関係のローディングを更新

{
    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?\S*)?$/,
    type: 'asset/resource',
    generator: {
        filename: 'assets/[name].[hash].[ext]'
    }
},

chunksortのモードの削除

webpackConfig.devServerと更新

webpackConfig.devServer = {
    allowedHosts: 'all',
    port: port,
    host: host,
    devMiddleware: {
        publicPath: '/',
        stats: true
    },
    client: {
        webSocketURL: {
            pathname: "/ws",
            hostname: host,
            port: port,
            protocol: 'wss',
        },
    },
};

presetsを「@babel/preset-env」に更新

{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    include: path.resolve(__dirname, 'src'),
    use: [{
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env']
        }
    }]
},

package.jsonの更新

"@babel/core": "^7.22.10",
"@babel/preset-env": "^7.22.10",
"babel-loader": "^9.1.3",
"css-loader": "^6.8.1",
"cssnano": "^6.0.1",
"file-loader": "^6.2.0",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.3",
"mini-css-extract-plugin": "^2.7.6",
"progress-bar-webpack-plugin": "^2.1.0",
"style-loader": "^3.3.3",
"vue-loader": "15.9.8",
"vue-template-compiler": "2.6.14",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1",
"yargs": "^17.7.2"

package.jsonの scriptsタグについて、devを次の内容に更新

"dev": "webpack serve --open",

POSTCSSのアンインストール

package.jsonから下記のパッケージを削除します。また、postcss.configファイルを削除します。

"postcss": "^8.4.7",
"postcss-loader": "^6.2.1",
"postcss-preset-env": "^7.4.1",
"postcss-url": "^10.1.3",