Issue 1:
Feature request

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 pitch()

export function pitch() {
const cssIdx = this.loaders.findIndex(l => 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 => x.request).join('!');

return `module.exports = require("-!${prefix}!${this.resourcePath}");`;
}

The problem 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.

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 css-loader does If you have

my-loader!foo.css you can different modules that compile to the same thing if css-loader ses a dependency on foo.css it'll get required as css-loader!my-loader!foo.css

What is the expected behavior?

I'd like to be able to rewrite a loader chain in the pitch phase

change options without mutating a configured rule's options object

not create duplicate modules, which seems to happen based on the initial request, not the request after pitch is complete

How should this be implemented in your opinion?

Really unsure

Are you willing to work on this yourself?

yes

Issue 2:
Bug report

What is the current behavior?

I am using Babel7 and Webpack4 to build my app. I provided my config files below.

The problem is that after building my app, I have the following dynamic import list as can be seen below.

However, the polyfills also start with chunkIds 0.

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.

Chunk IDs dynamic import

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"
/******/
}

.babelrc

{
"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"
]
}

webpack.common.js

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']
}]
}
};

webpack.prod.js

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".
})
]

});

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

I would expect that the chunk ids of the polyfills and dynamic import won't conflict and just keep on adding up.

Other relevant information:

webpack version: 4

Node.js version: v9.4.0

Operating System: Windows 10

Additional tools: Babel 7