webpack output filename not configured

[gregoryforel]

Hi,

I could not get Webpack to output bundle.js in the Developing with webpart chapter.

I tried twice, even restarting everything else from scratch and copy pasting the code from your book to make sure I had no typo but still the same issue.

I'm using Windows 10, in case it has anything related with the require('path') function..

Thanks

[bebraw]

Hi,

Can you push your repo to GitHub and link to it? I can have a closer look.

It could be something path related, yeah.

[bebraw]

Also, make sure you are running on fresh Node (5 at least).

[gregoryforel]

I have node 5.10

Here's my repository: https://github.com/gregoryforel/kanban-app

Thanks a lot!

[bebraw]

I had to get rid of the node_modules directory of the project and do npm i and npm i webpack -D to get the webpack dependency to the project. After that I ran webpack like this:

gregory [master] $ node_modules/.bin/webpack
Hash: adfb17617c7c8e21ac3a
Version: webpack 1.13.1
Time: 141ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.68 kB       0  [emitted]  app
   [0] ./app/index.js 80 bytes {0} [built]
   [1] ./app/component.js 133 bytes {0} [built]

So looks good to me on OS X. Can you paste your output (commands too)?

[gregoryforel]

I tried to do the same as you did exactly. Deleted node_modules directory, npm i, etc.

Microsoft Windows Version 10.0.10586 2015 Microsoft Corporation. All rights reserved.

C:\Users\v-grfore>f:

F:>cd kanban-app

F:\kanban-app>npm i kanban-app@1.0.0 F:\kanban-app -- html-webpack-plugin@2.17.0 +-- bluebird@3.4.0 +-- html-minifier@2.1.3 | +-- change-case@2.3.1 | | +-- camel-case@1.2.2 | | +-- constant-case@1.1.2 | | +-- dot-case@1.1.2 | | +-- is-lower-case@1.1.3 | | +-- is-upper-case@1.1.2 | | +-- lower-case@1.1.3 | | +-- lower-case-first@1.0.2 | | +-- param-case@1.1.2 | | +-- pascal-case@1.1.2 | | +-- path-case@1.1.2 | | +-- sentence-case@1.1.3 | | +-- snake-case@1.1.2 | | +-- swap-case@1.1.2 | | +-- title-case@1.1.2 | | +-- upper-case@1.1.3 | |-- upper-case-first@1.1.2 | +-- clean-css@3.4.13 | | +-- commander@2.8.1 | | -- source-map@0.4.4 | |-- amdefine@1.0.0 | +-- commander@2.9.0 | | -- graceful-readlink@1.0.1 | +-- he@1.1.0 | +-- ncname@1.0.0 | |-- xml-char-classes@1.0.0 | +-- relateurl@0.2.6 | -- uglify-js@2.6.2 | +-- async@0.2.10 | +-- source-map@0.5.6 | +-- uglify-to-browserify@1.0.2 |-- yargs@3.10.0 | +-- camelcase@1.2.1 | +-- cliui@2.1.0 | | +-- center-align@0.1.3 | | | +-- align-text@0.1.4 | | | | +-- kind-of@3.0.3 | | | | | -- is-buffer@1.1.3 | | | | +-- longest@1.0.1 | | | |-- repeat-string@1.5.4 | | | -- lazy-cache@1.0.4 | | +-- right-align@0.1.3 | |-- wordwrap@0.0.2 | +-- decamelize@1.2.0 | -- window-size@0.1.0 +-- loader-utils@0.2.15 | +-- big.js@3.1.3 | +-- emojis-list@2.0.1 | +-- json5@0.5.0 |-- object-assign@4.1.0 +-- lodash@4.13.1 +-- pretty-error@2.0.0 | +-- renderkid@2.0.0 | | +-- css-select@1.2.0 | | | +-- boolbase@1.0.0 | | | +-- css-what@2.1.0 | | | +-- domutils@1.5.1 | | | | -- dom-serializer@0.1.0 | | | | +-- domelementtype@1.1.3 | | | |-- entities@1.1.1 | | | -- nth-check@1.0.1 | | +-- dom-converter@0.1.4 | | |-- utila@0.3.3 | | +-- htmlparser2@3.3.0 | | | +-- domelementtype@1.3.0 | | | +-- domhandler@2.1.0 | | | +-- domutils@1.1.6 | | | -- readable-stream@1.0.34 | | | +-- core-util-is@1.0.2 | | | +-- inherits@2.0.1 | | | +-- isarray@0.0.1 | | |-- string_decoder@0.10.31 | | +-- strip-ansi@3.0.1 | | | -- ansi-regex@2.0.0 | |-- utila@0.3.3 | -- utila@0.4.0 -- toposort@0.2.12

npm WARN kanban-app@1.0.0 No description

