Menu
Let's say I have a library like this:
src
--- component1
-------- component1.scss
-------- component1.js
--- component2
-------- component2.scss
-------- component2.js
and I want to distribute each component as an independent bundle, not as a common bundle for the whole app (component1 + component2 + etc):
dist
--- component1
-------- bundle1.js
--- component2
-------- bundle.js
Is this achievable with just only one webpack config file or do I need to define an entry/ouput for each component?
Thanks!
491
webpack.config.jsWe can also pass an array of file paths to the entry property which creates what is known as a "multi-main entry". This is useful when you would like to inject multiple dependent files together and graph their dependencies into one "chunk".
Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel.
Bundle splitting is the process of separating Javascript code into multiple files. This results in a smaller amount of code being downloaded on the initial page load while other parts of the web app are loaded later on demand.
In React, code splitting involves applying the dynamic import() syntax to your components so that webpack automatically split the imported component as a separate bundle.
You can use several entry points to achive this and split your code to chunks
{
entry: { a: "./a", b: "./b" },
output: { filename: "[name].js" },
plugins: [ new webpack.optimize.CommonsChunkPlugin("init.js") ]
}
https://webpack.js.org/concepts/output/#multiple-entry-points
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
