node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


InspireScript webpack Base Configuration

Prettier Commitizen

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 injected by the build:

Constant Usage
process.env.NODE_ENV Defaults to match NODE_ENV, used by Babili to strip code in prod builds
process.env.DEBUG Defaults to false, can be used for adding detailed logging in dev environment
process.env.PUBLIC_PATH Set to publicPath configuration, useful for importing media and configuring CDN paths


Changes to the build can be tested using the scripts/prepare-test.js module. This will copy the template project into the root directory and update the repo package with the additional project dependencies. Install the dependencies and update the webpack config to point to this repo and the test: commands should work.

node scripts/preprepare-test.js
npm install
// webpack.config.js
const createBaseConfigs = require('./index')
npm run test:start
npm run test:build




Contributing 😃

All contributions are greatly appreciated 👍🎉. To contribute please: