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