导出由webpack构建的模块

Question

I am writing 3 modules to be published as npm modules

• Admin (has core has a dependency)
• Member (has core has a dependency)
• Core

package.json in Core:

{
...
"main":"dist/bundle.js"
}

usage of core in Admin:

import core from "core"

All modules are built by webpack.

The problem is that if I use webpack to build Core , generating bundle.js , and have Admin to import bundle.js lots of libraries will be duplicated.

Eg Angular, bootstrap etc..

What I am doing now is to import the entry file src/index.js in admin

package.json in Core:

{
...
"main":"src/index.js"
}

usage of core in Admin:

import core from "core"

but webpack cannot resolve some dependencies in core correctly, for example, I have set up more than one root in webpack.config.js in core module, so that some short hand import is possible.

root: [
      path.resolve(__dirname, './src/'),
      path.resolve(__dirname, './src/directives')
]
// instead of relative path
import "../../myDirective.js" 
// I can use 
import "myDirective.js"; // where myDirective.js is under "src/directives/myDirective.js", but this fails when I try to build `admin` module.

Is there a simpler way for webpack to build npm-modules so that it is easy to import?

Core: depends on angular, bootstrap, core.js
Admin: depends on angular, bootstrap, admin.js, includes core as a module

Answer 1

It's interesting to me too. I suggest it can be done by setting webpack's library options .