CODEWITHSUNDEEP
javascriptwebpackwebpack-3
twils0
twils0

Reputation: 2633

webpack - output.filename error

I know this is a common question for webpack; it's really hard to debug something if it won't give you any information about the cause or location of the error.

I'm getting the error:

Error: 'output.filename' is required, either in config file or as --output-filename

I know it has to do with a syntax error somewhere, but I'm too new to webpack to figure it out.

Here's my config file. It's called "webpack.config.js" in the root folder (i.e. the folder in which I initially ran: npm init).

const webpack = require('webpack');
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const RewriteImportPlugin = require("less-plugin-rewrite-import");

const root_dir = path.resolve(__dirname)
const src_dir = path.resolve(__dirname, "webpack_src")
const build_dir = path.resolve(__dirname, "webpack_bin")
const node_mod_dir = path.resolve(__dirname, 'node_modules');
const extractLESS = new ExtractTextPlugin('style.css');

const config = {
  entry: {
    index: path.resolve(src_dir, 'index.js')
  },
  output: {
    path: build_dir,
    filename: 'bundle.js'
  },
  resolve: {
    modules: [root_dir, 'node_modules'],
  },
  module: {
    rules: [
      {
        loader: 'babel-loader',
        test: /\.(js)$/
      },
      {
        use: extractLESS.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            {
              loader: 'less-loader',
              options: {
                paths: [root_dir, node_mod_dir],
                plugins: [
                  new RewriteImportPlugin({
                    paths: {
                      '../../theme.config': __dirname + '/semantic_ui/theme.config',
                    }
                  })
                ]
              }
            }]
        }),
        test: /\.less$/
      },
      {
        use: ['file-loader'],
        test: /\.(png|jpg|gif|woff|svg|eot|ttf|woff2)$/
      },
    ]
  },
  plugins: [
    extractLESS,
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};

module.exports = {
  config
};

Upvotes: 0

Views: 314

Answers (1)

Michael Jungo
Michael Jungo

Reputation: 32972

You're exporting module.exports = { config }, which means that you are exporting an object with one property, namely config, but webpack expects the object to be your entire config. Webpack requires output.filename, whereas you only provide config.output.filename.

The export should be your config:

module.exports = config;

Upvotes: 1

Related Questions