<p dir="auto">Currently using webpack to build a library, The library contains a couple UI-Components, these UI components depend on a couple styles from the library. However the same styles are also the ones that are exposed to users so they can access and style with. Whats the best way to prevent duplication of css as I don't want the user to have two copies of the styles(css) if they are using <code class="notranslate">extract-text-webpack-plugin</code>, <code class="notranslate">css-loader</code>, <code class="notranslate">style-loader</code>, etc.</p>
<p dir="auto">How to integrate the styles with library UMD output webpack build?</p>
<p dir="auto"><a href="http://stackoverflow.com/questions/37846849/library-output-with-css-in-user-land-and-library-webpack" rel="nofollow">StackoverFlow Link</a></p>
<p dir="auto">I am trying to migrate my big single page application from Require.js to webpack and there is some troubles with code splitting. My application has structure:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    js --|
    |    |-- entry.js
    |    |-- components --|
    |			  |-- component_1.js
    |			  |-- component_2.js
    |			  ... // many components 
    |		          |-- component_n.js
    |    |-- pages --|
    |		     |-- page_1.js
    |		     |-- page_2.js
    |		     ... // many pages
    |		     |-- page_n.js
    |    |-- routers --|
    |		       |-- router.js"><pre class="notranslate"><code class="notranslate">    js --|
    |    |-- entry.js
    |    |-- components --|
    |			  |-- component_1.js
    |			  |-- component_2.js
    |			  ... // many components 
    |		          |-- component_n.js
    |    |-- pages --|
    |		     |-- page_1.js
    |		     |-- page_2.js
    |		     ... // many pages
    |		     |-- page_n.js
    |    |-- routers --|
    |		       |-- router.js
</code></pre></div>
<p dir="auto">So I want to create a separate bundle for every page. I'm using bundle-loader in my router.js to do this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="require('bundle!pages/' + pageName)(function (result) {
      //... to do something in callback when the page is loaded
});"><pre class="notranslate"><code class="notranslate">require('bundle!pages/' + pageName)(function (result) {
      //... to do something in callback when the page is loaded
});
</code></pre></div>
<p dir="auto">It's OK. Also every page has define section with some components (not all) that it needs. For example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="define([
    'components/component_1',
    'components/component_7',
    'components/component_29'
], function (c1, c2, c3) { 
   // ... to do something with OBJECTS c1, c2, c3.
});"><pre class="notranslate"><code class="notranslate">define([
    'components/component_1',
    'components/component_7',
    'components/component_29'
], function (c1, c2, c3) { 
   // ... to do something with OBJECTS c1, c2, c3.
});
</code></pre></div>
<p dir="auto">Webpack puts code of these components on bundle with page. But there are many pages which use same components and components may be big, so I have duplicated code. ( DedupePlugin don't work with bundle-loader ). Also I don't want to create common big bundle with all components. I want to have isolated components and load each of them synchronously with page.<br>
RequireJS solved this problem. First it loaded every component.js file (if it was not loaded before) and after loaded page.js. Of course, I can use bundle-loader for components in webpack:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="define([
    'bundle!components/component_1',
    'bundle!components/component_7',
    'bundle!components/component_29'
], function (c1, c2, c3) { 
   // ??? what to do with CALLBACKS c1, c2, c3 ?
});"><pre class="notranslate"><code class="notranslate">define([
    'bundle!components/component_1',
    'bundle!components/component_7',
    'bundle!components/component_29'
], function (c1, c2, c3) { 
   // ??? what to do with CALLBACKS c1, c2, c3 ?
});
</code></pre></div>
<p dir="auto">Then components are loading asynchronously with page, i.e. after the page is loaded. And c1, c2, c3 are callbacks, but i need to use them as objects. Or I need to rework my big app totally. It's so hard and long.<br>
I try to write custom loader based on bundle-loader. It's <a href="https://github.com/yelodia/bundle-amd-loader">here</a>. How to use it with callback:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="require('bundle-amd!pages/' + pageName)(function (result) {
      //... to do something in callback when the page is loaded
});"><pre class="notranslate"><code class="notranslate">require('bundle-amd!pages/' + pageName)(function (result) {
      //... to do something in callback when the page is loaded
});
</code></pre></div>
<p dir="auto">How to use it in define section (with define parameter):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="define([
    'bundle-amd?define!components/component_1',
    'bundle-amd?define!components/component_7'
], function (c1, c2) { 
   // ... to do something with OBJECTS c1, c2
});"><pre class="notranslate"><code class="notranslate">define([
    'bundle-amd?define!components/component_1',
    'bundle-amd?define!components/component_7'
], function (c1, c2) { 
   // ... to do something with OBJECTS c1, c2
});
</code></pre></div>
<p dir="auto">My code is bad, because I am not nodejs developer, it's my first experience. But loader works and there are no duplicated code in bundles. I appeal to the experienced developer. Please, if you have the opportunity, create this loader (or plugin) for mass use. I think, I'm not the only one who needs the ability to synchronus loading of bundles. Hope you help me. Thanks!</p>