Utility to find webpack settings in react-scripts and other situations
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.
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.
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.
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)
Run with environment variable DEBUG=find-webpack
to see verbose logs
Gleb Bahmutov <[email protected]> © 2017
MIT - do anything with the code, but don't blame me if it does not work.