Monaca Docs
検索
K

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",