F:\kanban-app>npm i webpack -D kanban-app@1.0.0 F:\kanban-app -- webpack@1.13.1 +-- acorn@3.1.0 +-- async@1.5.2 +-- clone@1.0.2 +-- enhanced-resolve@0.9.1 | +-- graceful-fs@4.1.4 |-- memory-fs@0.2.0 +-- interpret@0.6.6 +-- memory-fs@0.3.0 | +-- errno@0.1.4 | | -- prr@0.0.0 |-- readable-stream@2.1.4 | +-- buffer-shims@1.0.0 | +-- isarray@1.0.0 | +-- process-nextick-args@1.0.7 | -- util-deprecate@1.0.2 +-- mkdirp@0.5.1 |-- minimist@0.0.8 +-- node-libs-browser@0.5.3 | +-- assert@1.4.0 | +-- browserify-zlib@0.1.4 | | -- pako@0.2.8 | +-- buffer@3.6.0 | | +-- base64-js@0.0.8 | | +-- ieee754@1.1.6 | |-- isarray@1.0.0 | +-- console-browserify@1.1.0 | | -- date-now@0.1.4 | +-- constants-browserify@0.0.1 | +-- crypto-browserify@3.2.8 | | +-- pbkdf2-compat@2.0.1 | | +-- ripemd160@0.2.0 | |-- sha.js@2.2.6 | +-- domain-browser@1.1.7 | +-- events@1.1.0 | +-- http-browserify@1.7.0 | | -- Base64@0.2.1 | +-- https-browserify@0.0.0 | +-- os-browserify@0.1.2 | +-- path-browserify@0.0.0 | +-- process@0.11.3 | +-- punycode@1.4.1 | +-- querystring-es3@0.2.1 | +-- readable-stream@1.1.14 | +-- stream-browserify@1.0.0 | +-- timers-browserify@1.4.2 | +-- tty-browserify@0.0.0 | +-- url@0.10.3 | | +-- punycode@1.3.2 | |-- querystring@0.2.0 | +-- util@0.10.3 | -- vm-browserify@0.0.4 |-- indexof@0.0.1 +-- optimist@0.6.1 +-- supports-color@3.1.2 | -- has-flag@1.0.0 +-- tapable@0.1.10 +-- watchpack@0.2.9 | +-- async@0.9.2 |-- chokidar@1.5.1 | +-- anymatch@1.3.0 | | +-- arrify@1.0.1 | | -- micromatch@2.3.8 | | +-- arr-diff@2.0.0 | | |-- arr-flatten@1.0.1 | | +-- array-unique@0.2.1 | | +-- braces@1.8.5 | | | +-- expand-range@1.8.2 | | | | -- fill-range@2.2.3 | | | | +-- is-number@2.1.0 | | | | +-- isobject@2.1.0 | | | | |-- isarray@1.0.0 | | | | -- randomatic@1.1.5 | | | +-- preserve@0.2.0 | | |-- repeat-element@1.1.2 | | +-- expand-brackets@0.1.5 | | | -- is-posix-bracket@0.1.1 | | +-- extglob@0.3.2 | | +-- filename-regex@2.0.0 | | +-- normalize-path@2.0.1 | | +-- object.omit@2.0.0 | | | +-- for-own@0.1.4 | | | |-- for-in@0.1.5 | | | -- is-extendable@0.1.1 | | +-- parse-glob@3.0.4 | | | +-- glob-base@0.3.0 | | |-- is-dotfile@1.0.2 | | -- regex-cache@0.4.3 | | +-- is-equal-shallow@0.1.3 | |-- is-primitive@2.0.0 | +-- async-each@1.0.0 | +-- glob-parent@2.0.0 | +-- is-binary-path@1.0.1 | | -- binary-extensions@1.4.0 | +-- is-glob@2.0.1 | |-- is-extglob@1.0.0 | +-- path-is-absolute@1.0.0 | -- readdirp@2.0.0 | +-- minimatch@2.0.10 | |-- brace-expansion@1.1.4 | | +-- balanced-match@0.4.1 | | -- concat-map@0.0.1 |-- readable-stream@2.1.4 | -- isarray@1.0.0 -- webpack-core@0.6.8 `-- source-list-map@0.1.6

npm WARN optional Skipping failed optional dependency /chokidar/fsevents: npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.12 npm WARN kanban-app@1.0.0 No description

F:\kanban-app>cd node_modules

F:\kanban-app\node_modules>cd .bin

F:\kanban-app\node_modules.bin>webpack webpack 1.13.1 Usage: https://webpack.github.io/docs/cli.html

Options: --help, -h, -? --config --context --entry --module-bind --module-bind-post --module-bind-pre --output-path --output-file --output-chunk-file --output-named-chunk-file --output-source-map-file --output-public-path --output-jsonp-function --output-pathinfo --output-library --output-library-target --records-input-path --records-output-path --records-path --define --target --cache [default: true] --watch, -w --watch which closes when stdin ends --watch-aggregate-timeout --watch-poll --hot --debug --devtool --progress --resolve-alias --resolve-loader-alias --optimize-max-chunks --optimize-min-chunk-size --optimize-minimize --optimize-occurence-order --optimize-dedupe --prefetch --provide --labeled-modules --plugin --bail --profile -d shortcut for --debug --devtool sourcemap --output-pathinfo -p shortcut for --optimize-minimize --json, -j --colors, -c --sort-modules-by --sort-chunks-by --sort-assets-by --hide-modules --display-exclude --display-modules --display-chunks --display-error-details --display-origins --display-cached --display-cached-assets --display-reasons, --verbose, -v

Output filename not configured.

F:\kanban-app\node_modules.bin>

[bebraw]

I can see the issue now. You have to execute webpack from the root directory (kanban-app). So you would probably have to do something like node_modules\.bin\webpack at kanban-app. Otherwise it won't pick up the configuration.

[gregoryforel]

Man... thank you very much, that was it! Is there a way to simply type webpack when I'm at the root, instead of node_modules\.bin\webpack?

[bebraw]

@gregoryforel It's probably cleanest to set up a npm script like we do in the book later in the chapter. After that you end up with npm start and npm run build kind of commands.

It would be possible to install webpack globally but that tends to cause just more issues as you lose control over the exact version used. You could also try to tweak the env temporarily but that again would probably hurt more than help. Go through npm to keep it simple. 👍