#<Sawyer::Resource:0x0000564ec90917a8>

Webpack plugin to make glob imports, mono repo apps and inheritable npm packages / webpack configs

Programming language: JavaScript

License: MIT License

Tags: Code Design     Webpack     Monorepo     Code Layers     Glob Require     Glob Entries    

README

Easily split webpack projects into multiple npm packages

Feel free to test / feedback / make contribs

Check the samples here

Main features :

Split you're projects into multiple inheritable npm packages ( instead of tons of highly linked mini-modules )

• inherit & share most of the code between projects
• Include or not layers like dev tools, admin, etc
• Switch between monorepo and npm dependencies structure
• Test layers independently
• Compile in 1 step, with the source map
• Use multiple dev servers sharing the same code layers
• .. and stop creating tons of mini-mods with 60% of theirs code who just link them

Make glob imports on inherited directories ( from local or inherited packages )

import allModules from "App/modules/*.module.js";
// or
// import allModules from "App/modules/*/index.js";
// or using es6 named exports
// import AllActions from "App/store/(*)/actions.js";
// or
// import {MyCompByFileName} from "App/ui/components/(*).jsx"; // ( big import list to maintain ) no more ! :)
// or
// import {myFolder} from "App/ui/components/(**/*).jsx"; // ( walk & set myFolder/MyComp in myFolder.MyComp )

@import "App/modules/*.module.scss"; // 1 import to rulz them all

Namespace you're application

So you can stop using easily broken relative imports :

// import stuff from "../../../config"; // no more
import stuff from "App/config"; // aw yeah

Easily override inherited project

By enhancing / replacing any file

import $super from "$super";// require the 1st file with the same path name in the inherited packages

// Add some stuff or HOCs fn
export default class MyOverrided extend $super{
//...
}

@import "$super";

// do some css additions
.theSameWithA{
    backgroud : red;
}

Inherit, use & extend multiple webpack config from dependencies packages

So you can share, version, extend & switch your webpack conf & boilerplate via npm

Check the samples here

Draft doc [here](doc/DOC.MD)

Caveats ?

• Node builds hardwrite the (node_)modules relative directories locations in the build, so it rely on the layers location
• Context based webpack requires are not processed by layer-pack, they have the normal webpack behavior
• Sass imports have limitations from sass compiler, as we can't rely on relative import we need to use absolute internal path or inherit will fail ( ex: App/assets/stuff.jpg, not ./assets/stuff.jpg )
• Node builds Module resolution may eventually broke sub dependencies in some special rare cases ( can be fix by repeating related deps in the head layer or by keeping dev layer )

Improvements / todo

• Allow compiling inheritable packages code separately ( 1 layer = 1 dll )
• Pure Babel plugin to avoid compilation / webpack
• Optimisations
• Better module resolution

Alternative to

• Splitting big projects in thousands of modules
• Lerna, ...

Contributors ?

[](#)

<!-- BACKERS/ -->

Backers

Sponsors

Become a sponsor!

[](#)