<h2 dir="auto">Feature request</h2>
<p dir="auto">This is maybe just a question as it may already be possible. I'm working on a loader that that inserts itself into an configured chain via <code class="notranslate">pitch()</code></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export function pitch() {
  const cssIdx = this.loaders.findIndex(l =&gt; l.path.includes('css-loader/'));
  const cssLoader = this.loaders[cssIdx];

  const loaders = [...this.loaders];

  const [me] = loaders.splice(this.loaderIndex, 1);

  loaders.splice(cssIdx + 1, 0, me);
  const prefix = loaders.map(x =&gt; x.request).join('!');

  return `module.exports = require(&quot;-!${prefix}!${this.resourcePath}&quot;);`;
}"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">function</span> <span class="pl-en">pitch</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">cssIdx</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">loaders</span><span class="pl-kos">.</span><span class="pl-en">findIndex</span><span class="pl-kos">(</span><span class="pl-s1">l</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">l</span><span class="pl-kos">.</span><span class="pl-c1">path</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s">'css-loader/'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">cssLoader</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">loaders</span><span class="pl-kos">[</span><span class="pl-s1">cssIdx</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

  <span class="pl-k">const</span> <span class="pl-s1">loaders</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span>...<span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">loaders</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">me</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s1">loaders</span><span class="pl-kos">.</span><span class="pl-en">splice</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">loaderIndex</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-s1">loaders</span><span class="pl-kos">.</span><span class="pl-en">splice</span><span class="pl-kos">(</span><span class="pl-s1">cssIdx</span> <span class="pl-c1">+</span> <span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">me</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">prefix</span> <span class="pl-c1">=</span> <span class="pl-s1">loaders</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-s1">x</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">x</span><span class="pl-kos">.</span><span class="pl-c1">request</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s">'!'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">return</span> <span class="pl-s">`module.exports = require("-!<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">prefix</span><span class="pl-kos">}</span></span>!<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">resourcePath</span><span class="pl-kos">}</span></span>");`</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">The <em>problem</em> is tho i need to add some options to css-loader here, but cannot b/c they aren't serializable, and the query string here is an ident. There doesn't seem to be any way of adding a new ident mapping either at this point.</p>
<p dir="auto">My other approach was alter the loaders array, but the problem with this is it can create duplicate modules, when another loader does something like <a href="https://github.com/webpack-contrib/css-loader/blob/master/src/utils.js#L186-L201">css-loader does</a> If you have<br>
<code class="notranslate">my-loader!foo.css</code> you can different modules that compile to the same thing if css-loader ses a dependency on foo.css it'll get required as <code class="notranslate">css-loader!my-loader!foo.css</code></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">I'd like to be able to rewrite a loader chain in the pitch phase</p>
<ul dir="auto">
<li>change options without mutating a configured rule's options object</li>
<li>not create duplicate modules, which seems to happen based on the initial request, not the request after <code class="notranslate">pitch</code> is complete</li>
</ul>
<p dir="auto"><strong>How should this be implemented in your opinion?</strong></p>
<p dir="auto">Really unsure</p>
<p dir="auto"><strong>Are you willing to work on this yourself?</strong><br>
yes</p>
<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">I am using Babel7 and Webpack4 to build my app. I provided my config files below.</p>
<p dir="auto">The problem is that after building my app, I have the following dynamic import list as can be seen below.</p>
<p dir="auto">However, the polyfills also start with chunkIds 0.</p>
<p dir="auto">The problem now is that when loading these chunks, the code checks for "installedChunks" If a chunk is installed, it does not load th chunk. So, if a polyfill already taks up an id, my dynamic module is never loaded and my code breaks.</p>
<p dir="auto"><strong>Chunk IDs dynamic import</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="function jsonpScriptSrc(chunkId) {
        /******/
        return __webpack_require__.p + &quot;&quot; + ({
            &quot;0&quot;: &quot;distribute-customjavascript&quot;,
            &quot;1&quot;: &quot;distribute-daisycon&quot;,
            &quot;2&quot;: &quot;distribute-facebook&quot;,
            &quot;3&quot;: &quot;distribute-googleadsconversion&quot;,
            &quot;4&quot;: &quot;distribute-googleadsremarketing&quot;,
            &quot;5&quot;: &quot;distribute-googleanalytics&quot;,
            &quot;6&quot;: &quot;distribute-googlemarketingplatform&quot;,
            &quot;7&quot;: &quot;distribute-gtm&quot;,
            &quot;8&quot;: &quot;distribute-linkedinconversion&quot;,
            &quot;9&quot;: &quot;distribute-linkedininsight&quot;,
            &quot;10&quot;: &quot;distribute-tealium&quot;,
            &quot;11&quot;: &quot;distribute-webhook&quot;,
            &quot;14&quot;: &quot;load-abtasty&quot;,
            &quot;15&quot;: &quot;load-adblock&quot;,
            &quot;16&quot;: &quot;load-bluebillywigplayer&quot;,
            &quot;17&quot;: &quot;load-convert&quot;,
            &quot;18&quot;: &quot;load-facebook&quot;,
            &quot;19&quot;: &quot;load-fingerprinting&quot;,
            &quot;20&quot;: &quot;load-googleanalytics&quot;,
            &quot;21&quot;: &quot;load-gtm&quot;,
            &quot;22&quot;: &quot;load-harvestlistener&quot;,
            &quot;23&quot;: &quot;load-hotjar&quot;,
            &quot;24&quot;: &quot;load-livechatinc&quot;,
            &quot;25&quot;: &quot;load-loadexternalfile&quot;,
            &quot;26&quot;: &quot;load-optinmonster&quot;,
            &quot;27&quot;: &quot;load-performancetiming&quot;,
            &quot;28&quot;: &quot;load-placeholder&quot;,
            &quot;29&quot;: &quot;load-readinterval&quot;,
            &quot;30&quot;: &quot;load-tealium&quot;,
            &quot;31&quot;: &quot;load-useragentparser&quot;,
            &quot;32&quot;: &quot;load-youtube&quot;,
            &quot;33&quot;: &quot;postprocessing-abtasty&quot;,
            &quot;34&quot;: &quot;postprocessing-convert&quot;,
            &quot;35&quot;: &quot;postprocessing-customscript&quot;,
            &quot;36&quot;: &quot;postprocessing-facebook&quot;,
            &quot;37&quot;: &quot;postprocessing-googleanalytics&quot;,
            &quot;38&quot;: &quot;postprocessing-jsoncookieextractor&quot;,
            &quot;39&quot;: &quot;postprocessing-optimizely&quot;,
            &quot;40&quot;: &quot;postprocessing-searchquery&quot;,
            &quot;41&quot;: &quot;postprocessing-tealium&quot;,
            &quot;42&quot;: &quot;postprocessing-usabilla&quot;,
            &quot;45&quot;: &quot;vendors~load-fingerprinting&quot;
        }[chunkId] || chunkId) + &quot;.js&quot;
        /******/
    }"><pre class="notranslate"><code class="notranslate">function jsonpScriptSrc(chunkId) {
        /******/
        return __webpack_require__.p + "" + ({
            "0": "distribute-customjavascript",
            "1": "distribute-daisycon",
            "2": "distribute-facebook",
            "3": "distribute-googleadsconversion",
            "4": "distribute-googleadsremarketing",
            "5": "distribute-googleanalytics",
            "6": "distribute-googlemarketingplatform",
            "7": "distribute-gtm",
            "8": "distribute-linkedinconversion",
            "9": "distribute-linkedininsight",
            "10": "distribute-tealium",
            "11": "distribute-webhook",
            "14": "load-abtasty",
            "15": "load-adblock",
            "16": "load-bluebillywigplayer",
            "17": "load-convert",
            "18": "load-facebook",
            "19": "load-fingerprinting",
            "20": "load-googleanalytics",
            "21": "load-gtm",
            "22": "load-harvestlistener",
            "23": "load-hotjar",
            "24": "load-livechatinc",
            "25": "load-loadexternalfile",
            "26": "load-optinmonster",
            "27": "load-performancetiming",
            "28": "load-placeholder",
            "29": "load-readinterval",
            "30": "load-tealium",
            "31": "load-useragentparser",
            "32": "load-youtube",
            "33": "postprocessing-abtasty",
            "34": "postprocessing-convert",
            "35": "postprocessing-customscript",
            "36": "postprocessing-facebook",
            "37": "postprocessing-googleanalytics",
            "38": "postprocessing-jsoncookieextractor",
            "39": "postprocessing-optimizely",
            "40": "postprocessing-searchquery",
            "41": "postprocessing-tealium",
            "42": "postprocessing-usabilla",
            "45": "vendors~load-fingerprinting"
        }[chunkId] || chunkId) + ".js"
        /******/
    }
