InspireScript base wepback configs


2.17.04 years ago4 years agoMinified + gzip package size for @inspire-script/webpack-configs in KB


InspireScript Webpack Configs

styled with prettier

This package creates the base Webpack configuration for InspireScript projects. The exported function expects an options object with the build environment. An optional paths object can be used to customize build behavior.


npm i -D @inspire-script/webpack-configs


// webpack.config.js
const { resolve } = require('path')
const configs = require('@inspire-script/webpack-configs')

module.exports = env =>
    paths: {
      context: resolve(__dirname)

The environment variable should be declared in the webpack build script with --env:

NODE_ENV=production webpack --env=production --progress --profile --colors

Project structure

Build defaults use the following directory structure:

├─  public
│  ├─  index.html
│  └─  favicon.ico
├─  src
│  └─  index.jsx
├─  .babelrc
└─  webpack.config.js

Default paths

See #defaultpaths for the default configuration paths.

Build paths can be overriden by passing configuration paths in the configs options object:

const configs = require('@inspire-script/webpack-configs');

// Override appIndexJs to use src/main.js instead of src/index.js
module.exports = env =>
    paths: {
      publicPath: env === 'production' ? 'https://cdn.project/' : '/'

Webpack resolution

The build configures the following module resolutions for convenient shorthand imports of common project directories.

Module Usage
/src Allows relative imports from the src directory, useful for shared utilities
/src/styles Allows importing style variables directly from any SASS partial

Environment variables

The following environment variables are set by build:

Constant Usage
process.env.BABEL_ENV Set to match NODE_ENV for configuring Babel by environment
process.env.PUBLIC_PATH Set to publicPath configuration, useful for importing media and configuring CDN paths


The configurations are intended for using Sass with the following patterns:

  • Allow easy import of a base set of library styles from Node modules using the ~library/path/to/styles syntax.
  • Handle running styles through autoprefixer default configuration.
  • Allow .scss files to be required into component files. Using the .scss extension is required.
  • Allow component level namespacing of styles using a single top level local style class. The class .component is the standard class name to use for any component styles. This makes importing the localized class name into a component file consistent:
    // style.scss
    :local(.component) {
      .title {}
      .feature {}
      // etc..
    // component.jsx
    import { component } from './style.scss';
    // Importing component is standard and requires only a single import
    Having a single, standard import removes cognitive overhead for modular CSS for components.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.