はじめに

現在、Web系自社開発企業への転職を目標にポートフォリオを作成中。
Dockerを活用してLEMP環境を構築し、Laravel+VuejsでWebアプリケーションの開発を行っております。

今回は、npm run prodでJavaScriptのトランスパイルを実行するまでの流れを記録として残します。

目次

やりたいこと
トランスパイル実行したときに発生したエラー
調査
原因
解決策
参考文献

やりたいこと

npm run prodを実行してJavaScriptのトランスパイルを行いたい

npm run prod

トランスパイル実行したときに発生したエラー

エラー内容

[webapp@ip-10-0-10-10 laravel-vue-app]$ npm run prod

> prod
> npm run production


> production
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js

[webpack-cli] Error: Unknown option '--no-progress'
[webpack-cli] Run 'webpack --help' to see available commands and options

調査

『Unknown option '--no-progress'』でググる

原因

Laravel Mix 6は、CLIからいくつかのオプションが削除されました。
それに応じてscriptsてpackage.jsonファイルのセクションを更新する必要があります。

解決策

package.jsonを編集

Before

"scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},

After

"scripts": {
				"dev": "npm run development",
		    "development": "mix",
		    "watch": "mix watch",
		    "watch-poll": "mix watch -- --watch-options-poll=1000",
		    "hot": "mix watch --hot",
		    "prod": "npm run production",
		    "production": "mix --production"
}

参考文献