Webpack - webpack-dev-server: perintah tidak ditemukan

Saya sedang mengerjakan aplikasi web React menggunakan webpack, bersama dengan tutorial ini .

Secara tidak sengaja, saya menambahkan folder node_modules ke git saya. Saya kemudian menghapusnya lagi menggunakangit rm -f node_modules/* .

Sekarang, ketika saya mencoba memulai server webpack, saya mendapatkan kesalahan berikut:

> webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors

sh: webpack-dev-server: command not found

npm ERR! Darwin 14.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "devserve"
npm ERR! node v0.12.4
npm ERR! npm  v2.10.1
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! Blabber@0.0.1 devserve: `webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors`
npm ERR! spawn ENOENT

Awalnya saya pikir itu hanya proyek saya, tetapi kemudian saya memeriksa pos pemeriksaan kode tutorial: kesalahan yang sama! Jadi ada sesuatu yang tampaknya kacau secara global.

Inilah yang saya coba sejauh ini:

• rm node_modules dan instal ulang dengan npm install
• npm cache cleanseperti yang disebutkan seseorang tentang masalah ini di github
• instal webpack secara global dengan npm install -g webpack
• hapus sepenuhnya node dan npm dari sistem saya (menggunakan panduan ini ) dan instal ulang menggunakan brew

Pesan kesalahan masih berlanjut. Apa lagi yang bisa saya coba?

PS: Isi dari webpack.dev.config.jsadalah:

var config = require('./webpack.config.js');
var webpack = require('webpack');

config.plugins.push(
  new webpack.DefinePlugin({
    "process.env": {
      "NODE_ENV": JSON.stringify("development")
    }
  })
);

module.exports = config;

Oke, itu mudah:

npm install webpack-dev-server -g

Yang membuat saya bingung karena saya tidak membutuhkannya pada awalnya, mungkin banyak hal berubah dengan versi baru.

FYI, untuk mengakses skrip apa pun melalui baris perintah seperti yang Anda coba, Anda harus memiliki skrip yang terdaftar sebagai skrip-shell (atau jenis skrip apa pun seperti .js, .rb) di sistem seperti file-file ini di direktori /usr/bindi UNIX. Dan, sistem harus tahu di mana menemukannya. yaitu lokasi harus dimuat dalam $PATHarray.

Dalam kasus Anda, skrip webpack-dev-serversudah diinstal di suatu tempat di dalam ./node_modulesdirektori, tetapi sistem tidak tahu cara mengaksesnya. Jadi, untuk mengakses perintah tersebut webpack-dev-server, Anda juga perlu menginstal skrip dalam lingkup global .

$ npm install webpack-dev-server -g

Di sini -gmengacu pada ruang lingkup global.

Namun, ini bukan cara yang disarankan karena Anda mungkin menghadapi masalah versi yang berkonflik; jadi, sebagai gantinya Anda dapat mengatur perintah di npm'spackage.json file seperti:

  "scripts": {
    "start": "webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors"
   }

Pengaturan ini akan memungkinkan Anda mengakses skrip yang Anda inginkan dengan perintah sederhana

$ npm start

Sangat singkat untuk dihafal dan dimainkan. Dan, npmmengetahui lokasi modul tersebut webpack-dev-server.

Skrip webpack-dev-serversudah diinstal di dalam direktori ./node_modules. Anda dapat menginstalnya lagi secara global dengan

sudo npm install -g webpack-dev-server

atau jalankan seperti ini

./node_modules/webpack-dev-server/bin/webpack-dev-server.js -d --config webpack.dev.config.js --content-base public/ --progress --colors

. berarti melihatnya di direktori saat ini.

Benang

Saya mengalami masalah saat menjalankan: yarn start

Itu diperbaiki dengan menjalankan pertama: yarn install

Saya memiliki masalah yang sama tetapi langkah-langkah di bawah ini membantu saya keluar dari masalah itu.

1. Menginstal 'webpack-dev-server' secara lokal (Di direktori proyek karena tidak memilih dari instalasi global)

   npm install --simpan webpack-dev-server

Dapat memverifikasi apakah folder 'webpack-dev-server' ada di dalam node_modules.

2. Berjalan menggunakan npx untuk menjalankan secara langsung

npx webpack-dev-server --mode development --config ./webpack.dev.js

npm run start juga berfungsi dengan baik di mana entri Anda dalam skrip package.json harus seperti di atas seperti tanpa npx.

Saya menemukan jawaban yang diterima tidak berfungsi di semua skenario. Untuk memastikannya 100% berhasil, JUGA harus menghapus cache npm. Baik secara langsung Goto cache dan hapus kunci, cache, anonymous-cli-metrics.json; atau bisa dicobanpm cache clean .

Karena penulis telah membersihkan cache sebelum mencoba solusi yang disarankan, kemungkinannya yang gagal menjadikannya bagian dari prasyarat.

Untuk instalasi global: npm install webpack-dev-server -g

Untuk instalasi lokal, npm install --save-dev webpack

Ketika Anda merujuk webpack dalam file package.json, ia mencoba untuk mencarinya di lokasi node_modules \ .bin \

Setelah instalasi lokal, file wbpack akan dibuat di lokasi: \ node_modules \ .bin \ webpack

Saya menginstal dengan npm install --save-dev webpack-dev-serverkemudian saya mengatur package.json dan webpack.config.js seperti ini: pengaturan .

Kemudian saya menjalankan webpack-dev-server dan mendapatkan kesalahan kesalahan ini .

Jika saya tidak menggunakan npm install -g webpack-dev-serveruntuk menginstal, lalu bagaimana cara memperbaikinya?

Saya memperbaiki kesalahan configuration has an unknown property 'colors'dengan menghapus colors:true. Berhasil!

Saya memiliki masalah yang sama dengan Yarn , tidak satu pun di atas yang berhasil untuk saya, jadi saya cukup menghapus ./node_modulesdan menjalankan yarn installdan masalah hilang.

npm install webpack-dev-server -g - OS windows

Lebih baik Anda menggunakan sudo di linux untuk menghindari kesalahan izin

sudo npm instal webpack-dev-server -g

Anda dapat menggunakan sudo npm install webpack-dev-server --save untuk menambahkannya ke package.json.

Terkadang Anda mungkin perlu menjalankan perintah di bawah ini.

npm install webpack-cli --save atau npm install webpack-cli -g

Saya melihat masalah yang sama setelah menginstal VSCode dan menambahkan repositori Git jarak jauh. Entah bagaimana /node_modules/.binfolder itu dihapus dan berjalan npm install --save webpack-dev-serverdi baris perintah menginstal ulang folder yang hilang dan memperbaiki masalah saya.