webpack構建腳本錯誤

Question

我正在嘗試使用webpack啟動本地開發環境，並且遇到了此腳本部分的問題

"scripts": {
    "start": "npm run build",
    "build": "webpack -d && copy /src/index.html /dist/index.html && webpack-dev-server --content-base src/ --inline",
    "build:prod": "webpack -p && copy /src/index.html dist/index.html"
  },

當我在做npm start時，我會看到2個這樣的錯誤

還有一個僅用npm run build失敗的原因是什么？

index.html存在於提供的地址

我雖然mb我錯過了一些依賴我的東西，但一切似乎都到位了

  "dependencies": {
    "body-parser": "^1.18.2",
    "express": "^4.16.1",
    "oracledb": "^1.13.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "socket.io": "^2.0.3"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }

Answer 1

相關的錯誤是：

The syntax of the command is incorrect.

當鏈接多個命令時，通常應該隔離它們並分別測試它們，以查看哪個失敗，但是由於它緊接在webpack構建輸出之后，因此它必須是第二個。

copy /src/index.html /dist/index.html

copy是Windows命令，在Windows上，命令行選項以/開頭，而不是-在Unix上。 您正在嘗試使用Unix樣式路徑，該路徑最終被視為選項。 Windows上的路徑使用\\ （反斜杠）代替/ （正斜杠）。 即使是Unix，您也不想使用/開頭路徑，因為它會在文件系統的根目錄（而不是當前目錄）中查找，並且由於找不到文件而失敗，除非您恰巧在文件系統的根目錄中有這樣的文件。

該命令應為：

copy src\index.html dist\index.html

這在其他操作系統上將不起作用，這是構建系統中的附加步驟。 作為替代方案，您可以使用copy-webpack-plugin將其集成到webpack中，或者在特定情況下，可以讓webpack使用html-webpack-plugin為您生成index.html 。 html-webpack-plugin的優點在於，它會自動將<script>標記與生成的包一起插入（如果在包名稱中使用散列，則特別有用）。 這意味着webpack將輸出應用程序所需的一切，並且您只需部署dist目錄即可。 另外，它可以與webpack-dev-server很好地配合使用，因此所有內容都可以保留在內存中，並且無需事先生成文件即可使其工作。