Skip to content

Commit

Permalink
hapi plugin to use webpack-dev-middleware
Browse files Browse the repository at this point in the history
  • Loading branch information
jchip committed Jun 21, 2018
1 parent a847667 commit 4b9554b
Show file tree
Hide file tree
Showing 10 changed files with 945 additions and 46 deletions.
62 changes: 35 additions & 27 deletions docs/chapter1/intermediate/app-archetype/env-vars.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,63 +4,71 @@ Some of the app archetype's features can be controlled by environment variables.

## General Electrode Feature Configurations

* `HTML_WEBPACK_REPORTER_OFF` - If not empty, then turns off the HTML webpack reporter
- `PORT` - The port number your app's `config/default.js` will read from to start up your app server to listen at.

* `OPTIMIZE_STATS` - If set to `true`, generates stats for the optimized webpack output bundle
- Default is `3000`

* `INSPECTPACK_DEBUG` - If set to `true`, generates stats for used with the [inspectpack] tool.
- `OPTIMIZE_STATS` - If set to `true`, generates stats for the optimized webpack output bundle

- `INSPECTPACK_DEBUG` - If set to `true`, generates stats for used with the [inspectpack] tool.

## Webpack Relate Configs

* `WEBPACK_DEV_HOST` - If defined, used as the hostname for webpack dev server.
- `WEBPACK_DEV_MIDDLEWARE` - If set to `true`, will run webpack dev server as part of your app server in dev mode.

* Default is `localhost`
- Will also force `WEBPACK_DEV_PORT` to your app's port which is set by `PORT` or `3000`.
- Default is `false`
- Webpack dev server pages can be found under these routes:

- `/_electrode_dev_/reporter` - Webpack compiled status report
- `/_electrode_dev_/cwd` - Directory view of your app's CWD
- `/_electrode_dev_/memfs` - Directory view of webpack dev middleware's virual mem fs of your compiled assets.
- `/js/` - Or your webpack `publicPath`, w/o any trailing parts will list all files under your webpack's context directory.

* `WEBPACK_DEV_PORT` - If defined, used as the port number for webpack dev server.
- The following settings will apply only if `WEBPACK_DEV_MIDDLEWARE` is not `true`, meaning a separate webpack-dev-server is used for development:

* Default is `2992`
- `HTML_WEBPACK_REPORTER_OFF` - If not empty, then turns off the HTML webpack reporter.

- `WEBPACK_DEV_HOST` - If defined, used as the hostname for webpack dev server.

* `WEBPACK_TEST_PORT` - If defined, used as the port number for webpack tests
- Default is `localhost`

* Default is `3001`
* `WEBPACK_DEV_PORT` - If defined, used as the port number for webpack dev server.

- Default is `2992`

* `WEBPACK_DEV_HTTPS` - If `true`, then use `https` for webpack dev server
- `WEBPACK_TEST_PORT` - If defined, used as the port number for webpack tests

* Default is `false`
- Default is `3001`

* `CSS_MODULE_SUPPORT` - If `false`, then disable `CSS-Modules` and `CSS-Next` support, and load as pure `CSS`. If `true`, then enable `CSS-Modules` and `CSS-Next` support, and load as `CSS-Modules + CSS-Next`.
* `WEBPACK_DEV_HTTPS` - If `true`, then use `https` for webpack dev server

* Default is `undefined`
- Default is `false`

* `CSS_MODULE_STYLUS_SUPPORT` - if `true`, then enable `stylus` support for CSS modules.
* `CSS_MODULE_SUPPORT` - If `false`, then disable `CSS-Modules` and `CSS-Next` support, and load as pure `CSS`. If `true`, then enable `CSS-Modules` and `CSS-Next` support, and load as `CSS-Modules + CSS-Next`.

* Default is `false`
- Default is `undefined`

* `CSS_MODULE_STYLUS_SUPPORT` - if `true`, then enable `stylus` support for CSS modules.

* `ENABLE_BABEL_POLYFILL` - If `true`, loads `babel-polyfill` automatically for your bundle.
- Default is `false`

* Default is `false`
- `ENABLE_BABEL_POLYFILL` - If `true`, loads `babel-polyfill` automatically for your bundle.

- Default is `false`

* `ENABLE_NODESOURCE_PLUGIN` - If `true`, automatically bundles modules for compatibility with NodeJS internal modules.

* Default is `false`
- Default is `false`
- Note that enabling this will make webpack bundle more than 100K of JS to simulate a NodeJS environment.

