modify-chunk-id-webpack-plugin
Why?
When another webpack-dev-server file was introduced in webpack-dev-server, the file reference failed due to a chunkId conflict. This plugin can solve this problem.
Support
webpack 4.x
Example
window.webpackJsonp
// Original webpackJsonp
[
[
['0'],
{
moduleName: function(t, e, n) {},
// ...
},
],
[
['1'],
{
moduleName: function(t, e, n) {},
// ...
},
],
];
// Modified webpackJsonp
[
[
['mci.0'],
{
moduleName: function(t, e, n) {},
// ...
},
],
[
['mci.1'],
{
moduleName: function(t, e, n) {},
// ...
},
],
];
Usage
yarn add modify-chunk-id-webpack-plugin -D
Usage
random: true
in options
With random
to true
in production mode
webpack.config.js
const ModifyChunkIdPlugin = require('modify-chunk-id-webpack-plugin');
module.exports = {
plugins: [
new ModifyChunkIdPlugin({ random: true }),
// other plugins
],
};
Modified webpackJsonp
[
[
['randomString.0'],
{
moduleName: function(t, e, n) {},
// ...
},
],
[
['randomString.1'],
{
moduleName: function(t, e, n) {},
// ...
},
],
];
prefix
field in options
With webpack.config.js
const ModifyChunkIdPlugin = require('modify-chunk-id-webpack-plugin');
module.exports = {
plugins: [
new ModifyChunkIdPlugin({ prefix: 'custom' }),
// other plugins
],
};
Modified webpackJsonp
[
[
['custom.0'],
{
moduleName: function(t, e, n) {},
// ...
},
],
[
['custom.1'],
{
moduleName: function(t, e, n) {},
// ...
},
],
];
converter
field in options
With webpack.config.js
const ModifyChunkIdPlugin = require('modify-chunk-id-webpack-plugin');
module.exports = {
plugins: [
new ModifyChunkIdPlugin({ converter: (id) => `custom-${id}` }),
// other plugins
],
};
Modified webpackJsonp
[
[
['custom-0'],
{
moduleName: function(t, e, n) {},
// ...
},
],
[
['custom-1'],
{
moduleName: function(t, e, n) {},
// ...
},
],
];
These cases do not modify chunk id
-
options
not given -
options
is empty options.random === false && !options.prefix && !options.converter
Parameter priority
random
> prefix
> converter
License
MIT © zh-rocco