<p dir="auto"><strong>I'm submitting a feature request</strong></p>
<p dir="auto"><strong>Webpack version:</strong><br>
2 (and maybe 1 if feasible)</p>
<p dir="auto">It would be a nice feature for there to be an official API which would enable support for web workers and could be used in a plugin such as <a href="https://github.com/borisirota/webworkify-webpack">webworkify-webpack</a>.</p>
<p dir="auto">At the moment it looks like webworkify-webpack has to rely on webpack internals which may change in the future.</p>
<p dir="auto">There is an <a href="https://github.com/webpack/worker-loader">official webpack loader</a> for web workers but this will result in duplicate code as the webworker code is compiled separately. The webworkify-webpack plugin is nicer because it passes the module code that the webworker entry point needs at runtime, as well as the webpack internals so that the worker can require the modules it needs. This means if the worker code uses moduleA, moduleB and moduleC, and the main application javascript also uses these modules they will only be in the build once. With the official plugin they will be in the build twice (afaik).</p>
<h3 dir="auto">duplicate code in multi chunks and sooooo big common chunk file</h3>
<p dir="auto">Suppose I have a SPA website. And I have a file <code class="notranslate">main.js</code> in which I config the route.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="define(function(){
  // suppose I define route here
  route.when('#/aaa', function(){
    // a code split point
    require([
      'services/A',
      'style/a',
      'module/a'
    ])
  }).when('#/bbb', function(){
    // a code split point
    require([
      'services/A',
      'services/B',
      'style/b',
      'module/b'
    ])
  }).when('#/ccc', function(){
    // a code split point
    require([
      'services/B',
      'serivces/C',
      'style/c',
      'module/c'
    ])
  }).when('#/ddd', function(){
    // a code split point
    require([
      'services/A',
      'serivces/C',
      'style/d',
      'module/d'
    ])
  })// and has many route configs like this
});"><pre class="notranslate"><span class="pl-en">define</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
  <span class="pl-c">// suppose I define route here</span>
  <span class="pl-s1">route</span><span class="pl-kos">.</span><span class="pl-en">when</span><span class="pl-kos">(</span><span class="pl-s">'#/aaa'</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
    <span class="pl-c">// a code split point</span>
    <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-kos">[</span>
      <span class="pl-s">'services/A'</span><span class="pl-kos">,</span>
      <span class="pl-s">'style/a'</span><span class="pl-kos">,</span>
      <span class="pl-s">'module/a'</span>
    <span class="pl-kos">]</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">when</span><span class="pl-kos">(</span><span class="pl-s">'#/bbb'</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
    <span class="pl-c">// a code split point</span>
    <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-kos">[</span>
      <span class="pl-s">'services/A'</span><span class="pl-kos">,</span>
      <span class="pl-s">'services/B'</span><span class="pl-kos">,</span>
      <span class="pl-s">'style/b'</span><span class="pl-kos">,</span>
      <span class="pl-s">'module/b'</span>
    <span class="pl-kos">]</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">when</span><span class="pl-kos">(</span><span class="pl-s">'#/ccc'</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
    <span class="pl-c">// a code split point</span>
    <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-kos">[</span>
      <span class="pl-s">'services/B'</span><span class="pl-kos">,</span>
      <span class="pl-s">'serivces/C'</span><span class="pl-kos">,</span>
      <span class="pl-s">'style/c'</span><span class="pl-kos">,</span>
      <span class="pl-s">'module/c'</span>
    <span class="pl-kos">]</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">when</span><span class="pl-kos">(</span><span class="pl-s">'#/ddd'</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
    <span class="pl-c">// a code split point</span>
    <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-kos">[</span>
      <span class="pl-s">'services/A'</span><span class="pl-kos">,</span>
      <span class="pl-s">'serivces/C'</span><span class="pl-kos">,</span>
      <span class="pl-s">'style/d'</span><span class="pl-kos">,</span>
      <span class="pl-s">'module/d'</span>
    <span class="pl-kos">]</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-c">// and has many route configs like this</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I use webpack to bundle code. My <code class="notranslate">webpack.config.js</code> like this</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
  entry: {
    main: path.resolve(__dirname, 'main.js')
  },
  output: {
    path: path.resolve(__dirname),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'main',
      async: true
    })
  ]
}"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">entry</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">main</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'main.js'</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">output</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">path</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-c1">filename</span>: <span class="pl-s">'bundle.js'</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
    <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">optimize</span><span class="pl-kos">.</span><span class="pl-c1">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c1">name</span>: <span class="pl-s">'main'</span><span class="pl-kos">,</span>
      <span class="pl-c1">async</span>: <span class="pl-c1">true</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span>
  <span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">When I run webpack, various chunks have duplicate <code class="notranslate">services/A</code> <code class="notranslate">services/B</code> etc. code.<br>
This is not I want.</p>
<p dir="auto">I read webpack docs, and then I add <code class="notranslate">minChunks: 2</code> option to CommonsChunkPlugin.</p>
<p dir="auto">Then I run webpack again.</p>
<p dir="auto">Now, every chunk only have its own code. But I also get a <strong>big</strong> common chunk file, which include<br>
<code class="notranslate">services/A</code>, <code class="notranslate">services/B</code>, <code class="notranslate">services/C</code> and other shared code between various page file.</p>
<p dir="auto">When I run these code, in page <code class="notranslate">/aaa</code>, the <code class="notranslate">/aaa</code>'s files loaded, and also the big common chunk file.</p>
<p dir="auto">Now the big problem is, page <code class="notranslate">/aaa</code> doesn't need <code class="notranslate">services/B</code> and <code class="notranslate">services/C</code> code at all, But the common chunk files contains all shared code between various page files. So the common chunk file is so big, and have many unused code.</p>
<p dir="auto">I know I can set <code class="notranslate">minChunks</code> to bigger number, but in this way, every page file may agagin have duplicate code.</p>
<h2 dir="auto"><strong>HELP!</strong></h2>
<p dir="auto">Can I have other methods to only load necessary common chunks when route to different page?</p>