vue application does not update when using webpack chunks

Question

I have a mysterious behaviour here using webpack in a vue-application.

I have some view-paths stored in my database and I import the views in a for-loop dynamically like

for(let i = 0; i < routesList.length; i++) {
    const viewPath = routesList[i];
    const view = () => import('views/' + viewPath);

    /* create a vue router object here */
}

This works absolutely fine but as soon as I am using WebpackChunkName all the future changes in my vue-files does not get compiled. The application seems to use some sort of cached files. Although npm watch recognizes the changes and recompiles correctly.

const view = () => import(/* webpackChunkName: "views" */ 'views/' + viewPath);

Another strange thing to notice is that the chunk gets named like

views0
views2
views4
etc.

The application runs on a Debian 8 distribution. These are the output-settings of my webpack.mix.js file

output: {
    path: path.resolve(__dirname, 'demo'),
    publicPath: '/demo/', // due to shared hosting
    filename: `[name].${mix.inProduction() ? '[chunkhash].' : ''}js`,
    chunkFilename: `[name].${mix.inProduction() ? '[chunkhash].' : ''}js`
}

Has anybody faced something similar? Really I am clueless about what is wrong... I even tried to delete the compiled chunks and mix-manifest.json in the output folder and recompiled it over and over again. But this does not change the situation.

9/27 - Regarding the related issues on github there could be a problem with my paths in the webpack config file?
9/28 - Looks like this happens irregular. Updating my npm packages yesterday caused this to work for a moment. Today I'm stuck at the same again.

vue application does not update when using webpack chunks

0 Answers0