title: Laravel webpackChunkName create wrong folder with tilde (~) char in chunks files
body: <p>I am developing a web app using laravel, vuejs and creating dynamic loaded chunk files using webpack mix. But when i run npm run watch/ npm run prod its creating some wrong folder with tilde(~) name into chunk folder. How to fix it ?</p>
  <p><a href="https://i.stack.imgur.com/rPH8v.png" rel="nofollow noreferrer">Wrong file name</a></p>
  <p><strong>webpack.mix.js file:</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let mix = require('laravel-mix');
  /*
   |--------------------------------------------------------------------------
   | Mix Asset Management
   |--------------------------------------------------------------------------
   |
   | Mix provides a clean, fluent API for defining some Webpack build steps
   | for your Laravel application. By default, we are compiling the Sass
   | file for the application as well as bundling up all the JS files.
   |
   */
  mix.js('resources/assets/js/app.js', 'public/js')
      .scripts(['public/js/common_lib.js', 'public/js/common.js'], 'public/js/app-bundle.js')
      .scripts(['public/assets/vendors/base/vendors.bundle.js',
              'public/assets/demo/default/base/scripts.bundle.js',
              'public/assets/demo/default/custom/components/base/toastr.js',
              'public/assets/demo/default/custom/components/base/blockui.js'
          ],
          'public/js/vendor.js')
      .sass('resources/assets/sass/app.scss', 'public/css');
  mix.options({ processCssUrls: false });
  
  mix.version();
  
  mix.webpackConfig({
      output: {
          publicPath: 'public/',
          chunkFilename: '[name].js?id=[contenthash]',
          // chunkFilename: '[name].[contenthash].js',
          // chunkFilename: '[name].js',
      }
  });</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Dynamic route component:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.Vue = require('vue');
  
  export default [
      {name: 'ContactRecorder', path: '/contact-recorder', component: () =&gt; import( /* webpackChunkName: "js/chunks/reports/contactRecorder/list" */ '../views/reports/contactRecorder/list.vue')},
      {name: 'VoiceAnalyticsList', path: '/voice-analytics-list', component: () =&gt; import( /* webpackChunkName: "js/chunks/reports/contactRecorder/voice_analytics_list" */ '../views/reports/contactRecorder/voice_analytics_list.vue')},
      {name: 'PdCallList', path: '/pd-call-list', component: () =&gt; import( /* webpackChunkName: "js/chunks/reports/PdCall/list" */ '../views/reports/PdCall/list.vue')},
      {name: 'ManualOutboundList', path: '/manual-outbound-list', component: () =&gt; import( /* webpackChunkName: "js/chunks/reports/manualOutbound/list" */ '../views/reports/manualOutbound/list.vue')},
      {name: 'WebChatDetailList', path: '/webchat-detail-list', component: () =&gt; import( /* webpackChunkName: "js/chunks/reports/webChat/detail_list" */ '../views/reports/webChat/detail_list.vue')},
      {name: 'EmailList', path: '/email-report-list', component: () =&gt; import( /* webpackChunkName: "js/chunks/reports/email/list" */ '../views/reports/email/list.vue')},
      {name: 'EmailDetail', path: '/email-detail/:tkid', component: () =&gt; import( /* webpackChunkName: "js/chunks/reports/email/detail" */ '../views/reports/email/detail.vue')},
      {name: 'SmsList', path: '/sms-report-list', component: () =&gt; import( /* webpackChunkName: "js/chunks/reports/sms/list" */ '../views/reports/sms/list.vue')},
  
  ];</code></pre>
  </div>
  </div>
  </p>