javascriptnode.jsreactjswebpackbabeljs

Webpack "compiled successfully" but main.js file is empty


I'm trying to set up 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
    }
}

This is a screenshot from my project:

screenshot of IDE

I get a log message that webpack "compiled successfully", but the main.js file remains empty.

PS: I'm using this tutorial: https://medium.com/netscape/setting-up-a-react-project-from-scratch-d62f38ab6d97


Solution

  • 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