@clearc2/c2-react-config NPM

c2-react-config

Centralized project configuration for react projects.

Install

yarn add @clearc2/c2-react-config

ESLint

Install the eslint config and parser package:

yarn add --dev @clearc2/eslint-config-c2-react

Create a .eslintrc file in the root of your project with the following contents:

{
  "extends": [
    "@clearc2/c2-react"
  ]
}

Babel

Create a babel.config.js file in the root of your project with the following contents:

// <project-dir>/babel.config.js
module.exports = require('@clearc2/c2-react-config').babelConfig

PostCSS

Create a postcss.config.js file in the root your project with the following contents:

module.exports = require('@clearc2/c2-react-config').postCSSConfig

Webpack

Create a webpack.config.js file in the root of your project with the following contents:

// <project-dir>/webpack.config.js
const path = require('path')
const {webpackConfig} = require('@clearc2/c2-react-config')

module.exports = (env) => {
  env.presetDir = path.join(__dirname, 'webpack')
  env.projectDir = __dirname
  return webpackConfig(env)
}

Presets

This project contains several partial webpack configurations called "presets". These presets are merged together with the webpack-merge utility.

Presets can have both development and production versions. This is specified by the --env.mode <mode> command line argument when using webpack or webpack-dev-server. Example:

npx webpack --env mode=development

common presets apply to both development and production modes.

Included presets

`input`

Provides the entry points of the project. common preset enabled by default.

`output`

Configures the output. common preset enabled by default.

`babel`

Runs the babel-loader on .js files. common preset enabled by default.

`assets`

Handles font, images, audio files. common preset enabled by default.

`css`

Converts css to js in development. Extracts/optimizes css in production. common preset enabled by default.

`css-modules`

Enables css modules. Use <name>.module.css file naming. common preset enabled by default.

`dev-server`

Configures webpack-dev-server. development preset enabled by default.

`html`

Uses the html-webpack-plugin and uses <project-root>/src/index.html as the template. common preset enabled by default.

`source-map`

Configures the appropriate source map for development/production. common preset. Not enabled by default.

`progress`

Outputs the build progress in the cli. common preset enabled by default.

`clean`

Cleans the dist folder before builds using clean-webpack-plugin. common preset enabled by default.

`optimize`

Minify/uglify output. production preset enabled by default.

`analyzer`

Inspect bundle output with the webpack-bundle-analyzer. Not enabled by default.

Summary

Common presets:

input
output
assets
babel
css
css-modules
html
progress
clean
souce-map - Not enabled by default
analyzer - Not enabled by default

Development presets:

dev-server

Production presets:

optimize

Customizing default presets

When you created your project's webpack.config.js, you provided a presetDir. This is where you can hold your project specific configurations.

For example, if you want to change the webpack-dev-server port:

// <project-dir>/webpack/dev-server.development.js
const {webpackUtils} = require('@clearc2/c2-react-config')

module.exports = (env) => webpackUtils.extendPreset(env, 'dev-server.development',
  {
    devServer: {
      port: 8089
    }
  }
)

// you could choose not to `extendPreset` and return a completely new configuration.

Presets are functions that accept the env object and return configuration.

Adding configuration

If you have project specific configuration that applies to both development and production, add a <preset-name>.production.js file. Example:

// <project-dir>/webpack/provide.production.js
const webpack = require('webpack')

module.exports = (env) => ({
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.$': 'jquery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default']
    })
  ]
})

And then modify your webpack.config.js to customize the presets:

// <project-dir>/webpack.config.js
const path = require('path')
const {webpackConfig} = require('@clearc2/c2-react-config')
const {presets} = webpackConfig

// add "provide" preset to common presets
presets.common = presets.common.concat(['provide'])

// add analyzer to inspect bundle on production output
presets.production = presets.production.concat(['analyzer'])

module.exports = (env) => {
  env.presetDir = path.join(__dirname, 'webpack')
  env.projectDir = __dirname
  return webpackConfig(env)
}

Presets will fall back to the production version if a development version is not found in development mode.