Why webpack still generates to old directory bundle files?

Question

I have a simple app using webpack to compile my js that has one entry point as ./src/app.js and output as ./public/dist/app.bundle.js.

Previously the output directory was ./dist/app.bundle.js

On webpack --watch mode any time I make some modification to src code it generates to old path ./dist/app.bundle.js that file as well as to new directory?? Please tell what is wrong

webpack.config.js

var path = require("path");

module.exports = {
    entry: path.resolve(__dirname, "./src/app.js"),

    output: {
        path: path.resolve(__dirname),
        filename: "./public/dist/app.bundle.js",
        publicPath: "/public/",
    }
};

npm -v 3.10.10

node -v v6.10.2

webpack: 3.10.0

Answer 1

var path = require("path");

module.exports = {
    entry: path.resolve(__dirname, "./src/app.js"),

    output: {
        path: path.resolve(__dirname, "public/dist"),
        filename: "app.bundle.js",
        publicPath: "dist",
    }
};

output.filename
Specifies the name of each output file on disk. You must not specify an absolute path here! The output.path option determines the location on disk the files are written. filename is used solely for naming the individual files.

output.path
The output directory as an absolute path (required).

output.publicPath
The publicPath specifies the public URL address of the output files when referenced in a browser. For loaders that embed <script> or <link> tags or reference assets like images, publicPath is used as the href or url() to the file when it's different than their location on disk (as specified by path). This can be helpful when you want to host some or all output files on a different domain or on a CDN. The Webpack Dev Server also uses this to determine the path where the output files are expected to be served from.

Refer to docs here

Answer 2

Adjust the output config in your webpack.config as shown below.

var path = require("path");

module.exports = {
    entry: path.resolve(__dirname, "./src/app.js"),

    output: {
        path: path.resolve(__dirname, "public/dist"),
        filename: "[name].bundle.js",
        publicPath: "/public/",
    }
};

Refer: Webpack Output

Answer 3

Please try clean-webpack-plugin - It is a webpack plugin to remove/clean your build folder(s)

To use it, follow these steps:

1. Install clean-webpack-plugin

npm install --save-dev clean-webpack-plugin

2. Adjust your code

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
var path = require("path");

module.exports = {
    entry: path.resolve(__dirname, "./src/app.js"),
    plugins: [
        new CleanWebpackPlugin(),
    ],
    output: {
        path: path.resolve(__dirname),
        filename: "./public/dist/app.bundle.js",
        publicPath: "/public/",
    },

}