- `WOFF_FONT_INLINE_LIMIT` - Size limit to turn off inlining WOFF font

* `WOFF_FONT_INLINE_LIMIT` - Size limit to turn off inlining WOFF font

* Default is `1000` (bytes)

- Default is `1000` (bytes)

* `WEBPACK_PRESERVE_SYMLINKS` - If `true`, preserves symlink paths in resolve modules.

* Default is `false`


* If this is not defined, then the env [`NODE_PRESERVE_SYMLINKS`] will be considered.

- Default is `false`
- If this is not defined, then the env [`NODE_PRESERVE_SYMLINKS`] will be considered.

[`node_preserve_symlinks`]: https://nodejs.org/docs/latest-v8.x/api/cli.html#cli_node_preserve_symlinks_1
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const webpackConfigSpec = {
testPort: { env: "WEBPACK_TEST_PORT", default: 3001 },
reporterSocketPort: { env: "WEBPACK_REPORTER_SOCKET_PORT", default: 5000 },
https: { env: "WEBPACK_DEV_HTTPS", default: false },
devMiddleware: { env: "WEBPACK_DEV_MIDDLEWARE", default: false },
cssModuleSupport: { env: "CSS_MODULE_SUPPORT", default: undefined },
cssModuleStylusSupport: { env: "CSS_MODULE_STYLUS_SUPPORT", default: false },
enableBabelPolyfill: { env: "ENABLE_BABEL_POLYFILL", default: false },
Expand Down
132 changes: 132 additions & 0 deletions packages/electrode-archetype-react-app-dev/lib/module-processor.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
"use strict";

/**
* Take webpack Stat JSON output and group modules by npm packages,
* noting duplicates if there are any.
*/

const Path = require("path");

const tildaSep = "/~/";
const nmSep = "/node_modules/";

// match @namespace/packageName/file
const atModRegex = new RegExp(`([^/]+/[^/]+)/(.+)`);
// match packageName/file
const modRegex = new RegExp(`([^/]+)/(.+)`);

class ModuleProcessor {
constructor(statJson) {
this.statJson = statJson;
this.makeModulesByName();
}

makeModulesByName() {
const mbn = (this.modulesByName = {});
const obj = this.statJson;

const filterLoaders = name => name.replace(/.*!/, "");

if (obj.modules) {
obj.modules.forEach(module => {
mbn[filterLoaders(module.name)] = module;
});
} else if (obj.chunks) {
obj.chunks.forEach(chunk => {
if (chunk.modules) {
chunk.modules.forEach(module => {
mbn[filterLoaders(module.name)] = module;
});
}
});
}

return mbn;
}

_splitPathName(name) {
const pkgs = name.indexOf(tildaSep) < 0 ? [name] : name.split(tildaSep).splice(1);
const n = pkgs.pop();
const match = n.match(n.startsWith("@") ? atModRegex : modRegex);

if (match) {
return {
name: match[1],
parents: pkgs,
file: match[2]
};
} else {
return {
name,
parents: pkgs,
file: ""
};
}
}
/*
*
* {
* packageName: {
* $: {
* modules: {
* filename: {
* chunks: [],
* size: 123
* }
* },
* parents: {
* }
* }
* }
* }
* @returns {{}|*}
*/
makeModulesByPackage() {
const byPkg = (this.modulesByPackage = {});
this.totalSize = 0;
Object.keys(this.modulesByName).forEach(name => {
// Ignore "ignored" modules i.e. node shims etc.
if (name.indexOf("(ignored)") > -1) {
return;
}

const split = this._splitPathName(name);
const pkg = byPkg[split.name] || (byPkg[split.name] = { size: 0 });
const getVersion = parents => {
try {
if (split.name !== ".") {
return require(Path.resolve(parents.join(nmSep), split.name, "package.json")).version; // eslint-disable-line
} else {
return "-";
}
} catch (e) {
return "?";
}
};
const getByParents = parents => {
const parentId = `\$${parents.join(":")}`;
if (pkg[parentId]) {
return pkg[parentId];
} else {
return (pkg[parentId] = {
parents,
name: split.name,
size: 0,
version: getVersion(parents),
modules: {}
});
}
};
const byParents = getByParents(split.parents);
const module = this.modulesByName[name];
pkg.size += module.size;
byParents.size += module.size;
this.totalSize += module.size;
byParents.modules[split.file] = module;
});

return this.modulesByPackage;
}
}

module.exports = ModuleProcessor;
Loading

0 comments on commit 4b9554b

Please sign in to comment.