Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hi,
I have this setup:
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.styles(['resources/css/responsive.css'], 'public/css/responsive.css')
.styles(['resources/css/custom.css'], 'public/css/custom.css');
mix.webpackConfig({
output: {
filename:'js/main/[name].js',
chunkFilename: 'js/chunks/[name].js',
},
})
mix.version();
In my app.js I have my components as:
Vue.component('signup-component', () => import(/* webpackChunkName: "SignupComponent" */ './components/SignupComponent.vue'));
Vue.component('login-component', () => import(/* webpackChunkName: "LoginComponent" */ './components/LoginComponent.vue'));
And many more......
Upon running both commands:
npm run dev or npm run prod
This is the output:
DONE Compiled successfully in 11913ms 12:15:02 AM
Asset Size Chunks Chunk Names
/css/app.css 145 KiB 0 [emitted] /js/app
/js/app.js 1.01 MiB 0 [emitted] [big] /js/app
/js/app.js.LICENSE.txt 2.7 KiB [emitted]
1.js 65.9 KiB 1 [emitted]
10.js 15.7 KiB 10 [emitted]
11.js 15.1 KiB 11 [emitted]
12.js 15.4 KiB 12 [emitted]
13.js 14.4 KiB 13 [emitted]
14.js 14.8 KiB 14 [emitted]
15.js 15.8 KiB 15 [emitted]
16.js 16.3 KiB 16 [emitted]
17.js 14.6 KiB 17 [emitted]
18.js 15 KiB 18 [emitted]
19.js 15.2 KiB 19 [emitted]
2.js 67.9 KiB 2 [emitted]
20.js 15.6 KiB 20 [emitted]
21.js 14.4 KiB 21 [emitted]
22.js 14.7 KiB 22 [emitted]
23.js 14.5 KiB 23 [emitted]
24.js 14.8 KiB 24 [emitted]
25.js 32 KiB 25 [emitted]
26.js 31.9 KiB 26 [emitted]
27.js 13.9 KiB 27 [emitted]
28.js 15.7 KiB 28 [emitted]
29.js 32.6 KiB 29 [emitted]
3.js 62.1 KiB 3 [emitted]
30.js 30.1 KiB 30 [emitted]
31.js 14.8 KiB 31 [emitted]
32.js 25.9 KiB 32 [emitted]
33.js 18.4 KiB 33 [emitted]
34.js 20.8 KiB 34 [emitted]
35.js 28.9 KiB 35 [emitted]
35.js.LICENSE.txt 232 bytes [emitted]
36.js 4.1 KiB 36 [emitted]
37.js 3.9 KiB 37 [emitted]
38.js 14 KiB 38 [emitted]
39.js 12.9 KiB 39 [emitted]
4.js 65.6 KiB 4 [emitted]
40.js 3.79 KiB 40 [emitted]
41.js 3.96 KiB 41 [emitted]
42.js 4.46 KiB 42 [emitted]
43.js 48.9 KiB 43 [emitted]
44.js 5.07 KiB 44 [emitted]
45.js 4.51 KiB 45 [emitted]
46.js 6.33 KiB 46 [emitted]
47.js 6.91 KiB 47 [emitted]
48.js 26.2 KiB 48 [emitted]
49.js 3.92 KiB 49 [emitted]
5.js 17.1 KiB 5 [emitted]
50.js 4.08 KiB 50 [emitted]
51.js 5.92 KiB 51 [emitted]
52.js 3.44 KiB 52 [emitted]
53.js 3.38 KiB 53 [emitted]
54.js 3.19 KiB 54 [emitted]
55.js 2.49 KiB 55 [emitted]
6.js 17.6 KiB 6 [emitted]
7.js 19.1 KiB 7 [emitted]
8.js 19.6 KiB 8 [emitted]
9.js 15.4 KiB 9 [emitted]
\css\custom.css 6.93 KiB [emitted]
\css\responsive.css 1.04 KiB [emitted]
I was hoping for my chunked files output to be in my public folder. But nothing at all
Any idea why please?
Which laravel mix version are you using?
I tried with:
"laravel-mix": "^5.0.4",
And it wrote the chunks into the ./public/js/chunks folder.
Also one thing is the output message, other is where files are actually being written. In your case where are the chunks files being saved to?
Thank you for the reply.
I am using
"laravel-mix": "^5.0.5",
This is the code I am using in my webpack file, I am wondering if this is what causes issues:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.styles(['resources/css/responsive.css'], 'public/css/responsive.css')
.styles(['resources/css/custom.css'], 'public/css/custom.css');
if (mix.inProduction()) {
mix.webpackConfig({
output: {
filename:'js/main/[name].js',
chunkFilename: 'js/chunks/[name].js',
},
})
mix.version();
}
I tried to run the commands without if (mix.inProduction()) {} But same problem.
The files are not being written anywhere.
I got it working.
When I moved this setup:
mix.webpackConfig({
output: {
chunkFilename: 'js/chunks/[name].[chunkhash].js',
},
})
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.styles(['resources/css/responsive.css'], 'public/css/responsive.css')
.styles(['resources/css/custom.css'], 'public/css/custom.css').version();
Now my problem is that all the files are generated ok but the old ones are not removed each time I run the command. Any idea how to do this please?
As far as I know it won't delete old files by default.
To automate that I install rimraf:
npm install rimraf --save-dev
or, if using yarn:
yarn add rimraf -D
And this on the top of my webpack.mix.js file:
const rimraf = require('rimraf');
rimraf.sync(path.resolve('public/css'));
rimraf.sync(path.resolve('public/js'));
// any other folder you want to remove
Note, don't remove the ./public folder altogether. It contains some files, such as index.php your app needs to run.
Hope this helps.
Please or to participate in this conversation.