webpack error: output.filename is required, in my ASP.net + Vue app

Question

I am a beginner with webpack and currently I am following this answer by @Bert, to configure Vue inside my current MVC 4 application.

when I try to run webpack --watch I get the following error:

Error: 'output.filename' is required, either in config file or as --output-filename
    at processOptions (dir\node_modules\webpack\bin\convert-argv.js:507:11)
    at processConfiguredOptions (dir\node_modules\webpack\bin\convert-argv.js:150:4)
    at module.exports (dir\node_modules\webpack\bin\convert-argv.js:112:10)
    at yargs.parse (dir\node_modules\webpack\bin\webpack.js:171:41)
    at Object.Yargs.self.parse (dir\node_modules\webpack\node_modules\yargs\yargs.js:533:18)
    at Object.<anonymous> (dir\node_modules\webpack\bin\webpack.js:152:7)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)

my webpack.config.js file:

const fs = require("fs");
const path = require("path");

// build an object that looks like 
// {
//      "filename": "./filename.vue"
// }
// to list the entry points for webpack to compile.
function buildEntry() {
    const reducer = function(entry, file) { entry[file.split(".").shift()] = './Vue/' + file; return entry; };

return fs.readdirSync(path.join(__dirname, "Vue"))
    .filter(function(file) {file.endsWith(".vue")})
    .reduce(reducer, {});
}

module.exports = {
    entry: buildEntry(),
    output: {
        path: path.join(__dirname, "Vue"),
        filename: "[name].js",
        library: "[name]"
    },
    module: {
        loaders: [
            { test: /\.vue$/, loader: 'vue-loader' },
        ]
    }
}

I just changed ES6 code with ES5, I also followed some existing SO answers regarding the issue but none of those are applicable, I guess I am missing something obvious here.

Bert · Accepted Answer · 2017-11-07 14:47:08Z

1

When the reducer was converted to ES5, a bug was introduced.

return fs.readdirSync(path.join(__dirname, "Vue"))
.filter(function(file) {file.endsWith(".vue")})
.reduce(reducer, {})

Specifically,

function(file) {file.endsWith(".vue")}

should be

function(file) { return file.endsWith(".vue") }

answered Nov 7, 2017 at 14:47

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

webpack error: output.filename is required, in my ASP.net + Vue app

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related