Javascript 如何使用babel和webpack设置react/node项目？

我正在尝试用babel和webpack建立一个新的react项目，但它不起作用。这是我的webpack.dev.config.js文件：

var webpack = require('webpack');
var path = require('path');

var parentDir = path.join(__dirname, '../');

module.exports = {
    entry: [
        path.join(parentDir, '/react_components/index.js')
    ],
    module: {
        loaders: [{
            test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                  }
            }
        ]
    },
    output: {
        path: parentDir + '/html',
        filename: 'main.js'
    },
    devServer: {
        contentBase: parentDir,
        historyApiFallback: true
    }
}

这是我的项目的屏幕截图：

我收到一条消息，webpack已成功编译，但main.js文件仍然为空

PS：我正在使用这个教程

---

尝试在项目目录中运行

node node\u modules\webpack\bin\webpack.js

，它应该构建一个physical main.js文件

Web包开发服务器未写入磁盘。这有利于结果 从记忆中

---

来源：

打开package.json文件。在脚本内部添加

“构建”：“网页包”

您的脚本对象基本上应该如下所示：

“脚本”：{
“测试”：“echo\”错误：未指定测试\“&退出1”，
“开始”：“网页包开发服务器--热”，
“生成”：“网页包”
}

---

然后在终端上运行

npm运行build

。

同意。将有一个两步的过程。首先绑定webpack，然后在一个单独的终端中启动服务器。正如@RudolphTheCat所说，webpack dev服务器不会写入磁盘，而是从内存提供服务。因此，当您运行webpack dev server时，main.js不会得到更新，因为它不是必需的。仅出于生产目的，您需要main.js。如果您只是想查看main.js文件，可以在chrome开发工具中查看。