Vue 学習 MacOS インストール Webpack

Webpack の概要

Webpack は非常に人気のあるフロントエンド構築ツールであり、複数のモジュール (CSS、JavaScript、画像など) を 1 つ以上の静的リソースファイル (バンドル) にパッケージ化して実稼働環境にデプロイできます。Webpack はカスタム構成をサポートしており、さまざまな複雑なフロントエンドプロジェクト構築要件を実現できます。

Webpack の主な機能には、モジュールのロード、コード分割、ファイル処理、自動更新、パフォーマンスの最適化などが含まれます。

Vue.js や React などの一般的なフロントエンドフレームワークを使用する場合、通常、プロジェクトの依存関係とリソースをより適切に管理するために、Webpack の対応するプラグインまたはスキャフォールディングがプロジェクトの構築に使用されます。

webpackのインストール

まず、インストールされていることを確認します。

webpack -v

プロンプトが表示された場合はcommand not found: webpack、インストールされていません。

Mac OS に webpack をインストールするには、まず Node.js と npm をインストールする必要があります。nvm (Node Version Manager) を使用して Node.js のバージョンを管理し、インストール完了後に次のインストール手順を実行することをお勧めします。

Webpackをインストールする

sudo npm install webpack -g --unsafe-perm=true --allow-root

MacOS はnpm install -g webpack権限の問題を報告します。インストールするには sudo npm install コマンドを使用する必要があります。

インストール結果を確認する

webpack -v

この時点で、webpack-cli をインストールするように求められます。

webpack-cli をインストールする

sudo npm install webpack-cli -g --unsafe-perm=true --allow-root

インストール結果を確認する

webpack -v

完全な手順は次のとおりです。

➜  ~ webpack -v
zsh: command not found: webpack
➜  ~ npm install -g webpack
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /Users/morris/.npm/_cacache/content-v2/sha512/7c/57
npm ERR! errno EACCES
npm ERR! 
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
npm ERR! 
npm ERR! To permanently fix this problem, please run:
npm ERR!   sudo chown -R 501:20 "/Users/morris/.npm"

npm ERR! A complete log of this run can be found in: /Users/morris/.npm/_logs/2023-06-12T22_56_53_593Z-debug-0.log
➜  ~ sudo npm install webpack -g --unsafe-perm=true --allow-root
Password:

added 77 packages in 3s

9 packages are looking for funding
  run `npm fund` for details
➜  ~ webpack -v
CLI for webpack must be installed.
  webpack-cli (https://github.com/webpack/webpack-cli)

We will use "npm" to install the CLI via "npm install -D webpack-cli".
Do you want to install 'webpack-cli' (yes/no): yes
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...
npm ERR! code ENOENT
npm ERR! syscall rename
npm ERR! path /Users/morris/.npm/_cacache/tmp/b08a4b5c
npm ERR! dest /Users/morris/.npm/_cacache/content-v2/sha512/7c/57/93dbd9807074cdb6df0053a80a707075bdc952efc02f5024aef2e4c07622df24687ee6676cfb730e147ad2e7191b0dd311124d7fd61e86c13303ea83f32e
npm ERR! errno ENOENT
npm ERR! enoent Invalid response body while trying to fetch https://registry.npmjs.org/@xtuc%2flong: ENOENT: no such file or directory, rename '/Users/morris/.npm/_cacache/tmp/b08a4b5c' -> '/Users/morris/.npm/_cacache/content-v2/sha512/7c/57/93dbd9807074cdb6df0053a80a707075bdc952efc02f5024aef2e4c07622df24687ee6676cfb730e147ad2e7191b0dd311124d7fd61e86c13303ea83f32e'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in: /Users/morris/.npm/_logs/2023-06-12T22_59_47_594Z-debug-0.log
undefined
➜  ~ sudo npm install webpack-cli -g --unsafe-perm=true --allow-root



added 117 packages in 2s

15 packages are looking for funding
  run `npm fund` for details
➜  ~ webpack -v

  System:
    OS: macOS 12.6
    CPU: (8) x64 Apple M1
    Memory: 71.92 MB / 16.00 GB
  Binaries:
    Node: 20.0.0 - /usr/local/bin/node
    npm: 9.6.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 114.0.5735.106
    Safari: 16.0
  Global Packages:
    webpack-cli: 5.1.4
    webpack: 5.86.0

➜  ~