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 webpack command, I was seeing the following output: Output filename not configured.

This is the webpack config:

output: {
    filename: 'bundle.js',
    library: 'require',
    libraryTarget: 'this'
},

This is the only clue i could get from the web :: http://anujnair.com/blog/12-output-filename-not-configured-error-from-webpack But it did not solve the issue

Any Help will be great

Answer 1

also after checking the right file name which should be 'webpack.config.js', a good note is to check where the 'webpack.config.js' file is located. it should be in the same folder as your package.json file is located

Answer 2

I came across this error when there is a spelling mistake the config details.

output: {
    path: "app/dist/assets",
    filname: "bundle.js",
    publicPath: "assets"
},

mispelled "filename". on correcting the spelling, this issue is resolved

Answer 3

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 4

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 5

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 6

Try exporting your configuration using module.exports = config where config is your configuration in a JavaScript object. In your case just do

module.exports = {
  output: {
    filename: 'bundle.js',
    library: 'require',
    libraryTarget: 'this'
  }
}

If this does not solve your problems, refer to the issue on https://github.com/webpack/webpack/issues/2403

Answer 7

Following are the things to check when you get this error.

• Whether your executing webpack command in the directory where your webpack.config.js file resides.
• You may be pointing to the wrong directory in your terminal.
• Typo error with the file name "webpack.config.js".
• No Module to export in your config file.
• Check for typo error in your config file

Answer 8

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'));

Answer 9

Common mistakes of this error is typo and most of the times it's writing module.export instead of module.exports. Also check the file name should be with a .js extension. e.g. webpack.config.js

Answer 10

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 11

You MUST have a file named webpack.config.js on project root.

Answer 12

If you using __dirname make sure it referenced to correct path. Default path is / which is local drive root.

Answer 13

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 14

Also double-check that the webpack.config.js file is in the right spot (in general, the root directory of the project) and the paths listed in the config file are correct.

Answer 15

I was getting the same error and it turned out to be my webpack config file name.

I had it as "webpack.config" instead of "webpack.config.js"

The "Output filename not configured" error seems to come up generally when there is a typo somewhere, and I've found the file name to be a sneaky place you forget to check.

Answer 16

You have a typo somewhere in your webpack.config.js file. Review your config file. Had similar problem and it was as a result of a typo.

Answer 17

Assuming that you would be using windows. i ran out into same error and realized i have to do something like this in wiindows d:\unpack-webpack> d:\unpack-webpack\node_modules.bin\webpack

instead i was doing d:\unpack-webpack\node_modules.bin\webpack

Hope this helps :) Thanks Gaurav Khurana