fuse-box / fuse-box

A blazing fast js bundler/loader with a comprehensive API :fire:

LIMITED SUPPORT. USE AT YOUR OWN RISK

A bundler that does it right

FuseBox on slack

FUSEBOX v4 is out!

Install:

npm install fuse-box --save-dev

import { fusebox } from 'fuse-box';
fusebox({
  target: 'browser',
  entry: 'src/index.tsx',
  webIndex: {
    template: 'src/index.html',
  },
  devServer: true,
}).runDev();

React demo

fuse-box's Issues

typescript importing types complains

I'm writing a eslint plugin. But having trouble importing types and interface
when importing typescript interface for plugin, the tsc is complains about missing plugins.d.ts that can be fixed with empty index.d.ts inside plugins folder.

bad character escape sequence bug

this is my file
export default typeof window === undefined;

and this is error i get

Acorn error: Bad character escape sequence (3565:26)
File: C:\projects\test\src\server\ice.js

3563  
3564  });
3565  ___scope___.file("client\utilities\is-server.js", function(exports, require, module, __filename, __dirname){ 
3566  
3567  "use strict";
3568  Object.defineProperty(exports, "__esModule", { value: true });
3569  exports.default = typeof window === "undefined";

body-parse `zlib` cache issue

when using the lib above we get this cache error
C:\projects\sso.fusebox\cache\1.3.41\C%3A%5Cprojects%5Csso.%2Fdist%2Fserver%2Fapp.js\zlib%400.0.0 was not found

Can't use babel-preset-react-app

With this config:

var fsbx = require('fuse-box')
var fuse = fsbx.FuseBox.init({
  homeDir: 'src/',
  modulesFolder: 'src',
  outFile: 'fused/static/bundle.js',
  plugins: [
    fsbx.SVGPlugin(),
    fsbx.CSSPlugin(),
    fsbx.BabelPlugin({
      config: {
        sourceMaps: true,
        presets: ['react-app'],
        plugins: [
          ['transform-react-jsx']
        ]
      }
    })
  ]
})

fuse.bundle('>index.js')

I got this error
````TypeError: unknown: Property value expected type of string but got null```

dev-server: Uncaught ReferenceError: __decorate is not defined

Updating "app.component.js" ...

app.js:formatted:1907 Uncaught ReferenceError: __decorate is not defined
    at eval (eval at <anonymous> (app.js:formatted:75646), <anonymous>:11:16)
    at Number.<anonymous> (app.js:formatted:75647)
    at p (app.js:formatted:75585)
    at w.require (app.js:formatted:75572)
    at Number.<anonymous> (app.js:formatted:58)
    at p (app.js:formatted:75585)
    at w.require (app.js:formatted:75572)
    at Number.<anonymous> (app.js:formatted:46)
    at p (app.js:formatted:75585)
    at Function.t.import (app.js:formatted:75611)
    at EventEmitter.FuseBox.pkg.___scope___.file.module.exports.connect.client.on (app.js:formatted:112)
    at EventEmitter.FuseBox.pkg.___scope___.file.EventEmitter.emit (app.js:formatted:300)
    at WebSocket.FuseBox.pkg.___scope___.file.__dirname.bindEvents.fn.client.onmessage (app.js:formatted:218)
    at WebSocket.wrapFn [as _onmessage] (app.js:formatted:2784)
    at ZoneDelegate.FuseBox.pkg.___scope___.file.ZoneDelegate.invokeTask (app.js:formatted:2009)

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: require('./app.component.html'),
    styles: [require('./app.component.css')],
})
export class AppComponent {
    name = 'Angular';
}

Error is here:
var res = new Function('__fbx__dnm__', 'exports', 'require', 'module', '__filename', '__dirname', '__root__', str);
res(true, exports, require, module, __filename, __dirname, __root__) // <--- Error is here

transpiled app.component (str)

"use strict";
var core_1 = require("@angular/core");
var AppComponent = (function () {
    function AppComponent() {
        this.name = 'Angular21';
    }
    return AppComponent;
}());
AppComponent = __decorate([
    core_1.Component({
        selector: 'my-app',
        template: require('./app.component.html'),
        styles: [require('./app.component.css')],
    })
], AppComponent);
exports.AppComponent = AppComponent;

I'm using TypeScriptHelpers plugin.

allow module aliasing

In Webpack I can have module aliases, like:

alias: { 'react-native': 'react-native-web' }

to route all require/import of 'react-native' to 'react-native-web'. Is there any way to do this in fuse-box?

list FuseBox Pakcages

we need to get list of FuseBox packages so we know if dynamic module exists before removing it

setting package name seems to ignore babel plugin output

See the screenshots attached. It looks like when I set a package name, the stage-0 / babel process is being ignored.

Travis missing babel-core peer dependency

./.travis.yml is missing peer dependency to babel-core

shimming globals like JQuery

currently any jquery plugin will not work unless we do the following

import * as jquery from 'jquery';
window.$ = jquery; 
import  'bootstrap';
import  'jsgrid';
import  'select2';

so without this line window.$ = jquery; all the above will complain.

Import issues

Real Angular code:

const routes: Routes = [
    {
        path: 'about', loadChildren: () => {
            return new Promise((resolve, reject) => {
                FuseBox.import('./about.module.js', ({FuseBox}) => {
                    const { AboutModule } = FuseBox.import('./about.module');
                    resolve(AboutModule);
                });
            });
        }
    },
];

Build script:

fuseBox.bundle('[about.module.ts]')

1. FuseBox API is included

How to get rid of it?

2. FuseBox.import() do not emit error

$async function where XMLHttpRequest is used, xmlhttp.onerror is not used when some error happens (for example 404)

How to make a-la webpack "multiple entries" scenario?

Does fuse-box support multiple entries scenario?

Like this in webpack:

// webpack config
const config = {
    entry : {
        "main": [
            path.join(SRC_PATH, "main.js")
        ],
        "admin": [
            path.join(SRC_PATH, "admin", "main.js")
        ],
        "vendor": [
            "react",
            "react-dom",
            "react-redux",
            "react-router",
            ...
        ]
    }
}

File path using backslash on windows

• operating system: Windows 10
• fuse-box version: 1.3.37
• node version: 6.9.1
• npm version: 3.10.8

After upgrading from fuse-box-1.3.33 to 1.3.37, the app builds fine, but I get runtime errors in the browser console. They are 404s, but only for my application-specific imports.

Looking at the bundled js, those file paths have backslashes instead of forward slashes.

For example:
___scope___.file("todo\todo-list.component.js", function(exports, require, module, __filename, __dirname){

Manually changing those backslashes to forward slashes seems to make things work again.

Babel transform class properties, what's wrong?

Hello. Gulp task code:

gulp.task('build', ['clean', 'prepare'], function () {
    var fuse = new fusebox.FuseBox({
        homeDir: buildDir,
        cache: true,
        outFile: path.join(buildDir, 'bundle.js'),
        plugins: [
            fusebox.CSSPlugin(),
            fusebox.BabelPlugin({
                test: /\.jsx?$/,
                config: {
                    presets: ["es2015", "stage-0", "react"],
                    plugins: [["transform-react-jsx"]]
                }
            })
        ]
    });

    return fuse.bundle('>index.js');
});

Error:

 [12:13:28] Starting 'build'...
SyntaxError: unknown: Unexpected token (13:10)
  11 | 
  12 | class App extends Component {
> 13 |     state = {
     |           ^
  14 |         isLoading: true
  15 |     }
  16 |     shouldComponentUpdate (nextProps, nextState) {
    at Parser.pp$5.raise (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:4246:13)
    at Parser.pp.unexpected (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:1627:8)
    at Parser.pp$1.parseClassProperty (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:2419:50)
    at Parser.pp$1.parseClassBody (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:2330:34)
    at Parser.pp$1.parseClass (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:2270:8)
    at Parser.pp$1.parseStatement (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:1711:19)
    at Parser.pp$1.parseBlockBody (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:2133:21)
    at Parser.pp$1.parseTopLevel (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:1645:8)
    at Parser.parse (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:1537:17)
    at parse$1 (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:6466:37)
[12:13:28] Finished 'build' after 256 ms

typescript / react

Hey guys! How should I configure fusebox so it can compile a typescript / react project?
Right now I get a buncha runtime errors in my browser with:

export const fuseBox = fsbx.FuseBox.init({
  homeDir: 'web',
  outFile: 'web/dist/app.js',
  plugins: [
    [
      fsbx.SassPlugin({ outputStyle: 'compressed' }),
      fsbx.CSSPlugin({ write: true })
    ],
    fsbx.TypeScriptHelpers,
    fsbx.JSONPlugin(),
    fsbx.HTMLPlugin({ useDefault: false }),
  ]
})

with tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "jsx": "react",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "strictNullChecks": true
  }
}

Maybe you can point me to an example?

DeprecationWarning: Calling an asynchronous function without callback is deprecated.

bug with Node compression module and require

wen i import compression module or if there is any module requires it, this is the error i get

var debug = require('debug')('compression')
                            ^

TypeError: require(...) is not a function

Alternative to webpack externals in fuse-box?

How can I do this?

module.exports = {
...
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  },
...
};

tsconfig.json suggestions

A couple of ideas that popped into my mind when trying to get FuseBox to work with TS and React (all in reference to getTypeScriptConfig())

• documenting the existance of the tsConfig option (I don't think I've seen it anywhere in the docs or the site)
• letting users specify the location of the tsconfig.json file (by default it looks in homeDir, but I think I'm not the only one that prefers to keep his tsconfig.json in project's root and not in src dir together with the sources, nor do I find it clean to add symlinks); one can work around the lack of this feature by reading the contents of tsconfig.json from a different location and feeding it to FuseBox through the tsConfig option, but I believe this to be a common enough use-case to consider adding it as a separate option
• finding some less strict way of parsing the JSON contents of the tsconfig.json than using require (afaik TS lets you keep comments in your config, require is too strict about the JSON structure for that and it would be nice to reuse the same ts config across all tools)
• (this one is more a question than an idea or an issue, mostly because I haven't had the time to dug deeper into FuseBox's code); just wanted to point out that .tsx files do not to trigger switching to typescript mode and yet my project bundles without problems (probably because of things like this and this) also I don't know the significance of ensureFolderAndExtensions but it seems to depend on tsMode and assume a .ts extension

handle .css files under node_modules

select2 npm package is not loaded

no matter what kind of import syntax we use, it just cant be loaded
only way it worked is through this

import * as select2 from 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js';

but this wont work

import * as select2 from 'select2/dist/js/select2.full.js';

How to use absolute import?

NODE_PATH seems not working

Launching fuse-box.org

It's time to go pretty and have a convenient place for docs with a search functionality!

I have moved pretty much everything to here. But I am sure there are many typos and stuff, so I am asking you guys to help me out here before updating and cleaning up the mess in the README file (i would like to keep it short)

Let's make the prettiest documentation ever!

Cheers

Throw an error if homeDir and modulesFolder points to the same directory

Hi, I'm using this config

var fsbx = require('fuse-box')
var fuse = fsbx.FuseBox.init({
  homeDir: 'src/',
  modulesFolder: 'src',
  outFile: 'fused/static/bundle.js',
  plugins: [
    fsbx.SVGPlugin(),
    fsbx.CSSPlugin(),
    fsbx.BabelPlugin({
      config: {
        sourceMaps: true,
        presets: ['stage-0', 'react'],
        plugins: [
          ['transform-react-jsx']
        ]
      }
    })
  ]
})

fuse.bundle('>index.js')

but I got this error

`Acorn error: Unexpected token (12:2)
File: /home/ubuntu/workspace/client/supplier/src/state/store.js
10
11 const reducer = combineReducers({
12 ...reducers,
13 routing: routerReducer
14 })
15
16 const isInProduction = () => (`

FuseBox.dynamic

How can we overwrite an existing dynamic module or simply remove it ?

It should be good to have a kind of option overwrite to true.
Today FuseBox.dynamic has string in first param, why not to have an object like

FuseBox.dynamic( { path: "stuff/boo.js", overwrite: true }, .....) ?

Or having a method to remove modules ? I will be more in this way because in a bundle, you may have many modules that you are lazy load them and release when it's not necessary to save memory :-)

Better angular application required (demo). HELP

Hey guys,
It would be nice to have a proper ng2 TODO app (anything but HelloWorld) based on Fuse? Existing examples are outdated (angular changed their APIs) and I cannot find a single sane ng2 demo app.

I am sure many of angular developers have something to share ;-)

Cheers

FuseBox.dynamic path

in the doc

FuseBox.dynamic("stuff/boo.js", "module.exports = {hello : 'dynamic'}; require('./foo')")

In the doc, it said stuff/boo.js to get the module but this doesn't work, the correct syntax is (after tested):

require("~/stuff/boo.js") or require("~/stuff/boo") 

Typed CSS Modules

I'm interested in using Typed CSS Modules with FuseBox. What's the best way of doing it? I tried making it work with Webpack but there was lots of issues

Dev server issues

1. Expose server instance

This need need graceful shutdown and to subscribe on events like close, etc.

gulp.task('server:dev', (done) => {
    const server = fuseBox.devServer('>main.ts');
    server.on('close', () => done);
});

2. Allow to add middlewares

The most used middlewares for dev server are:

1. Proxy
2. connect-history-api-fallback (Angular2)

Difference between test and context.allowExtension()

Hi,

Thanks for the awesome tool! I've been playing writing some basic plugins and I'm not 100% sure here. What is the difference between setting test in the plugin constructor and context.allowExtension() inside of of the init() method?

Many Thanks.

Maximum call stack size exceeded with Babel

Hi,

I wanted to make a switch from Webpack to FuseBox with Gulp. My previous .babelrc file looked like this:

{
  "presets": ["es2015", "stage-0", "react"]
}

So I though I want this also to be in my FuseBox config. My gulpfile is as follows:

var fuse = new fusebox.FuseBox({
  homeDir:   'app/js',
  sourceMap: {
    bundleReference: "index.js.map",
    outFile:         "./dist/index.js.map",
  },
  cache:     true,
  outFile:   'dist/index.js',
  plugins:   [
    fusebox.BabelPlugin({
      config: {
        sourceMaps: true,
        presets: ["es2015", "stage-0", "react"],
        plugins: [
          ["transform-react-jsx"]
        ]
      }
    })
  ]
});

gulp.task('js', function () {
  return fuse.bundle('>index.js');
});

When I run gulp js, I am getting

➜  lesnik git:(fuse) ✗ gulp js
[11:34:50] Using gulpfile ~/Sites/lesnik/gulpfile.js
[11:34:50] Starting 'js'...
RangeError: Maximum call stack size exceeded
    at pre (/Users/tomekbuszewski/Sites/lesnik/node_modules/fuse-box/dist/commonjs/FileAnalysis.js:53:18)
    at visit (/Users/tomekbuszewski/Sites/lesnik/node_modules/ast-traverse/ast-traverse.js:16:19)
    at visit (/Users/tomekbuszewski/Sites/lesnik/node_modules/ast-traverse/ast-traverse.js:32:21)
    at visit (/Users/tomekbuszewski/Sites/lesnik/node_modules/ast-traverse/ast-traverse.js:32:21)
    at visit (/Users/tomekbuszewski/Sites/lesnik/node_modules/ast-traverse/ast-traverse.js:32:21)
    at visit (/Users/tomekbuszewski/Sites/lesnik/node_modules/ast-traverse/ast-traverse.js:32:21)
    at visit (/Users/tomekbuszewski/Sites/lesnik/node_modules/ast-traverse/ast-traverse.js:32:21)
    at visit (/Users/tomekbuszewski/Sites/lesnik/node_modules/ast-traverse/ast-traverse.js:32:21)
    at visit (/Users/tomekbuszewski/Sites/lesnik/node_modules/ast-traverse/ast-traverse.js:29:25)
    at visit (/Users/tomekbuszewski/Sites/lesnik/node_modules/ast-traverse/ast-traverse.js:29:25)

I tried using preset latest, but then spread operators are mistreated:

[0] [11:31:08] Starting 'js'...
[0] SyntaxError: unknown: Unexpected token (9:15)
[0]    7 |   switch (action.type) {
[0]    8 |     case 'ADD_POST':
[0] >  9 |       return { ...state, posts: [ ...state.posts, action.payload ] };

I am kinda stuck with this one. Any ideas?

Incorrect resolving paths (Angular)

Version: 1.3.51

import { TestBed } from '@angular/core/testing';

Actual: node_modules\@angular\core\testing\index.js
Expected: node_modules\@angular\core\bundles\core-testing.umd.js
Because contents of node_modules\@angular\core\testing\package.json

{"main": "../bundles/core-testing.umd.js"} 

TypeScriptHelpers does not work

config

    const fuseBox = fsbx.FuseBox.init({
        homeDir: 'src/',
        sourceMap: {
            bundleReference: "sourcemaps.js.map",
            outFile: "./build/sourcemaps.js.map",
        },
        tsConfig: require('./tsconfig.json'),
        cache: true,
        outFile: './build/app.js',
        plugins: [
            fsbx.TypeScriptHelpers(),
            fsbx.CSSPlugin({ write: true }),
            fsbx.HTMLPlugin({ useDefault: false }),
        ]
    });

version: 1.3.42
Error:

app.js:207 Uncaught TypeError
    at Object.decorate (app.js:207)
    at app.js:61515
    at Number.<anonymous> (app.js:3122)
    at v (app.js:61537)
    at w.require (app.js:61537)
    at INTERNAL_BROWSER_PLATFORM_PROVIDERS (app.js:2949)
    at Number.<anonymous> (app.js:2952)
    at v (app.js:61537)
    at w.require (app.js:61537)
    at Number.<anonymous> (app.js:39)
    at v (app.js:61537)
    at Function.n.import (app.js:61537)
    at app.js:61534
    at app.js:61537

Test repo https://github.com/unlight/angular2-blank-project/tree/fuse-box

When I disable TypeScriptHelpers plugin and set "noEmitHelpers": false,
everything is working.

Cannot read property 'name' of undefined

I just had an issue:

After reading the error, it looked like an issue with the cache so I deleted the .fusebox folder and it worked fine.

Problem with re-exporting modules and node-style paths

When using node-style module paths (by dropping the index.(j|t)sx? suffix) fuse-box seems not to bundle the entire project.

It is worth noting that even when explicitly targeting the index files with the extension the project still won't bundle correctly, as the .tsx files won't get bundled unless they are also provided with the extension.

Unfortunately that causes the ts compiler to fail (this does not affect the bundling process ofc), as it does not accept extensions in import paths:
src/app.tsx(4,41): error TS2691: An import path cannot end with a '.ts' extension. Consider importing './components/index' instead.

My first guess regarding at least part of the issue would be .tsx files not triggering the tsMode, as mentioned in #45 ?

Example: https://github.com/zgredzik/fusebox-reexport-test

fuse-box logs:

└── default (3 files,  614 Bytes)
      app.tsx
      components.js <--
      components/componentA.js <--

    --------------
    Size: 614 Bytes
    Time: 329ms
    --------------

logs with explicitly targetting index.ts (https://github.com/zgredzik/fusebox-reexport-test/tree/fixed-index-paths):

└── default (7 files,  1.8 kB)
      app.tsx
      components/index.ts
      components/componentA/index.ts
      components/componentA/componentA.js <--
      components/componentA/componentA2.js <--
      components/componentB/index.ts
      components/componentB/componentB.js <--

    --------------
    Size: 1.8 kB
    Time: 344ms
    --------------

logs with extensions provided in all import paths (https://github.com/zgredzik/fusebox-reexport-test/tree/fixed-all-paths):

└── default (7 files,  4.6 kB)
      app.tsx
      components/index.ts
      components/componentA/index.ts
      components/componentA/componentA.tsx
      components/componentA/componentA2.tsx
      components/componentB/index.ts
      components/componentB/componentB.tsx

    --------------
    Size: 4.6 kB
    Time: 415ms
    --------------

inline styles need to be loaded before js files

i dont know if it is there or not but the below does not work, what i mean is that styles are loaded but only after app import is executed.

import './styles/main.scss';
import  './app';

Typescript react support

Right now this strips everything react
eg
source index.tsx

import * as React from 'react';
import { render } from 'react-dom';
import App from './App';

const props = { store: 'someStore' };

render(<App />, document.getElementById('root'));

error

Acorn error: Unterminated regular expression (4:20)
File: /home/mohan500/project/git/github.com/react-example/src.ts/index.tsx

2  var react_dom_1 = require("react-dom");
3  var props = { store: 'someStore' };
4  react_dom_1.render(/>, document.getElementById('root')););
5  

A better way to store plugins

We started having more and more and plugins, and it makes sense to have a different approach to storing them. Will be happy to hear your ideas on how and why.
@Shepless suggests monorepo for example. I don't mind it, but there are downsides to it.

What's on your mind?

Direct export throws SyntaxError

when you export from another module like export App from './App' throws SyntaxError

SyntaxError: Unexpected token (1:7)
    at Parser.pp$4.raise (/home/mohan500/project/git/github.com/react-example/node_modules/acorn/dist/acorn.js:2431:15)
    at Parser.pp.unexpected (/home/mohan500/project/git/github.com/react-example/node_modules/acorn/dist/acorn.js:616:10)
    at Parser.pp.expect (/home/mohan500/project/git/github.com/react-example/node_modules/acorn/dist/acorn.js:610:28)
    at Parser.pp$1.parseExportSpecifiers (/home/mohan500/project/git/github.com/react-example/node_modules/acorn/dist/acorn.js:1324:10)
    at Parser.pp$1.parseExport (/home/mohan500/project/git/github.com/react-example/node_modules/acorn/dist/acorn.js:1260:30)
    at Parser.pp$1.parseStatement (/home/mohan500/project/git/github.com/react-example/node_modules/acorn/dist/acorn.js:754:71)
    at Parser.parseStatement (/home/mohan500/project/git/github.com/react-example/node_modules/acorn-es7/acorn-es7.js:72:28)
    at Parser.pp$1.parseTopLevel (/home/mohan500/project/git/github.com/react-example/node_modules/acorn/dist/acorn.js:658:25)
    at Parser.parse (/home/mohan500/project/git/github.com/react-example/node_modules/acorn/dist/acorn.js:528:17)
    at Object.parse (/home/mohan500/project/git/github.com/react-example/node_modules/acorn/dist/acorn.js:3309:39)

Fork

Fusebox doesn't work since node 6.4.0 ~ 7.4.0

I got working on node v6.3.1, when I switching to 6.4.0+
Bundle result is app.js size 5.1k (empty)

Uncaught TypeError: globalPaths.forEach is not a function on client

How to writing tests also with typescript or es6?

[SassPlugin] problem with resolving relative paths when `includePaths` option is explicitly specified

When provided with an input instead of a path to a file (as is the current way of SassPlugin), node-sass requires the path pointing to the original file (from which the contents have been used as the input data) to be among the includePaths in order to be able to resolve relative include paths.

The problem is that when someone wants to specify additional includePaths, Object.assign() will completely overwrite the default value that includes the currently processed file's absolute path.

I think the includePaths should have the file's location implicitly appended as I don't imagine adding an additional includePaths entry for every single .scss in my project that has a relative import.

If anyone sees a problem with always adding file.info.absDir to the list of include paths, then I guess it could be available as a plugin configuration option?

Ability to load all modules in folder

here is one case we are facing on a project,

we have 100 files in folder, and each has default export, so we need those exports to be added to an array when loaded, the current workflow is to have 100 import statements! then after import we add each module manually to the array.

but FuseBox has awesome Lazy Loading feature, so if we can do the following it would be awesome
FuseBox.import('somePath/myModules/*') or require ('somePath/myModules/*')

as we know when usingFuseBox, require or FuseBox.import has second param as callback, so we can do this

let dynamicModules = [];
FuseBox.import ('somePath/myModules/*',function(results){
    results.forEach(function(module){
        dynamicModules.push(module.default);
    })
})

100 lines of code can be shortened to 5 lines!!!

i also think that the path should respect globbing pattern, as the target folder may have CSS, image, etc... but we are only interested in loading JS files.

code splitting

Does fuse-box provide any code splitting capabilities? If not, is it planned? Is it compatible with webpack's?

PM2 cant be bundled

hi i have this code

let pmx = require('pmx').init({
    http: true, // HTTP routes logging (default: true)
    ignore_routes: [/socket\.io/, /notFound/], // Ignore http routes with this pattern (Default: [])
    errors: true, // Exceptions loggin (default: true)
    custom_probes: true, // Auto expose JS Loop Latency and HTTP req/s as custom metrics
    network: true, // Network monitoring at the application level
    ports: true  // Shows which ports your app is listening on (default: false)
});

and i get this error

Cannot read property 'slice' of undefined
Profiling.detectV8Profiler = function(cb) {
  var require_paths = require.main.paths.slice();

the code above is required for app logging!

Importing raw css content to angular component

Given:

// main.ts
import './app.css';
// app.component.ts
@Component({
    selector: 'my-app',
    template: require('./app.component.html'),
    styles: [require('./app.component.css')],
})
export class AppComponent {
    name = 'Angular';
}

To achieve my goal, need to satisfy following conditions:
1. global css file app.css with common stuff
2. css component files which will be embedded to component class styles: [require('./app.component.css')],
3. css component files must be stored near app.component.ts (e.g. app.component.css)

1. Brute solution

CSSPlugin({ write: true }),

• Condition 2 is not satisfied
• Hot reload for css doesn't work

CSSPlugin({ write: false }),

• Condition 1 is not satisfied
• require('./app.component.css') is not returns raw content

2. Chain solution

[
    /\.component\.css$/,
    RawPlugin({}),
],
[
    /\.css$/,
    CSSPlugin({ write: true }),
],

• Hot reload for css doesn't work
• When I changing app.component.css I see in console Source changed for app.css (which is not true)

Welcome to the bundler world!

Hi, Im Sean, one of the webpack maintainers.

Just wanted to stop by and say hello, and welcome to the community!!

This project looks like it has a lot of great ideas! Things like first-class TypeScript parse support are features we would love to take advantage of in the future!!! It's great to see others challenging the status quo and pushing tooling to the limits. If there are ever any techniques or tools that you would love to collaborate on, just drop by our org and let us know.

With ❤️ from the webpack team!

Fusebox is caching local .scss files

i noticed that if i change any of my local .scss files i cant see changes until i delete the fuse cache folder.

Banner Plugin

Can we add a BannerPlugin, I'm writing a Greasemonkey / Tampermonkey script and // ==UserScript== has to be at top of the file

https://webpack.github.io/docs/list-of-plugins.html#bannerplugin

Or is there another way to do this with Fusebox?