webpack: When using optimization.splitchunks library is not available in import
Bug report ?
Not sure if its a bug, but I am stuck here and want help from the community…
What is the current behavior? I am creating a library to be used in react web and react-native. Since library size is too heavy, am trying to split it into chunks and trying splitChunks but library doesn’t seem to be available for import.
Importing a simple module from this library isn’t available when splitChunks is enabled. However when not using splitChunks, it works like charm.
Here is my webpack.config
module.exports = {
entry:
{
'index': './src/index.ts',
'utils': './src/index.utils.ts',
},
output: {
path: path.join(__dirname, "dist"),
filename: "[name].ts",
library: ["frontend-business", "[name]"],
libraryTarget: "commonjs2"
},
devtool: 'inline-source-map',
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|build|dist)/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.ts?$/,
include: path.resolve(__dirname, 'src'),
use: 'ts-loader',
exclude: /(node_modules|build|dist)/,
},
]
},
externals: {
'react': 'commonjs react', // this line is just to use the React dependency of our parent-platform-project instead of using our own React.
'@types/react': 'commonjs @types/react'
},
optimization: {
splitChunks: {
chunks: 'all',
}
}
};
What is the expected behavior? With splitChunks it should have work as without it because I dont see any extra work associated with splitChunks to make it work.
Other relevant information: webpack version: 4.41.2 Node.js version: 10.16.3 Operating System: Darwin
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 2
- Comments: 18 (7 by maintainers)
no one was able to fix this… only dynamic imports works when code splitting are enabled.
Hi, @sokra!
It is sometimes useful (especially in reactlandia) to have a library with multiple entrypoints, with each entrypoint re-exporting a common module (think of a singleton). We need all entrypoints to
require
the shared module. It is trivial to achieve with rollup, see this demo: https://github.com/dkamyshov/rollup-split-library-reproduction/tree/master/distWith webpack, it is somewhat achievable with
libraryTarget: 'module'
, though it uses some weird dynamic requires and I’m not sure whether webpack would consume such a library. Those dynamic requires look like this: