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.

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)

Debugging

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

About

Author

Gleb Bahmutov <gleb.bahmutov@gmail.com> © 2017

• @bahmutov
• glebbahmutov.com
• blog

License

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