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!

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!

• javascript
• webpack

1 Answer 1

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