After taking into account the feedback provided in the comments, it is important to specify the publicPath in your webpack.mix.js file for proper functionality. Below is a condensed version of a functional webpack.mix.js file that has been tested on Laravel 5.5 with Laravel-mix:
const { mix } = require('laravel-mix');
mix.setPublicPath('public/');
mix.webpackConfig({
output: {
chunkFilename: 'js/[name].[chunkhash].js',
publicPath: '/'
},
module: {
rules: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['babel-preset-env'],
plugins:['babel-plugin-dynamic-import-webpack']
}
},
]
}
});
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version();
If your manifest.json was generating incorrect paths, it may have caused webpack to not locate the appropriate chunk file paths. You can either adjust the paths accordingly or simply stick with the default paths as shown above. The provided code will generate app.js in the public/js directory along with the chunked files. Additionally, it will create the manifest.json in the public directory. Remember to reference your app.js file in your blade file using:
<script src="{{mix('/js/app.js')}}"></script>
Ensure that you have installed the babel loader and babel dynamic import plugins, with the former being necessary for utilizing babel plugins in webpack. It is uncertain whether Laravel Mix reads the .babelrc file, so having these plugins installed should suffice.