Webpack chunk name

[golubkovden]

• Laravel Mix Version: 4.0.16
• Node Version: v12.4.0
• NPM Version: 6.9.0

Description:

Finally we got dynamic imports in laravel-mix 🎉 🎉 🎉. But default mix config compiles our js into public/js and chunks into public. For example:

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

// routes.js
export default [
    {
        path: '/',
        component: () => import('./Home'),
    },
    {
        path: '/login',
        component: () => import('./Login'),
    },
];

Result of npm run production:

public/js/app.js
public/3.js
public/4.js

When i change chunkFilename i will get strange result.

// webpack.mix.js
mix
    .webpackConfig({
        output: {
            chunkFilename: 'js/[name].js',
        },
    })
    .js('resources/js/app.js', 'public/js');

The result of npm run production:

public/js/js/app.js
public/js/3.js
public/js/4.js

Problem

So can someone give any instructions how to move chunks in js directory without moving base compiled files?

[masterjus]

Have the same problem

[socheatsok78]

@golubkovden have you try adding path: __dirname + '/public', to the output?

[socheatsok78]

I'm still having issue with mix.extract() when using with dynamic import. The css output content is empty.

[vpillinger]

I'm still having issue with mix.extract() when using with dynamic import. The css output content is empty.

I am having the same issue.

[furey]

Hi @golubkovden,

Have you tried adding a webpackChunkName magic comment to each dynamic import, like so?

// routes.js
export default [
    {
        path: '/',
        component: () => import(/* webpackChunkName: "js/home" */'./Home'),
    },
    {
        path: '/login',
        component: () => import(/* webpackChunkName: "js/login" */'./Login'),
    },
];

[golubkovden]

@furey Yeah, it's working. But it'll be annoying to fix all of this comments when setting in mix.webpackConfig will work)

[rakk7]

Its a known issue with webpack 4, which laravel-mix is using.

Use this plugin in order to change the chunks paths, which worked for me great. https://github.com/MhMadHamster/webpack-chunk-rename-plugin

So, in your case is something like this:

    plugins: [
      new ChunkRenamePlugin({
        initialChunksWithEntry: true,
        '/app': 'js/app.js',
      }),
    ],

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mdnurulmomen]

Hello, i'm facing with same problem. npm run dev or npm run watch emitting 0.js, 1.js, rather than [named].js.

Even though, its working with default numbered chunks, but i want it to be named chunks.

// webpack.mix.js `mix.webpackConfig(webpack => { return { output: { publicPath: '/', filename: '[name].js', chunkFilename: 'js/[name].js', }, }; });

mix.babelConfig({ plugins: ['@babel/plugin-syntax-dynamic-import'], });

mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css');`

// app.js const router = new VueRouter({ mode : 'history', routes : [ { path: '/home', name: 'admin.home', component: () => import(/ webpackChunkName : "home-component" / './components/admin/HomeComponent.vue') }, { path: '/restaurants', name: 'admin.restaurants.index', component: () => import(/ webpackChunkName : "restaurant-list" /'./components/admin/RestaurantIndexComponent.vue') }, ], });

[RafaelKr]

@socheatsok78 @vpillinger The empty css bug is finally fixed with laravel-mix v6 for me! https://github.com/JeffreyWay/laravel-mix/blob/master/CHANGELOG.md#changed