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

| Field | Type | Description | | --------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- | | buildConfig | String | Path to your Webpack build configuration file. Defaults to ./node_modules/hops-build-config/configs/build.js | | developConfig | String | Path to your Webpack development configuration file. Defaults to ./node_modules/hops-build-config/configs/develop.js | | nodeConfig | String | Path to your Webpack node/server-side rendering configuration file. Defaults to ./node_modules/hops-build-config/configs/node.js |

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

| File type | Loader action | | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | graphql gql | Files of these types are interpreted as GraphQL. You need to manually install Hops' GraphQL for this to work | | html svg otf ttf woff woff2 ico | Files of these types are emitted to the directory defined in assetPath | | png gif jpeg jpg webp | Same as above, except when a file of this type is smaller than 10kb in size. In that case, it will be converted to a base64-encoded data URL and embedded inline | | json | Files of this type are loaded and their content is returned | | tpl | Files of this type are parsed by _.template and their content is returned as a function. By providing such a file, you can for example override the default template provided by hops-react |