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

Question

i'm tryng to setup a new react project with babel and webpack but it's not working. this is my webpack.dev.config.js file :

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
    }
}

and this is a screen shot from my project :

i get the message that webpack is compiled successfully but the main.js file remain empty

PS : i'm using this tutorial

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

Answer 1

Try running node node_modules\\webpack\\bin\\webpack.js in project directory and it should build a phyisical main.js file.

The webpack-dev-server doesn't write to disk. It serves the result from memory.

Source: https://github.com/webpack/webpack-dev-server/issues/24

Answer 2

Open package.json file. Inside scripts add "build": "webpack"

Your scripts object should essentially look something like this :

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

then run npm run build on your terminal.