title: Webpack: output.path, publicPath and chunkFilename selecting concept for projects where html and js files are not in the same folder
body: <p>From the webpack documentation for <code>output.publicPath</code>:</p>
  
  <blockquote>
    <p>Simple rule: The URL of your output.path from the view of the HTML
    page.</p>
    
    <pre><code>module.exports = { 
    output: {
      path: path.resolve(__dirname, 'public/assets'),
      publicPath: 'https://cdn.example.com/assets/'   
    } 
  }; 
  </code></pre>
  </blockquote>
  
  <p>Above rule is actual for single-page applications, where usually <code>index.html</code> and <code>index.js</code> are in the  same folder. However, in the projects of multi page websites, usually special folder like <code>js</code> or <code>scripts</code> is being created. So the file structure of output folder of project could be like: </p>
  
  <p><a href="https://i.stack.imgur.com/AjyOW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AjyOW.png" alt="enter image description here"></a> </p>
  
  <p>I tried a lot of combinations of <code>output.path</code> <code>output.publicPath</code> and <code>output.chunkFilename</code>, however still do not understand, how to correctly select the combination of above parameters to make dynamic load works (e. g. <code>const MODULE = import('./loadOnDemand/testModule')</code> which is <code>chunks/chunk__0.js</code> in output folder). Please tell me the concept, how to select <code>output.path</code> <code>publicPath</code> and <code>chunkFilename</code>, which will works for above file system, and also could be scaled on below file system:</p>
  
  <p><a href="https://i.stack.imgur.com/rNYmW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rNYmW.png" alt="enter image description here"></a></p>