CODEWITHSUNDEEP
javascriptwebpack
user8826104
user8826104

Reputation:

Webpack 4 - Output is not creating bundle.js in the correct place

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",
},

Upvotes: 0

Views: 2432

Answers (1)

ChrisR
ChrisR

Reputation: 4008

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'
    },
};

Upvotes: 2

Related Questions