CODEWITHSUNDEEP
laravelwebpackvue.jsvuejs2laravel-mix
skribe
skribe

Reputation: 3615

Laravel-mix Webpack Public Path

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?

Upvotes: 5

Views: 21136

Answers (2)

Serak Shiferaw
Serak Shiferaw

Reputation: 1021

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')

Upvotes: 5

IvanBernatovic
IvanBernatovic

Reputation: 297

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

Upvotes: 6

Related Questions