Webpack - webpack-dev-server: không tìm thấy lệnh

Tôi đang làm việc trên một ứng dụng web React bằng cách sử dụng webpack, một cách lỏng lẻo cùng với hướng dẫn này .

Vô tình, tôi đã thêm thư mục node_modules vào git của mình. Sau đó tôi đã gỡ bỏ nó một lần nữa bằng cách sử dụng git rm -f node_modules/*.

Bây giờ, khi tôi thử khởi động máy chủ webpack, tôi gặp lỗi sau:

> 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

Lúc đầu, tôi nghĩ đó chỉ là dự án của tôi, nhưng sau đó tôi kiểm tra các điểm kiểm tra mã của hướng dẫn: cùng một lỗi! Vì vậy, một cái gì đó dường như đang lộn xộn trên toàn cầu.

Đây là những gì tôi đã thử cho đến nay:

• rm node_modules và cài đặt lại với npm install
• npm cache cleannhư ai đó đã đề cập đến vấn đề này trên github
• cài đặt webpack trên toàn cầu với npm install -g webpack
• xóa hoàn toàn nút và npm khỏi hệ thống của tôi (sử dụng hướng dẫn này ) và cài đặt lại bằng cách sử dụng brew

Thông báo lỗi vẫn còn. Tôi có thể thử những gì khác?

PS: Nội dung của webpack.dev.config.jslà:

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;

Được rồi, thật dễ dàng:

npm install webpack-dev-server -g

Điều khiến tôi bối rối rằng lúc đầu tôi không cần nó, có lẽ mọi thứ đã thay đổi với một phiên bản mới.

FYI, để truy cập bất kỳ tập lệnh nào thông qua dòng lệnh như bạn đang thử, bạn cần đăng ký tập lệnh dưới dạng shell-script (hoặc bất kỳ loại tập lệnh nào như .js, .rb) trong hệ thống như các tệp này trong dir /usr/bintrong UNIX. Và, hệ thống phải biết tìm chúng ở đâu. tức là vị trí phải được tải trong $PATHmảng.

Trong trường hợp của bạn, tập lệnh webpack-dev-serverđã được cài đặt ở đâu đó bên trong ./node_modulesthư mục, nhưng hệ thống không biết cách truy cập nó. Vì vậy, để truy cập lệnh webpack-dev-server, bạn cũng cần cài đặt script trong phạm vi toàn cục .

$ npm install webpack-dev-server -g

Ở đây, -gđề cập đến phạm vi toàn cầu.

Tuy nhiên, cách này không được khuyến khích vì bạn có thể gặp phải các vấn đề xung đột phiên bản; như vậy, thay vào đó bạn có thể thiết lập một lệnh trong npm's package.jsontập tin như:

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

Cài đặt này sẽ cho phép bạn truy cập tập lệnh bạn muốn bằng lệnh đơn giản

$ npm start

Vì vậy, ngắn để ghi nhớ và chơi. Và, npmbiết vị trí của mô-đun webpack-dev-server.

Tập lệnh webpack-dev-serverđã được cài đặt bên trong thư mục ./node_modules. Bạn có thể cài đặt lại nó trên toàn cầu bằng cách

sudo npm install -g webpack-dev-server

hoặc chạy nó như thế này

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

. có nghĩa là nhìn nó trong thư mục hiện tại.

Sợi

Tôi gặp sự cố khi chạy: yarn start

Nó đã được khắc phục với việc chạy trước: yarn install

Tôi đã gặp vấn đề tương tự nhưng các bước dưới đây đã giúp tôi thoát khỏi nó.

1. Cài đặt cục bộ 'webpack-dev-server' (Trong thư mục dự án vì nó không được chọn từ cài đặt chung)

   npm install - lưu webpack-dev-server

Có thể xác minh xem thư mục 'webpack-dev-server' có tồn tại bên trong node_modules hay không.

2. Chạy bằng npx để chạy trực tiếp

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

npm run start cũng hoạt động tốt khi mục nhập của bạn trong các tập lệnh package.json phải giống như trên như không có npx.

Tôi thấy câu trả lời được chấp nhận không hoạt động trong tất cả các trường hợp. Để đảm bảo nó hoạt động 100%, người ta CŨNG phải xóa bộ nhớ cache npm. Hoặc trực tiếp Chuyển bộ nhớ cache và xóa ổ khóa, bộ nhớ đệm, ẩn danh-cli-metrics.json; hoặc một người có thể thử npm cache clean.

Vì tác giả đã xóa bộ nhớ cache trước khi thử giải pháp được đề xuất nên có thể giải pháp này không thể biến nó thành một phần của điều kiện tiên quyết.

Đối với cài đặt toàn cầu: npm install webpack-dev-server -g

Đối với cài đặt cục bộ, npm install --save-dev webpack

Khi bạn giới thiệu webpack trong tệp package.json, nó sẽ cố tìm nó ở vị trí node_modules \ .bin \

Sau khi cài đặt cục bộ, tệp wbpack sẽ được tạo ở vị trí: \ node_modules \ .bin \ webpack

Tôi cài đặt với npm install --save-dev webpack-dev-serversau đó tôi đặt package.json và webpack.config.js như sau: setting .

Sau đó, tôi chạy webpack-dev-server và gặp lỗi lỗi này .

Nếu tôi không sử dụng npm install -g webpack-dev-serverđể cài đặt, sau đó làm thế nào để sửa chữa nó?

Tôi đã sửa lỗi configuration has an unknown property 'colors'bằng cách xóa colors:true. Nó đã làm việc!

Tôi đã gặp vấn đề tương tự với Yarn , không có vấn đề nào ở trên phù hợp với tôi, vì vậy tôi chỉ cần gỡ bỏ ./node_modulesvà chạy yarn installvà sự cố đã biến mất.

npm cài đặt webpack-dev-server -g - Windows OS

Tốt hơn bạn nên sử dụng sudo trong linux để tránh lỗi quyền

sudo npm cài đặt webpack-dev-server -g

Bạn có thể sử dụng sudo npm install webpack-dev-server --save để thêm nó vào package.json.

Đôi khi bạn có thể yêu cầu chạy các lệnh dưới đây.

npm cài đặt webpack-cli - lưu hoặc npm cài đặt webpack-cli -g

Tôi nhận thấy vấn đề tương tự sau khi cài đặt VSCode và thêm kho lưu trữ Git từ xa. Bằng cách nào đó /node_modules/.binthư mục đã bị xóa và đang chạy npm install --save webpack-dev-servertrong dòng lệnh đã cài đặt lại thư mục bị thiếu và khắc phục sự cố của tôi.