Output filename not configured Error in Webpack

Question

I had installed it globally by running npm install webpack -g and I had included it in my project by running npm install webpack --save-dev.

However, on running the

Answer 1

just to post my solution. Might help someone.

if you get this error, it always has to do with some typo error. In my case I had forgotten to close the last } with a semicolon at the end, like this: };

module.exports = {
    entry: './index.js',
    output: {
        filename:'bundle.js'
    }
};

This worked.

Answer 2

Make sure that webpack.config is in the proper place in the tree. Actually mine was in the proper place but I had to delete the whole file and then replace because the first time I ran web pack in terminal I had missed an underscore for __dirname. Instead of two, I had one. So I ran it with that fixed that a couple times trying this or that and came across this post. So I started over and even though in the same place for some reason it wasn't according to webpack.

Answer 3

I ran into this problem after following Webpacks docs for production builds. The way I ran into the issue is, I believe, specific to webpack-merge.

This is what their docs have in webpack.dev.js:

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  }
});

But this is what I needed to have:

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common(), {
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  }
});

Notice the only change is running common() instead of common.

Answer 4

1. create a file @ root directory webpack.config.js
2. paste below code in this file

module.exports = {
  entry: "./app.js",
  output: {
    filename: "bundle.js"
  }, 
  watch: true
}

3. app.js should also in root directory. write below line in app.js file:

document.write('welcome to react v2 app');

REF. https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460#.a64eeonhn

Answer 5

This error will also occur if you are running the command 'webpack -w' against a directory that does not have a webpack config file.

So if you are opening a new terminal window or tab and haven't changed directory to the root of your project before running the webpack command you will receive the error.

Answer 6

I had a similar error and managed to resolve it. The core of the issue was not in fact in the webpack.config.js code, but rather in my entry js file (in my case main.js). Ensure that you have the correct requires and render code. My example code is as follows:

var React = require('react');
var ReactDOM = require('react-dom');

var Main = React.createClass({
  render: function() {
    return (
      <div>
         <h1>Hello World, lets see how you React..</h1>
      </div>
    );
  },
});

ReactDOM.render(<Main />, document.getElementById('app'));