webpack构建脚本错误

Question

i'm trying to start my local development environment with webpack and faced a problem with this scripts part

"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"
  },

when i'm doing npm start I see 2 errors like this

and one more with just npm run build failed what can be the reason for these errors ?

index.html exist at provided address

i though mb i missed something on my dependencies, but everything seems to on place

  "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 relevant error is:

The syntax of the command is incorrect.

As you're chaining multiple commands, you should generally isolate them and test them individually to see which one fails, but because it's right after the webpack build output, it must be the second one.

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

copy is a Windows command and on Windows the command-line options start with a / instead of a - like on Unix. You're trying to use Unix style paths, which end up being recognised as options. Paths on Windows use \\ (backslash) instead of / (forward slash). Even if it were Unix, you don't want to start the path with a / , because that would look in the root of your file system, not the current directory, and it would fail because it can't find the file, unless you coincidentally have such a file in the root of your file system.

The command should be:

copy src\index.html dist\index.html

This won't work on other operating systems and it's an additional step in the build system. As an alternative you can integrate it into webpack with the copy-webpack-plugin , or in your specific case you can let webpack generate the index.html for you with the html-webpack-plugin . An advantage of the html-webpack-plugin is that it automatically inserts <script> tags with the produced bundles (especially useful if you use hashes in your bundle names). This means that webpack would output everything you need for you application and you could just deploy your dist directory. As a bonus, it plays nicely with webpack-dev-server , so everything can be kept in memory and you don't need to generate the file beforehand to make it work.