Laravel-mix: Separate chunk files

[tcdsantos]

• Laravel Mix Version: 4.0.14
• Node Version: 11.2.0
• NPM Version: 6.6.0
• OS: OS X 10.13.6

Description:

I am new to Laravel Mix and Webpack... and I want to separate chunks from the other JS files.

I want my chunk files in the /public/js/chunks directory.
Other files (manifest.js, app.js and vendor.js) i want them in the /public/js directory.
Compiled CSS files should stay in /public/css.

My code was working well with webpack 3.11.0 with laravel mix 3.0.0 but after upgrading to latest versions i can't figure out how to put it working again. I have tried almost everything and read tons of posts and documents before asking for help.

Steps To Reproduce:

webpack.mix.js

    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .extract([
        'vue',
        'vue-i18n',
        'vue-router',
        'vue-radial-progress',
        'vuex',
        'jquery',
        'jquery-ui',
        'jquery-ui-touch-punch',
        'popper.js'
    ]);

let config = {
    output: {
        publicPath: '/',
        //chunkFilename: 'js/chunks/[name].[chunkhash].js',     // production
        chunkFilename: 'js/chunks/[name].js',                   // development
    },
};

if (mix.config.inProduction) {
    // Overwrite naming structure for production
    config.output.chunkFilename = 'js/chunks/[name].[chunkhash].js';     // production

} else {
    // Enable sourcemaps
    mix.webpackConfig({ devtool: 'source-map' }).sourceMaps();
}

mix.webpackConfig(config);

The results with this approach are:

• manifest.js is correctly located in /public/js;
• all chunk files are correctly located in /public/js/chunks;
• app.js and vendor.js are both incorrectly located: they appear in /public/js/chunks/js folder and they should be next to manifest.js in the /public/js;

When i build using npm run watch (i have the --display-entrypoints option enabled) i also get this:
Entrypoint /js/app = /js/manifest.js /css/app.css /js/manifest.js.map /css/app.css.map js/chunks//js/vendor.js js/chunks//js/vendor.js.map js/chunks//js/app.js /css/app.css js/chunks//js/app.js.map /css/app.css.map

app.js and vendor.js files appear with a double slash in their path. I don't know why is it happening... will it affect the import of these files in my blade template?

Blade Template:

<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/app.js') }}"></script>

Can someone help me please?

Thank you very much!!

[ankurk91]

Laravel mix is using webpack 4, and vendor.js is a chunk file itself in webpaack 4.

Personally I don't care where those chunk are being stored.
I am ok, as long as they are in js folder and being downloaded by browser.

[tcdsantos]

Thank you!
Maybe I will have to ignore it too but it is strange for me having my app and vendor files living in the crowd, with all other chunk files.

Just to confirm, importing them in my Blades maintains the same way?

Thank you again!!

[sirRen]

I want to go direct, too

[tcdsantos]

Laravel mix is using webpack 4, and vendor.js is a chunk file itself in webpaack 4.

Personally I don't care where those chunk are being stored.
I am ok, as long as they are in js folder and being downloaded by browser.

Thank you @ankurk91!

So, to achieve that and configure it to put all JS together into my public/js folder i removed the "output" with its "publicPath" and "chunkFilename" specification from my webpack config and just let mix.js('resources/js/app.js', 'public/js') do its job.

However, now, laravel mix / webpack are putting all chunk files in my public folder.
app.js, manifest.js and vendor.js are ok, located in the correct public/js folder but all 30 chunk files are in public folder.

To workaround this issue, i tryed to add this line to change the public folder:

mix.setPublicPath('public/js')

but, of course, now i have problems with my CSS compiled files: they were putted in public/js/public/css directory.

I am really lost with these path's configuration. I am struggling with it for two days...

Could you help me with this configuration to put all JS files into public/js and all CSS files into public/css?

This is what i have right now:

    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')

Thank you!

[ankurk91]

You can use mix.dump() method to dump the webpack config to terminal.
https://github.com/JeffreyWay/laravel-mix/blob/master/setup/webpack.mix.js#L42

This way you will get to know the chunkfilename set by Laravel Mix

https://github.com/JeffreyWay/laravel-mix/blob/cc816bb799cdd9b3900aaa60cf416b51b223e5ba/src/builder/WebpackConfig.js#L64

[ankurk91]

also see
https://github.com/JeffreyWay/laravel-mix/issues/1889

[tcdsantos]

also see

1889

Thank you @ankurk91.

It seems this is a known issue and there is no fix for it ?!
I am really considering downgrade to webpack 3 with laravel mix 3 and move on...

[ankurk91]

This is most likely webpack issue.
Laravel Mix is trying satisfying all of our needs but it can't.

[tcdsantos]

I will downgrade and wait until webpack 5 (that seems to be at 28% of its development stage).

Thank you again @ankurk91 !!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.