FAQ.md

Frequently Asked Questions

• What does "nwb" stand for?
• How can I view the configuration nwb generates?
• How do I enable CSS Modules?
• What can I configure to reduce bundle size?

---

What does "nwb" stand for?

Shortness and ease of typing.

It uses Node.js, Webpack and Babel to build apps for the web and modules for npm.

nwb sounded like the best combination of those and was easy to type.

How can I view the configuration nwb generates?

Set the DEBUG environment variable to nwb before running to check what generated configuration looks like:

# *nix
export DEBUG=nwb
# Windows
set DEBUG=nwb

If you need to prevent server commands from clearing scrollback so you can read any unexpected error logging which is happening, set the NWB_TEST environment variable to true:

# *nix
export NWB_TEST=true
# Windows
set NWB_TEST=true

How do I enable CSS Modules?

Use nwb.config.js to configure the default css rule for your app's own styles with the necessary css-loader option parameters:

module.exports = {
  webpack: {
    rules: {
      css: {
        modules: true,
        localIdentName: (
          process.env.NODE_ENV === 'production'
            ? '[path][name]-[local]-[hash:base64:5]'
            : '[hash:base64:5]'
        )
      }
    }
  }
}

What can I configure to reduce bundle size?

If you don't need the Promise, fetch and Object.assign polyfills nwb provides by default, configuring polyfill: false will shave ~4KB off the gzipped vendor bundle.

Configuring webpack.extractText.allChunks: true will shave ~1.25KB off the gzipped vendor bundle by excluding the runtime for Webpack's style-loader.

If you're using destructuring imports with libraries like React Router and React Bootstrap (e.g. import {Button} from 'react-bootstrap'), you're bundling the whole library, instead of just the bits you need. Try configuring babel.cherryPick for these libraries to only bundle the modules you actually use.