[1.*] Webpack code splitting - wrong directory

• Laravel Mix Version: 1.0.6
• Node Version: 8.1.0
• NPM Version: 5.0.3
• Yarn Version: 0.21.3
• OS: Windows 10

Description:

With Laravel Mix 0.* modules created with webpack code splitting were automatically put in the public/js directory. Now, with Mix 1.* it puts all the chunks in the public directory(unless for each chunk I specify its name with js/ prefix).

Steps To Reproduce:

• $ laravel new foo --dev
• Update Mix version (0.* to 1.*) in package.json
• $ yarn
• $ yarn add babel-preset-es2015 babel-preset-stage-2 (not sure here which one gives the ability to import dynamically)
• Create .babelrc file:

{
  "presets": ["es2015", "stage-2"]
}

• In app.js split the Example component to a separate chunk

// Replace this
Vue.component('example', require('./components/Example.vue'));
// With this
Vue.component('example', () => import('./components/Example.vue'));

• $ yarn run development

The 0.js file should appear in public directory.

Possible fix:

In webpack.mix.js add

mix.webpackConfig({
    output: {
        chunkFilename: 'js/[name].[chunkhash].js',
    },
});

Is there a better way to fix this?

[silvioiannone]

This worked for me:

mix.webpackConfig({
    output: {
        chunkFilename: 'js/[name].js',
    }
});

[georgecoca]

Ok, I got it working. I needed to specify where I have the public files in webpack configuration, by adding publicPath. Now it seems it loads the chunks correctly from /build/chunks/ on production site:

let mix = require('laravel-mix');

if (mix.inProduction()) {
    mix.setPublicPath('public/build');
}

mix.webpackConfig({
    output: {
         chunkFilename: mix.inProduction() ? 'chunks/[name].[chunkhash].js' : 'chunks/[name].js',
         publicPath: mix.inProduction() ? '/build/' : '/'
    }
}

Thanks @KKSzymanowski for your time and input, I really appreciate!