Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multiple bundles with webpack

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!

like image 491
Trajan Avatar asked Dec 22 '16 13:12

Trajan


People also ask

Can webpack have multiple entry points?

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".

Can webpack split code into separate files?

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.

What is split bundle?

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.

How does webpack code splitting work?

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.


1 Answers

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

like image 176
VadimB Avatar answered Sep 29 '22 08:09

VadimB