I am creating a React/Redux App compiled with Babel and bundled by Webpack. I want to implement a plugin feature. So I use Code Splitting with Dynamic import() to divide the main bundle for each plugin. However, if I need the same plugin in many place, Webpack will bundle a bundle for any import() used and iterate it (0.bundle.js, 1.bundle.js, ...). I try to use webpackChunkName: "MyPlugin" in comment in import() thinking that if I import a bunble with the same chunk name, it will replace the other one while bundling, but since I use babel-plugin-dynamic-import-webpack, webpackChunkName don't seem to work anymore. Due to project privacy, I can't provide any testable demo. Any idea?
import( /* webpackChunkName: "MyPlugin" */ `./plugins/MyPlugin.jsx` );
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-jsx",
"@babel/plugin-transform-object-assign",
"dynamic-import-webpack",
["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "ant"]
],
"env": {
"node": {
"plugins": [
["babel-plugin-transform-require-ignore",
{"extensions": [".less", ".scss", ".png", ".jpg"]}
]
]
},
"test": {
"presets": [["env", {"modules": "commonjs"}]]}
},
"comments": true
}
webpack.config.js
[...]
module.exports = {
entry: entry,
output: {
path: path.join(__dirname, 'build'),
filename: 'js/[name].js',
chunkFilename: 'js/[name].bundle.js',
publicPath: "/",
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: [/node_modules/],
use: {
loader: 'babel-loader',
query: {
plugins: [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-jsx",
"@babel/plugin-transform-object-assign",
"dynamic-import-webpack",
["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "ant"]
],
presets: [
"@babel/preset-env",
"@babel/preset-react"
]
}
}
},
[...]