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?

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

回答2:

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