NPM Run Build The Syntax of command is incorrect

Question

Using this tutorial: http://www.zsoltnagy.eu/step-by-step-environment-setup-of-the-react-developer-no-legacy-2016-standards/ I encountered a vague error after typing npm run build.

If you seen my previous question the package.json only has a slight variation and I suspect its something to do with these lines (the spaces in the file/directory names): "build": "webpack -d && copy src/app/index.html dist/index.html && webpack-dev-server --hot --inline --colors --progress --content-base src/", "build-prod": "webpack -p && copy src/app/index.html dist/index.html"

But I'm unsure how to resolve it.

Thank-you.

package.json code

{
    "name": "rapp",
    "version": "1.0.0",
    "description": "\"\"",
    "main": "index.js",
    "repository": {
        "type": "git",
        "url": "\"\""
    },
    "keywords": [
        "\"\""
    ],
    "author": "\"BH0\"",
    "license": "ISC",
    "dependencies": {
        "react-dom": "^15.5.4"
    },
    "devDependencies": {
        "babel-core": "^6.24.1",
        "babel-loader": "^7.0.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-2": "^6.24.1",
        "webpack": "^2.6.0",
        "webpack-dev-server": "^2.4.5"
    },
    "scripts": {
        "babel": "babel", 
        "webpack": "webpack", 

        "build": "webpack -d && copy src/app/index.html dist/index.html && webpack-dev-server --hot --inline --colors --progress --content-base src/",
        "build-prod": "webpack -p && copy src/app/index.html dist/index.html"
    }
}

Error message after typing 'npm run build'

webpack.config.js:

var path = require('path');

var DIST_PATH = path.resolve( __dirname, 'dist' );
var SOURCE_PATH = path.resolve( __dirname, 'src' );

module.exports = {
    entry: SOURCE_PATH + '/app/app.js',
    output: {
        path: DIST_PATH,   
        filename: 'app.dist.js',
        publicPath: '/app/'
    },  
    module: {
        loaders: [
            {
                test: /.jsx?$/,  
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: [
                        'es2015',
                        'react',
                        'stage-2'
                    ]
                }
            }
        ]
    }
};

Please forgive me for poor formatting but it wasn't working (my laptop's track-pad damaged).

Answer 1

You have to change all your file path to this \\. I tested your code, it is working fine.

// webpack.config.js
var webpack = require( "webpack" ),
path = require ( "path" );

var DIST_DIR = path.resolve( __dirname, "dist" ),
    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: [ "env", "react", "stage-2" ] }

        }]

    }

}

module.exports = config;

// package.json
"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"

}