</code></pre></div>
<p dir="auto"><strong>.babelrc</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [
    [
      &quot;@babel/env&quot;,
      {
        &quot;useBuiltIns&quot;: &quot;usage&quot;,
        &quot;corejs&quot;: 3
      }
    ]
  ],
  &quot;plugins&quot;: [
    &quot;@babel/plugin-transform-runtime&quot;,
    &quot;@babel/plugin-proposal-object-rest-spread&quot;,
    &quot;@babel/plugin-transform-template-literals&quot;,
    &quot;@babel/plugin-syntax-dynamic-import&quot;
  ]
}"><pre class="notranslate"><code class="notranslate">{
  "presets": [
    [
      "@babel/env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-template-literals",
    "@babel/plugin-syntax-dynamic-import"
  ]
}
</code></pre></div>
<p dir="auto"><strong>webpack.common.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="module.exports = {
    entry: {
        harvestConfiguration: `./harvest-configurations/configs/tmsconfiguration-${process.env.TEST_CUSTOMER}.js`,
        harvest: &quot;./src/index.js&quot;
    },
    output: {
        filename: '[name].js',
        chunkFilename: '[name].js'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            template: htmlFile,
            inject: &quot;body&quot;
        })
    ],
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: ['babel-loader', 'eslint-loader', 'webpack-conditional-loader']
        }]
    }
};"><pre class="notranslate"><code class="notranslate">module.exports = {
    entry: {
        harvestConfiguration: `./harvest-configurations/configs/tmsconfiguration-${process.env.TEST_CUSTOMER}.js`,
        harvest: "./src/index.js"
    },
    output: {
        filename: '[name].js',
        chunkFilename: '[name].js'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            template: htmlFile,
            inject: "body"
        })
    ],
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: ['babel-loader', 'eslint-loader', 'webpack-conditional-loader']
        }]
    }
};
</code></pre></div>
<p dir="auto"><strong>webpack.prod.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const DynamicPublicPathPlugin = require(&quot;dynamic-public-path-webpack-plugin&quot;);

