Utility to find webpack settings in react-scripts and other situations
npm i -S find-webpack
const fw =const config = fw// if config is an object, we found it!
react-scripts and ejected
react-scripts assumes there is
package.json file in the current working directory, otherwise it won't load.
Loading Webpack config from
webpack.config.js might need
NODE_ENV set, and other tricks.
const fw =const config = fw
undefined if cannot load the config object.
Note: when loading the config object, this module sets
development and keeps it.
There is a utility method for cleaning up the found Webpack config for using with Cypress webpack preprocessor: removing optimization plugins, etc.
const fw =const config = fwif config// config is modified in placeconst opts =reactScripts: true // cleaning for react-scripts?coverage: true // adds babel-plugin-istanbulfw
If you are using
opts.reactScripts = true, you can also add the component test folder to be transpiled using the same options as
const componentTestFolder = ... // from Cypress config// config is modified in placeconst opts =reactScripts: true // cleaning for react-scripts?addFolderToTranspile: componentTestFoldercoverage: true // adds babel-plugin-istanbulfw
and you can add option
looseModules: true to insert Babel plugin @babel/plugin-transform-modules-commonjs to allow mocking named imports.
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 configconst fixtureFolder = ... // from Cypress config// config is modified in placeconst opts =reactScripts: true // cleaning for react-scripts?addFolderToTranspile: componentTestFolder fixtureFoldercoverage: true // adds babel-plugin-istanbulfw
Run with environment variable
DEBUG=find-webpack to see verbose logs
Gleb Bahmutov <email@example.com> © 2017
MIT - do anything with the code, but don't blame me if it does not work.