如何用babel和webpack设置你的react / node项目？

Question

我正在尝试与babel和webpack建立一个新的反应项目，但它不起作用。这是我的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：我正在使用本教程

https://medium.com/netscape/setting-up-a-react-project-from-scratch-d62f38ab6d97

Answer 1

尝试在项目目录中运行qazxsw poi，它应该构建一个物理main.js文件。

webpack-dev-server不写入磁盘。它服务于记忆的结果。

资料来源：node node_modules\webpack\bin\webpack.js

Answer 2

打开package.json文件。在内部脚本中添加https://github.com/webpack/webpack-dev-server/issues/24

你的脚本对象应该看起来像这样：

"build": "webpack"

然后在你的终端上运行

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot",
    "build":"webpack"
  }

。