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很好地配合使用，因此所有内容都可以保留在内存中，并且无需事先生成文件即可使其工作。