find-webpack

Utility to find webpack settings in react-scripts and other situations

Use

npm i -S find-webpack

const fw = require('find-webpack')
const config = fw.getWebpackOptions()
// if config is an object, we found it!

Works with react-scripts and ejected react-scripts. Uses development environment.

Note: react-scripts assumes there is package.json file in the current working directory, otherwise it won't load.

tryLoadingWebpackConfig

Loading Webpack config from webpack.config.js might need NODE_ENV set, and other tricks.

const fw = require('find-webpack')
const config = fw.tryLoadingWebpackConfig('path/to/webpack.config.js')

Returns undefined if cannot load the config object.

Note: when loading the config object, this module sets process.env.BABEL_ENV and process.env.NODE_ENV to development and keeps it.

Cypress

There is a utility method for cleaning up the found Webpack config for using with Cypress webpack preprocessor: removing optimization plugins, etc.

const fw = require('find-webpack')
const config = fw.getWebpackOptions()
if (config) {
  // config is modified in place
  const opts = {
    reactScripts: true, // cleaning for react-scripts?
    coverage: true, // adds babel-plugin-istanbul
  }
  fw.cleanForCypress(opts, config)
}

If you are using opts.reactScripts = true, you can also add the component test folder to be transpiled using the same options as src folder.

const componentTestFolder = ... // from Cypress config
// config is modified in place
const opts = {
  reactScripts: true, // cleaning for react-scripts?
  addFolderToTranspile: componentTestFolder,
  coverage: true // adds babel-plugin-istanbul
}
fw.cleanForCypress(opts, config)

and you can add option looseModules: true to insert Babel plugin @babel/plugin-transform-modules-commonjs to allow mocking named imports.

addFolderToTranspile

This setting could be an individual folder or a list of folders. For example, you might want to transpile component test folder and fixture folder to allow requiring fixture files from tests.

const componentTestFolder = ... // from Cypress config
const fixtureFolder = ... // from Cypress config
// config is modified in place
const opts = {
  reactScripts: true, // cleaning for react-scripts?
  addFolderToTranspile: [componentTestFolder, fixtureFolder],
  coverage: true // adds babel-plugin-istanbul
}
fw.cleanForCypress(opts, config)

Debugging

Run with environment variable DEBUG=find-webpack to see verbose logs

About

Author

Gleb Bahmutov <[e-mail]> © 2017

• @bahmutov
• glebbahmutov.com
• blog

License

MIT - do anything with the code, but don't blame me if it does not work.