{"action":"created","issue":{"url":"https://api.github.com/repos/JeffreyWay/laravel-mix/issues/164","repository_url":"https://api.github.com/repos/JeffreyWay/laravel-mix","labels_url":"https://api.github.com/repos/JeffreyWay/laravel-mix/issues/164/labels{/name}","comments_url":"https://api.github.com/repos/JeffreyWay/laravel-mix/issues/164/comments","events_url":"https://api.github.com/repos/JeffreyWay/laravel-mix/issues/164/events","html_url":"https://github.com/JeffreyWay/laravel-mix/issues/164","id":203140564,"number":164,"title":"Webpack dynamic chunk loading not working because of publicPath setting","user":{"login":"SebastianS90","id":7740744,"avatar_url":"https://avatars1.githubusercontent.com/u/7740744?v=4","gravatar_id":"","url":"https://api.github.com/users/SebastianS90","html_url":"https://github.com/SebastianS90","followers_url":"https://api.github.com/users/SebastianS90/followers","following_url":"https://api.github.com/users/SebastianS90/following{/other_user}","gists_url":"https://api.github.com/users/SebastianS90/gists{/gist_id}","starred_url":"https://api.github.com/users/SebastianS90/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SebastianS90/subscriptions","organizations_url":"https://api.github.com/users/SebastianS90/orgs","repos_url":"https://api.github.com/users/SebastianS90/repos","events_url":"https://api.github.com/users/SebastianS90/events{/privacy}","received_events_url":"https://api.github.com/users/SebastianS90/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2017-01-25T15:50:42Z","updated_at":"2018-02-14T14:24:33Z","closed_at":"2017-02-28T16:17:06Z","author_association":"CONTRIBUTOR","body":"I have a single page application and use `vue-router` in combination with async components. Webpack therefore creates separate chunks for each page and they are loaded when the user wants to access the route.\r\n\r\nDynamic chunk loading is not working right now because of the `output.publicPath` setting. In the default Mix configuration, webpack `output.publicPath` [is set](https://github.com/JeffreyWay/laravel-mix/blob/55d07f6381a0de5e116b3eaefb92de41548d55de/src/Mix.js#L109) to `./` and javascript files have the path `/js/[name].js`.\r\n\r\nWhen webpack wants to load a new chunk, then it inserts a script tag:\r\n```javascript\r\nscript.src = __webpack_require__.p + \"/js/\" + chunkId + \".js\";\r\n```\r\nwhere `__webpack_require__.p = \"./\"` because of the mentioned `publicPath` setting.\r\n\r\nFor chunk id 7, the resulting path is `.//js/7.js` and will be expanded to `http://localhost:8000//js/7.js`.\r\nBut the `php artisan serve` webserver does not deliver the `public/js/7.js` file because of the additional `/` in the url. Instead, we get a 404 error.\r\n\r\nEven worse, when we are on a `vue-router` route `user/17/edit` and webpack wants to load chunk 7, then the resulting url is `http://localhost:8000/user/17/edit/js/7.js` and it will obviously not work.\r\n\r\nWe cannot just change `publicPath` to `/` (without `.`), because then we will get `//js/7.js` which is in fact `http://js/7.js` and makes no sense either.\r\n\r\nThe cleanest solution probably is the following:\r\n- Webpack's `output.publicPath` will be set to `/` in normal operation. When using HMR, then the path should be `http://localhost:8080/`. This can be achieved by modifying [this line](https://github.com/JeffreyWay/laravel-mix/blob/55d07f6381a0de5e116b3eaefb92de41548d55de/src/Mix.js#L109).\r\n- Script names should not start with a leading slash, i.e. the names are `js/app.js`, `js/7.js`, ...\r\nThis can be achieved by modifying [this line](https://github.com/JeffreyWay/laravel-mix/blob/55d07f6381a0de5e116b3eaefb92de41548d55de/src/Mix.js#L108) to `.replace(this.publicPath + '/', '')`.\r\n- The `Manifest.transform` function will ensure that all paths in the `mix-manifest.json` file will start with a slash as required by laravels `mix` helper function.\r\nThis can be achieved by inserting `if (!path.startsWith('/')) path = '/' + path;` above [this line](https://github.com/JeffreyWay/laravel-mix/blob/55d07f6381a0de5e116b3eaefb92de41548d55de/src/Manifest.js#L24).\r\n\r\nPlease let me know what you think of my proposed solution. If you agree, then I'll create a PR."},"comment":{"url":"https://api.github.com/repos/JeffreyWay/laravel-mix/issues/comments/365622178","html_url":"https://github.com/JeffreyWay/laravel-mix/issues/164#issuecomment-365622178","issue_url":"https://api.github.com/repos/JeffreyWay/laravel-mix/issues/164","id":365622178,"user":{"login":"slavensaka","id":8411116,"avatar_url":"https://avatars0.githubusercontent.com/u/8411116?v=4","gravatar_id":"","url":"https://api.github.com/users/slavensaka","html_url":"https://github.com/slavensaka","followers_url":"https://api.github.com/users/slavensaka/followers","following_url":"https://api.github.com/users/slavensaka/following{/other_user}","gists_url":"https://api.github.com/users/slavensaka/gists{/gist_id}","starred_url":"https://api.github.com/users/slavensaka/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/slavensaka/subscriptions","organizations_url":"https://api.github.com/users/slavensaka/orgs","repos_url":"https://api.github.com/users/slavensaka/repos","events_url":"https://api.github.com/users/slavensaka/events{/privacy}","received_events_url":"https://api.github.com/users/slavensaka/received_events","type":"User","site_admin":false},"created_at":"2018-02-14T14:24:33Z","updated_at":"2018-02-14T14:24:33Z","author_association":"NONE","body":"@rdgout Saved me hours of figuring out. Thank you!"}}
{"actor":{"display_login":"slavensaka"}}