Package Exports

find-webpack

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (find-webpack) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

License

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