webpack code splitting - creates an extra bunlde: 0.bundle.js

Question

I have the following webpack config:

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        source1: './frontend/source1.js',
        source2: './frontend/source2.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'static/bundles')
    },
    plugins: [
        new CleanWebpackPlugin(['static/bundles'])
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader', //  для .vue-файлов
                options: {
                    loaders: {
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    resolve: {
        alias: {
            vue$: 'vue/dist/vue.esm.js'
        }
    }
};

and when I run webpack I expect it to produce two files: source1.bundle.js and source2.bundle.js.

But it also produces a mysterious 0.bundle.js and puts it in the same directory as the other files.

Then when I open the browser I get an error:

because my bundles are being loaded from a separate absolute /static/bundles/ directory, and this 0.bundle.js is trying to get loaded from the current page instead of /static/bundles/. What is this file, and how do I specify a load path for it?

Jada

have you got a solution for this? i am facing the same issue – Kenneth

Answer 1

I believe you'll want to add a publicPath to the webpack config. Just wherever you're actually reading them from. output: { filename: 'bundle.js', path: path.resolve(__dirname, 'public/dist'), publicPath: './dist/' },

Cannabis