Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Understanding webpack.config.js

Fuad Muhammad
Fuad Muhammad
4,273 Points
Posted by Fuad Muhammad
Fuad Muhammad
4,273 Points

'Path' cannot work on the webpack latest version.

On the latest version 2.3.2, I can't use 'path' on the output in this file. Every I try to input the path into the webpack.config.js, Error always be found when I type npm run dev on my terminal.

What I type:

module.exports = {
    // entry..
    output: {
        path: 'dist',
        filename: 'app.bundle.js'
    }
}

this error: 

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - 
configuration.output.path: The provided value "dist" is not an absolute path!

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v6.9.4
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! test-webpack@1.0.0 dev: `webpack -d --watch`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the test-webpack@1.0.0 dev script 'webpack -d --watch'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the test-webpack package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack -d --watch
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs test-webpack
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls test-webpack
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/fuaditrockz/Desktop/test-webpack/npm-debug.log

To solve this problem, I must to direct into the filename, and I type this: 

module.exports = {
    // entry..
    output: {
        filename: './dist/app.bundle.js'
    }
}

And it's works.

Webpack is watching the files…

Hash: d95dad8fea9b4f01706c
Version: webpack 2.3.2
Time: 3561ms
               Asset       Size  Chunks             Chunk Names
./dist/app.bundle.js    9.27 kB       0  [emitted]  main
          index.html  244 bytes          [emitted]  
   [0] ./src/app.scss 5.16 kB {0} [built] [failed] [1 error]
   [1] ./src/app.js 186 bytes {0} [built]
   [2] ./~/base64-js/index.js 3.48 kB [built]
   [3] ./~/buffer/index.js 48.6 kB [built]
   [4] ./~/css-loader!./~/sass-loader/lib/loader.js!./src/app.scss 296 bytes [built]
   [5] ./~/css-loader/lib/css-base.js 2.19 kB [built]
   [6] ./~/ieee754/index.js 2.05 kB [built]
   [7] ./~/isarray/index.js 132 bytes [built]
   [8] ./~/style-loader/addStyles.js 8.51 kB [built]
   [9] ./~/style-loader/fixUrls.js 3.01 kB [built]
  [10] (webpack)/buildin/global.js 509 bytes [built]

Child html-webpack-plugin for "index.html":
       [0] ./~/lodash/lodash.js 540 kB {0} [built]
       [1] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 599 bytes {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
Child extract-text-webpack-plugin:
       [0] ./~/css-loader!./~/sass-loader/lib/loader.js!./src/app.scss 296 bytes {0} [built]
       [1] ./~/style-loader/addStyles.js 8.51 kB {0} [built]
       [2] ./~/base64-js/index.js 3.48 kB {0} [built]
       [3] ./~/buffer/index.js 48.6 kB {0} [built]
       [4] ./~/css-loader/lib/css-base.js 2.19 kB {0} [built]
       [5] ./~/ieee754/index.js 2.05 kB {0} [built]
       [6] ./~/isarray/index.js 132 bytes {0} [built]
       [7] ./~/style-loader/fixUrls.js 3.01 kB {0} [built]
       [8] ./~/style-loader!./~/css-loader!./~/sass-loader/lib/loader.js!./src/app.scss 1.02 kB {0} [built]
       [9] (webpack)/buildin/global.js 509 bytes {0} [built]

I'm not make sense why is this, I just try and try by random to get solve this problem. Anyone can explain me about this problems? Thank you.

3 Answers

Ali Raza
Ali Raza
13,633 Points
Ali Raza
Ali Raza
13,633 Points

Hello Fuad,

so Webpack still accepts "path" option however you do need to include node's path module in order to make it work properly. Checkout webpack output docs for more info. I am also including a snippet of javascript to solve your problem

var path = require('path')

var webpackConfig = {

output: {
filename: 'your filename.js',
path: path.resolve(__dirname + 'name of your directory') // include the name of 
//your directory for outputting webpack  bundle
}
}
Sarah Fowler
Sarah Fowler
18,191 Points
Sarah Fowler
Sarah Fowler
18,191 Points

I fixed it by using path: __dirname + "dist" to make it an absolute path, but that seems a little gross.

D P
D P
3,503 Points
D P
D P
3,503 Points

I just changed 'build' to '/build' and it worked for me.