Laravel-mix Webpack Public Path

Question

So I am using Laravel-Mix and have set up code splitting in Webpack. I am using a dynamic import for my Vue components like this.

Vue.component('UserMenu', () => import('./components/UserMenu.vue'));

Since I am also using Babel, I have the syntax-dynamic-import plugin loading from my .babelrc file in the project root.

This is all working fine, and Webpack is properly splitting the code on build. However, the problem is, it is putting the chunks in the public root rather than in public/js

If in my webpack.mix.js I do...

mix.js('resources/assets/js/app.js', 'public/js');

...then the mix properly places the built file in the /js directory.

But in order to chunk the files, if in webpack.mix.js I do...

 mix.webpackConfig({
    entry: {
        app: './resources/assets/js/app.js',
    },
    output: {
        filename: '[name].js',
        publicPath: 'public/js',
    }
});

...all the chunks get put in the public root no matter what I assign to the publicPath property.

Any idea what am I missing here?

Solution 1

just change the chunk path in webpack.mix.js under your laravel root folder,

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

also note that the laravel way of changing main js location is using mix.js function

mix.js('resources/assets/js/app.js', 'public/js/main')

Solution 2

Try to set public path using mix.setPublicPath('public/build') method.

Comments

[skribe]

This seems to change something but I can't seem to see where the built files are put? Is public here relative to the project root because the files are not getting put in public/js when I set it that way. Also the mix manifest file is not updated when using this method.

[skribe]

Ok this does seem to work, but only with when defining the resource in the manner mix.js('resources/assets/js/app.js') As far as I can tell it does not work when using the .webpackConfig() method

[skribe]

This works! But I had to use both filename: 'js/[name].js' and chunkFilename: 'js/chunks/[name].js so that both the main app.js and the chunks are nested under the js directory. If you update your answer to reflect that I will accept it. :)

[Serak Shiferaw]

the problem of putting all the chunk file under public/js is not a good idea, when your application grows. your main file's like app.js would be lost in the crowd. but if you prefer that way you can just do output: { chunkFilename: 'js/[name].js', } read more here https://webpack.js.org/configuration/output/

[skribe]

No you miss-understand what I was commenting on. Putting the chunk files in their own directory is fine. But since I am defining the entry for some of my "main" js files like app: './resources/assets/js/app.js' without also defining filename: '[name].js' the main app files end up in the public root

[Ben]

Is it possible to do this only for prod builds (e.g. using a cdn for prod, but local dir for local envs)