laravel-mix: [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?

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 16
Comments: 36 (2 by maintainers)

Most upvoted comments

This worked for me:

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

silvioiannone on Jul 19, 2017

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!

georgecoca on Sep 22, 2017

I can confirm this in 1.4.2

santigarcor on Jul 26, 2017

Well, I’m confused. Went back and forth a few times but this does seem to be working, and updating the publicPath correctly where it uses this directory as the base URL when looking for chunks.

.webpackConfig({
        output: {
            publicPath: '/wp-content/themes/theme-name/',
            chunkFilename: 'assets/dist/[name].[chunkhash].js',
        },
    })

jon-heller on Jun 30, 2017