Webpack：在npm開始時出錯

Question

我正面臨package.json的問題，我也會發布我得到的cmd錯誤的圖像。問題是webpack.config.js創建src和dist文件，但npm start不起作用。

{ 
    "name": "reactjs-basics", 
    "version": "1.0.0", 
    "description": "Some basic ReactJS", 
    "main": "index.js", 
    "scripts": { 
    "start": "npm run build", 
    "build": "webpack -d && copy src/index.html dist/index.html && webpack- 
       dev-server --content-base src/ --inline --hot", 
    "build:prod": "webpack -p && copy src/index.html dist/index.html" 
    }, 
"keywords": [ 
    "reactjs" 
], 
"author": "Maximilian Schwarzmueller", 
"license": "MIT", 
"dependencies": { 
    "react": "^15.2.1", 
    "react-dom": "^15.2.1" 
}, 
"devDependencies": { 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-stage-2": "^6.11.0", 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1" 
} 
} 

錯誤如下：

Hash: e515b3cecad65c29e67e 
Version: webpack 1.15.0 
Time: 2325ms 
     Asset  Size Chunks    Chunk Names 
    bundle.js 1.66 kB  0 [emitted] main 
bundle.js.map 1.59 kB  0 [emitted] main 
    + 1 hidden modules 
The syntax of the command is incorrect. 

npm ERR! Windows_NT 6.1.7601 
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program 
Files\\nodejs\\ 
node_modules\\npm\\bin\\npm-cli.js" "run" "build" 
npm ERR! node v6.10.2 
npm ERR! npm v3.10.10 
npm ERR! code ELIFECYCLE 
npm ERR! reactjs-basics@1.0.0 build: `webpack -d && copy src/index.html 
dist/index.html && webpack-dev-server --content-base src/ --inline --hot` 
npm ERR! Exit status 1 
npm ERR! 
npm ERR! Failed at the reactjs-basics@1.0.0 build script 'webpack -d && copy 
src/index.html dist/index.html && webpack-dev-server --content-base src/ -- 
inline --hot'. 
npm ERR! Make sure you have the latest version of node.js and npm installed. 
npm ERR! If you do, this is most likely a problem with the reactjs-basics 
package, 
npm ERR! not with npm itself. 
npm ERR! Tell the author that this fails on your system: 
npm ERR!  webpack -d && copy src/index.html dist/index.html && webpack- 
dev-server --content-base src/ --inline --hot 
npm ERR! You can get information on how to open an issue for this project 
with: 
npm ERR!  npm bugs reactjs-basics 
npm ERR! Or if that isn't available, you can get their info via: 
npm ERR!  npm owner ls reactjs-basics 
npm ERR! There is likely additional logging output above. 

npm ERR! Please include the following file with any support request: 
npm ERR!  C:\Users\akhan5\Desktop\test3\reactjs-basics\npm-debug.log 

npm ERR! Windows_NT 6.1.7601 
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program 
Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start" 
npm ERR! node v6.10.2 
npm ERR! npm v3.10.10 
npm ERR! code ELIFECYCLE 
npm ERR! reactjs-basics@1.0.0 start: `npm run build` 
npm ERR! Exit status 1 
npm ERR! 
npm ERR! Failed at the reactjs-basics@1.0.0 start script 'npm run build'. 
npm ERR! Make sure you have the latest version of node.js and npm installed. 
npm ERR! If you do, this is most likely a problem with the reactjs-basics 
package, 
npm ERR! not with npm itself. 
npm ERR! Tell the author that this fails on your system: 
npm ERR!  npm run build 
npm ERR! You can get information on how to open an issue for this project 
with: 
npm ERR!  npm bugs reactjs-basics 
npm ERR! Or if that isn't available, you can get their info via: 
npm ERR!  npm owner ls reactjs-basics 
npm ERR! There is likely additional logging output above. 

npm ERR! Please include the following file with any support request: 
npm ERR!  C:\Users\akhan5\Desktop\test3\reactjs-basics\npm-debug.log 

Answer 1

你start腳本只要求npm build：

"scripts": { 
    "start": "npm run build" 

和 「故宮建」 做到這一點：

"build": "webpack -d && copy src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot" 

巴斯cpm，npm start永遠不會工作，因爲它會再次開始構建項目，爲了幫助你爲什麼你的腳本被破壞，我需要你的webpack.config.js文件。

Answer 2

var path = require("path"); 

var DIST_DIR = path.resolve(__dirname, "dist"); 
var SRC_DIR = path.resolve(__dirname, "src"); 

var config = { 
    entry: SRC_DIR + "/app/index.js", 
    output: { 
     path: DIST_DIR + "/app", 
     filename: "bundle.js", 
     publicPath: "/app/" 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js?/, 
       include: SRC_DIR, 
       loader: "babel-loader", 
       query: { 
        presets: ["react", "es2015"] 
       } 
      } 
     ] 
    } 
}; 

module.exports = config;