title: Use dynamic import in vue router with laravel mix
body: <p>I use laravel 5.7 with Vue 2.5 and VueRouter 3.0 .</p>
  <p>I want to use dynamic modules (<a href="https://v2.vuejs.org/v2/guide/components-dynamic-async.html" rel="nofollow noreferrer">see here</a>).</p>
  <p>This is my <code>.babelrc</code>:</p>
  <pre><code>{
      &quot;presets&quot;: [
          [&quot;env&quot;, {
              &quot;modules&quot;: false,
              &quot;targets&quot;: {
                  &quot;browsers&quot;: [&quot;&gt; 1%&quot;, &quot;last 2 versions&quot;, &quot;not ie &lt;= 8&quot;]
              }
          }],
          &quot;stage-2&quot;
      ],
      &quot;plugins&quot;: [&quot;transform-vue-jsx&quot;, &quot;transform-runtime&quot;,&quot;syntax-dynamic-import&quot;,&quot;dynamic-import-node&quot;],
      &quot;env&quot;: {
          &quot;test&quot;: {
              &quot;presets&quot;: [&quot;env&quot;, &quot;stage-2&quot;,&quot;es2015&quot;],
              &quot;plugins&quot;: [&quot;transform-vue-jsx&quot;, &quot;transform-es2015-modules-commonjs&quot;, &quot;syntax-dynamic-import&quot;]
          }
      }
  }
  </code></pre>
  <p>And my <code>webpack.mix.js</code>:</p>
  <pre><code>const mix = require('laravel-mix');
  
  mix.webpackConfig({
      module: {
          rules: [
              {
                  test: /\.styl$/,
                  loader: ['style-loader', 'css-loader', 'stylus-loader'],
              }
          ],
      }
  });
  
  mix.webpackConfig({
      resolve: {
          alias: {
              &quot;@&quot;: path.resolve(
                  __dirname,
                  &quot;resources/js&quot;
              )
          }
      }
  });
  
  mix.js('resources/js/app.js', 'public/js')
     .sass('resources/sass/app.scss', 'public/css');
  </code></pre>
  <p>And my routes, with dynamic import :</p>
  <pre><code>export default [
    {
      path: '/404',
      meta: {
        public: true,
      },
      name: 'NotFound',
      component: () =&gt; import(
        /* webpackChunkName: &quot;routes&quot; */
        /* webpackMode: &quot;lazy-once&quot; */
        `@/pages/NotFound.vue`
      )
    },
  ]
  </code></pre>
  <p>But when I access in my app, my <code>NotFound</code> module is not find :</p>
  <pre><code> Error: &quot;Cannot find module 'function () {
          return require('@/pages/NotFound.vue');
        }'.&quot;
  </code></pre>
  <p>I can give more code or explain if you want.</p>
  <p>My goal, it's to integrate <a href="https://github.com/tookit/vue-material-admin" rel="nofollow noreferrer">vue-material-admin</a> with Laravel.</p>