[Vuejs]-Vue.js lazy loading

by

2👍

✅

Following from the comments. You need to specify the publicPath.
Here’s a small version of a working webpack.mix.js file 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();

You probably had your manifest.json producing wrong paths and thus the webpack is not being able to find the correct chunk file paths. So your solution is either to modifiy the paths or just stick with default paths as the example above.
The code above should produce app.js inside public/js and as well the chunked files. Also it will produce the manifest.json in public directory
Now finally just reference your app.js file in your blade

<script src="{{mix('/js/app.js')}}"></script>

Note that you need to have babel loader and babel dynamic import plugins installed the first is needed to be able to use babel plugins in webpack as i’m not sure if laravel mix reads the .babelrc file and if it does then that should be enough

👤zeidanbm

Leave a comment