Question

使用本教程：http://www.zsoltnagy.eu/step-by-step-environment-setup-of-the-react-developer-no-legacy-2016-standards/在输入npm run build后，我遇到了一个模糊的错误。

如果你看到我之前的问题，package.json只有轻微的变化，我怀疑它与这些行（文件/目录名称中的空格）有关："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"

但我不确定如何解决它。

感谢，你。

package.json代码

{
    "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'
                    ]
                }
            }
        ]
    }
};

请原谅我的格式不佳但它无法正常工作（我的笔记本电脑的履带板损坏）。

Answer 1

您必须将所有文件路径更改为此\\。我测试了你的代码，它运行正常。

// 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"

}

Answer 2

我遇到了这个确切的问题，并在-https://github.com/mschwarzmueller/reactjs-basics/issues/13找到了解决方案我知道为时已晚，但是逻辑是当我们按下“ npm run build”命令时，它将转到“ package.json”文件，并从“ script”块中选取“ build”参数。给定的“ build”参数包括使用正斜杠（/）的文件夹位置，该位置在Windows OS中不起作用。需要用双反斜杠（\\）代替。这样就解决了问题。

Answer 3

您的复制命令看起来不正确。

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

这有一些问题，我不是一个Windows用户，所以无法测试它，只需确保文件结构＆amp;路径是正确的。查看截图，webpack命令是成功的，下一个命令是copy，这是失败的。

NPM Run Build命令语法不正确

3 个答案: