Laravel-mix 6 dynamic import

Viewed 411

Please help me figure out why dynamic import does not work. Everything is collected into a single js file.

  • "laravel-mix": "^6.0.39"
  • "@babel/plugin-syntax-dynamic-import": "^7.8.3
let chunkName = mix.inProduction() ? 'js/chunks/[name].[chunkhash].js' : 'js/chunks/[name].js?id=[chunkhash]';

      mix.js('resources/js/app.js', 'public/js')
            .vue()
            .sass('resources/sass/app.scss', 'public/css')
            .webpackConfig({
                output: {
                    chunkFilename: chunkName,
                    publicPath: '/',
                }
            })
            .babelConfig({
                plugins: ['@babel/plugin-syntax-dynamic-import'],
            })
            .extract(['vue', 'lodash', 'axios', 'vue-router', 'vuex', 'bootstrap-vue', 'luxon'])
            .options({
                watchOptions: {
                    ignored: /node_modules/
                },
            })
            .version(); 

In routes

function route(path, view, name, middleware) {
    if(!middleware) {
        middleware = ['auth'];
    }
    return {
        name: name || view,
        path: path,
        meta: {
            middleware: middleware,
        },
        component: () => import(/* webpackChunkName: "[request]" */`../pages/${view}`)
    }
}

But the output is always only 3 files

app.js
vendor.js
manifest.js
0 Answers
Related