title: Can't use Worker-Loader with Vuejs and Webpack
body: <p>I am trying to get web workers up and running with Vue cli3 and I'm having trouble getting it to work. </p>
  
  <p>I want to use the following package, worker-loader (and not vue-worker), as it looks well maintained and with more contributions. </p>
  
  <p>Following their tutorial I attempted to modify webpack using the vue cli as follows: </p>
  
  <pre><code>module.exports = {
      chainWebpack: config =&gt; {
          config.module
            .rule('worker-loader')
            .test(/\.worker\.js$/)
            .use('worker-loader')
              .loader('worker-loader')
              .end()
      }
  }
  </code></pre>
  
  <p>which I hope should match their </p>
  
  <pre><code>{
    module: {
      rules: [
        {
          test: /\.worker\.js$/,
          use: { loader: 'worker-loader' }
        }
      ]
    }
  }
  </code></pre>
  
  <p>which can be read here (<a href="https://github.com/webpack-contrib/worker-loader" rel="noreferrer">https://github.com/webpack-contrib/worker-loader</a>). I tried to follow the documentation for vue cli3 as best I could (found here: <a href="https://cli.vuejs.org/guide/webpack.html#simple-configuration" rel="noreferrer">https://cli.vuejs.org/guide/webpack.html#simple-configuration</a>). </p>
  
  <p>My component is pretty simple: </p>
  
  <pre><code>import Worker from 'worker-loader!./../../sharedComponents/equations/recurringTimeComposer.js';
  
  &lt;...&gt;
  watch:{
  
   recurringPaymentReturnObj: function(newVal, oldVal){
          const myWorker = new Worker;
          myWorker.postMessage({ hellothere: 'sailor' });
          myWorker.onmessage = (e) =&gt; {
              console.log('value of e from message return', e.data);
   }
  }
  &lt;...&gt;
  </code></pre>
  
  <p>and in my <code>./../../sharedComponents/equations/recurringTimeComposer.js</code> file I have:</p>
  
  <pre><code>onmessage = function(e) {
      console.log('Message received from main script: ', e.data);
      // var workerResult = 'Result: ' + e.data;
      // console.log('Posting message back to main script');
      postMessage('hello back handsome');
      close();
  }
  </code></pre>
  
  <p>I keep getting the error message: </p>
  
  <pre><code>ReferenceError: window is not defined a162426ab2892af040c5.worker.js:2:15
  </code></pre>
  
  <p>After some googling I came across this post: <a href="https://github.com/webpack/webpack/issues/6642" rel="noreferrer">https://github.com/webpack/webpack/issues/6642</a>, which suggests that the best way to fix this is to add the following to webpack: </p>
  
  <pre><code>output: {
         path: path.join(__dirname, 'dist'),
         filename: 'bundle.js'
         publicPath: 'http://localhost:3000',
         globalObject: 'this'
  },
  </code></pre>
  
  <p>After modifying my <code>vue.config.js</code> file I have: </p>
  
  <pre><code>module.exports = {
      chainWebpack: config =&gt; {
          config.module
            .rule('worker-loader')
            .test(/\.worker\.js$/)
            .use('worker-loader')
              .loader('worker-loader')
              .end()
          config
              .output
              .path(path.join(__dirname, 'dist'))
              .filename('bundle.js')
              .publicPath('http://localhost:8080')
              .globalObject('this')
      }
  }
  </code></pre>
  
  <p>...but still I am getting the window is not defined error.</p>
  
  <p>Does anyone know what is going wrong? It seems to be a weird error in webpack.</p>
  
  <p>Thanks!</p>
  
  <p>EDIT: oh yeah, here is the MDN page for webworker as well: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers</a>.</p>