Skip to content

Latest commit

 

History

History

webpack-config

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
lib
lib
 
 
README.md
README.md
 
 
index.js
index.js
 
 
package.json
package.json
 
 

README.md

opentrons webpack config

Shareable pieces of webpack configuration

usage

const { DEV_MODE, baseConfig, rules } = require('@opentrons/webpack-config')

DEV_MODE

webpack-config/lib/dev-mode.js

If NODE_ENV === 'development' then true, else false

// webpack.config.js
const path = require('path')
const { DEV_MODE } = require('@opentrons/webpack-config')

const JS_ENTRY = path.join(__dirname, 'src/index.js')
const OUTPUT_PATH = path.join(__dirname, 'dist')
const JS_OUTPUT_NAME = 'bundle.js'

const PORT = process.env.PORT
const PUBLIC_PATH = DEV_MODE ? `http:https://localhost:${PORT}/` : ''

module.exports = {
  // ...snip...
  output: {
    path: OUTPUT_PATH,
    filename: JS_OUTPUT_NAME,
    publicPath: PUBLIC_PATH,
  },
  // ...snip...
}

baseConfig

webpack-config/lib/base-config.js

Our base configuration is designed to be used with webpack-merge and includes:

  • target: 'web'
  • react-hot-loader/patch in entry if $NODE_ENV is development
  • mode set to development or production depending on $NODE_ENV
  • devtool set to sane development and production values
  • All loader rules in rules enabled (see below)
  • Plugins:
  • Optimization (enabled when mode === 'production'):
  • devServer set with historyApiFallback: true

To use in a project, add to your webpack.config.js:

// webpack.config.js
const path = require('path')
const merge = require('webpack-merge')
const { baseConfig } = require('@opentrons/webpack-config')

const JS_ENTRY = path.join(__dirname, 'src/index.js')
const OUTPUT_PATH = path.join(__dirname, 'dist')
const JS_OUTPUT_NAME = 'bundle.js'

module.exports = merge(baseConfig, {
  entry: [JS_ENTRY],

  output: {
    path: OUTPUT_PATH,
    filename: JS_OUTPUT_NAME,
  },
})

Then you should be ready to roll with production builds and dev server:

  • Development server
    • NODE_ENV=development webpack-dev-server --hot
  • Production build
    • NODE_ENV=production webpack --profile
  • Analyze production bundles
    • NODE_ENV=production ANALYZER=true webpack --profile

rules

webpack-config/lib/rules.js

If you just need some rules, you can import them directly.

// webpack.config.js
const merge = require('webpack-merge')
const { baseConfig, rules } = require('@opentrons/webpack-config')

module.exports = merge.strategy({ 'module.rules': 'replace' })(baseConfig, {
  module: {
    rules: [rules.js, rules.localCss],
  },
})
key loaders matches
js babel-loader *.js
globalCss css-loader, postcss-loader *.global.css
localCss css-loader (modules: true), postcss-loader !(global).css
handlebars handlebars-loader *.hbs
fonts file-loader TTF/WOFF extensions
images file-loader Image extensions

Please note

The CSS rules will act differently depending on NODE_ENV to support hot-module reloading:

  • development: uses style-loader
  • anything else (e.g. production): uses MiniCssExtractPlugin.loader