hops-build-config v10.4.6

Hops Build Config

hops-build-config exposes webpack configurations for Node.js, browser and webpack-dev-server.

Installation

When you install hops-build, hops-build-config will be installed as a dependency as well - so you don't necessarily have to separately install hops-build-config.

However iff you want to use it in your app directly (for example to extend it), install it by running

npm install --save hops-build-config

Usage

Please find a list of the default configs below. You can override them to control your build using hops-config.

Available options

Custom Webpack configuration

Webpack configurations can be nasty to handle, therefore we recommend using webpack-merge if you want to extend one of the existing Webpack configurations.

The following example shows how to overwrite / extend the webpack configurations:

package.json

"name": "my-application",
"version": "1.0.0",
"hops": {
  "buildConfig": "./path-to-my-custom-webpack-config/build.js",
  "developConfig": "./path-to-my-custom-webpack-config/develop.js",
  "nodeConfig": "./path-to-my-custom-webpack-config/node.js"
}

./path-to-my-custom-webpack-config/build.js

var webpack = require('webpack');
var hopsBuildConfig = require('hops-build-config/configs/build');
var merge = require('webpack-merge');

var myCustomBuildConfig = {
  plugins: [
    new webpack.EnvironmentPlugin({
      MY_CUSTOM_ENV: 'myFallbackValue',
    }),
  ],
};

module.exports = merge.strategy(
  { plugins: 'append' },
  hopsBuildConfig,
  myCustomBuildConfig
);

Please head over to the documentation of webpack-merge to see the full list of merge strategies to help you decide which one to use.

Default configuration

hops-build-config provides a minimal, yet convenient default configuration. Furthermore, when starting a development server, source maps will be generated.

Babel

• Env preset
• React preset
• flow-react-proptypes plugin
• transform-class-properties plugin
• transform-object-rest-spread plugin
• syntax-dynamic-import plugin (used in the browser)
• dynamic-import-node plugin (used on the server)

PostCSS

PostCSS in Hops is configured to use cssnext and CSS modules by default.

Files/Assets