module.exports = merge(common, {
    mode: &quot;production&quot;,
    optimization:{
        minimize : false,
        runtimeChunk: true
    },
    output: {
        filename: '[name].js',
        chunkFilename: '[name].js',
        // publicPath: 'https://harvest-cdn-staging.s3.eu-central-1.amazonaws.com/assets/collect/',
        publicPath: 'https://cdn.harvest.graindata.com/assets/collect/',
    },
    plugins: [
        new DynamicPublicPathPlugin({
            externalGlobal: 'window.harvestConfiguration.harvestPlatformConfig.publicPath', //Your global variable name.
            chunkName: 'runtime~harvest' // Chunk name from &quot;entry&quot;.
        })
    ]

});"><pre class="notranslate"><code class="notranslate">const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const DynamicPublicPathPlugin = require("dynamic-public-path-webpack-plugin");

module.exports = merge(common, {
    mode: "production",
    optimization:{
        minimize : false,
        runtimeChunk: true
    },
    output: {
        filename: '[name].js',
        chunkFilename: '[name].js',
        // publicPath: 'https://harvest-cdn-staging.s3.eu-central-1.amazonaws.com/assets/collect/',
        publicPath: 'https://cdn.harvest.graindata.com/assets/collect/',
    },
    plugins: [
        new DynamicPublicPathPlugin({
            externalGlobal: 'window.harvestConfiguration.harvestPlatformConfig.publicPath', //Your global variable name.
            chunkName: 'runtime~harvest' // Chunk name from "entry".
        })
    ]

});
</code></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">I would expect that the chunk ids of the polyfills and dynamic import won't conflict and just keep on adding up.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  4<br>
Node.js version: v9.4.0<br>
Operating System:  Windows 10<br>
Additional tools: Babel 7</p>