0

I recently upgraded from Webpack 3 to 4.

Here is my webpack.dev.js file:

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'public/bundle.js'
    },

Expected Behaviour

It should be creating my bundle.js in the public folder.

Actual Behaviour

It's creating a main.js file in a folder called dist

Conclusion

For some reason the output is no longer working as it should.

Question

How should I be generating the filename?

Here is the script I run:

"scripts": {
    "watch": "./node_modules/.bin/webpack --mode development --watch --progress",
},

1 Answers1

2

Per the doc:

Out of the box webpack won't require you a configuration file, it will assume the entry point of your project is src/index and will output the result in dist/main.js minified and optimized for production.

Usually your projects will need to extend this functionality, for this you can create a webpack.config.js file in the root folder and webpack will automatically use it.

So, your file is named webpack.dev.js so it is not automatically picked up by webpack. You need to specify it in your watch script.

"scripts": {
  "watch": "./node_modules/.bin/webpack --mode development --watch --progress --config webpack.dev.js",
},

You can simplify your watch script by altering your configs like this:

// package.json
"scripts": {
  "watch": "webpack --progress --config webpack.dev.js",
},

// webpack.dev.js
const path = require('path');
module.exports = {
    watch: true,
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
};
ChrisR
  • 3,922
  • 1
  • 14
  • 24
  • Thanks, this does work to an extent, it now outputs to `dist/public/bundle.js`. –  May 31 '18 at 13:55
  • I edited my answer, by specifying the `path` parameter. try now. – ChrisR May 31 '18 at 13:56
  • Could you modify the answer to be `path: __dirname + 'public',` as without that it throws an error. See issue: https://stackoverflow.com/questions/42940050/ –  May 31 '18 at 14:11
  • 1
    Indeed, in the hurry I forgot that part. Edited to have the more resilient possibility. – ChrisR May 31 '18 at 14:16