Webpack 4 Multi-Part library and sub-libraries

问题

Overview

I'am developing a javascript library with Webpack4 & ES6 called: "shared-services" which contains different sub-folders. Each of these subfolders represent a "local sub-library" inside which could contain:

• references to other 3rd libraries like lodash, etc but also
• references to the methods of the other "sub-folders or sub-libraries"

Example

I've made an example of my problem and pushed it to github: https://github.com/iarroyo5/multi-part-library-webpack. Helpfully it should be as simple as follow the Readme file in order to execute it :)

Issues

1. In my example I've named the "shared-services" library as "multi-part-library-webpack". There are two "sub-folders": api and path. The goal is that both sub-folders/sub-libraries would be available in this way:

   import { API_URL, getApiUrl } from '@iarroyo/multi-part-library-webpack/api"; import { getUserPath } from '@iarroyo/multi-part-library-webpack/path";

In the provided example I've already got my goal!! ...the Webpack output are 3 files:

1. index.js --> contains all the methods from api and path as apiLib and pathLib
2. api.js --> contains api methods
3. path.js ---> contains path methods and api methods :(

but my big unresolved problem comes of this ^. Because of some of the methods of api are being imported into the path library (each folder must be a sub-library itself and they could be used inside the other folders) the webpack path.js file contains the api sub-folder entirely.

In the example path is using lodash, but third libraries are not being exported because I've added them to the externals Webpack option, so this at least is working.

2. This is not ideal, and there is another big problem:

   import { API_URL, getApiUrl } from '@iarroyo/multi-part-library-webpack/api";

^ this is completely fine and it is returning the correct values as theses named imports are from api, but... I can also do this:

import { API_URL, getApiUrl } from '@iarroyo/multi-part-library-webpack/path";

because all the methods from the api are inside of path... the only difference is that the value of these methods/variables are undefined... so this solution is not ideal at all, as some could try to use that methods, variables and the path library should throw an exception like invalid method...

Applied Insights

1. I've tried adding each sub-folder as external too, in that way I was thinking maybe Webpack will recognise that they are external of each other... but this doesn't help.

2. I've added the option "sideEffects": false in order to enable Tree Shaking with Webpack 4, but obviously it is not working at all. I read about of tree-shaking doesn't work transpiling the code with babel-loader but I am not pretty sure if this has been solved in webpack4 (seems like the official webpack released log says yes... but!!). In any case, I've also removed it from the webpack-config and gave it a try and tree-shaking is not working either... (I need babel-loader for my final library, so this is a requirement)

3. I've tried with DllPlugin and I've reviewed all the Webpack examples to try to get some fresh ideas, but splitting into chunks files I think is not a solution for ¯this reason:

As you could see, using the optimization.splitChunks options of webpack4 I have reusable code, but the problem is that when I am generating my final commonjs2 library I can't access my sub-libraries like

import { API_URL, getApiUrl } from '@iarroyo/multi-part-library-webpack/api";
import { getUserPath } from '@iarroyo/multi-part-library-webpack/path";

this doesn't work anymore!! :( because of now all the methods are in commons-index-path.js and commons-api-index-path.j andapi.jsandpath.js` are minified files that when I'm trying to access the methods they are throwing this error:

ReferenceError: window is not defined
    at /Users/inakiarroyo/workspace/spartancode/export-library/dist/index.js:1:1011
    at Object.<anonymous> (/Users/inakiarroyo/workspace/spartancode/export-library/dist/index.js:1:1163)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/inakiarroyo/workspace/spartancode/export-library/dev/es6-lib.js:3:25)
error An unexpected error occurred: "Command failed.

This post window is not defined when consuming webpack multi-part-library sample files could be related.

I was expecting maybe webpack will save references to my methods and I will be able to use api.js and path.js, but again :(

Possible Solutions

1. The only way I think it could work is having one package.json per "sub-folder" into the "multi-part-library-webpack" running these "children-webpack" runners in order to generated each library and have another "parent-webpack" runner which will use as webpack entry each sub file generated for each "child-webpack"... but honestly this sound like a mess solution.

2. Is really possible what I am trying to do with Webpack4 ?

3. Does anyone know if this is possible with Rollup ?

来源：https://stackoverflow.com/questions/49368215/webpack-4-multi-part-library-and-sub-libraries