title: Webpack: Set the path for my assets according to the entry name
body: <p>Using webpack, I have a multiple page application which works with multiple entries. I have a project tree like this:</p>
  
  <pre><code>-- webpack.config.js
  -- src/
      -- first/
          -- main.ts
          -- helper.ts
          -- main.css
          -- index.html
      -- second/
          -- main.ts
          -- main.css
          -- index.html
      -- assets/
          -- myAsset1.png
          -- myAsset2.png
          -- myAsset3.png
  </code></pre>
  
  <p>I wanted something tidy and organised by folder. To do so, I add <code>[name]/...</code> each time for the <code>name</code> or the <code>filename</code> like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>const HtmlWebpackPlugin = require('html-webpack-plugin');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const path = require('path');
  
  module.exports = {
    entry: {
      first: './src/first/main.ts',
      second: './src/second/main.ts',
    },
    output: {
      path: path.resolve(__dirname, 'dist'), // output directory
      filename: '[name]/script.js', // name of the generated bundle
      publicPath: '/',
    },
    module: {
      rules: [
        // TypeScript
        {
          test: /\.ts$/,
          loader: 'ts-loader',
          options: {
            onlyCompileBundledFiles: true,
          },
        },
        // Style
        {
          test: /\.s?[ac]ss$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'resolve-url-loader',
            },
            {
              loader: 'sass-loader',
            },
          ],
        },
        // Fonts &amp; Images
        {
          test: /\.(woff(2)?|ttf|eot|jpg|png|svg|md)(\?v=\d+\.\d+\.\d+)?$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                limit: 8192,
                name: '[name].[ext]',
              },
            },
          ],
        },
      ],
    },
    resolve: {
      modules: ['node_modules', path.resolve(process.cwd(), 'src')],
      extensions: ['.ts', '.js'],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.join(process.cwd(), 'src/first/index.html'),
        inject: true,
        chunks: ['first'],
        filename: 'first/index.html',
      }),
      new HtmlWebpackPlugin({
        template: './src/second/index.html',
        inject: true,
        chunks: ['second'],
        filename: 'second/index.html',
      }),
      new MiniCssExtractPlugin({
        filename: '[name]/style.css',
        chunkFilename: '[name]/style.css',
      }),
    ],
  };
  </code></pre>
  
  <p><strong>The result will be:</strong></p>
  
  <pre><code>-- dist/
      -- first/
          -- script.js
          -- style.css
          -- index.html
      -- second/
          -- script.js
          -- style.css
          -- index.html
      -- myAsset1.png
      -- myAsset2.png
      -- myAsset3.png
  </code></pre>
  
  <p>However, I would like the assets in the folder name according to the entry from where it is imported. Indeed, <code>myAssets1.png</code> and <code>myAssets2.png</code> are imported from <code>main.ts</code> of <code>first</code> folder and <code>myAssets3.png</code> is imported from <code>main.ts</code> of <code>second</code> folder</p>
  
  <pre><code>-- dist/
      -- first/
          -- script.js
          -- style.css
          -- index.html
          -- myAsset1.png
          -- myAsset2.png
      -- second/
          -- script.js
          -- style.css
          -- index.html
          -- myAsset3.png
  </code></pre>
  
  <p>How could I set the path for my assets according to the entry name?</p>