Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
find-webpack
Advanced tools
Utility to find webpack settings in react-scripts and other situations
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 <gleb.bahmutov@gmail.com> © 2017
MIT - do anything with the code, but don't blame me if it does not work.
FAQs
Utility to find webpack settings in react-scripts and other situations
The npm package find-webpack receives a total of 49,079 weekly downloads. As such, find-webpack popularity was classified as popular.
We found that find-webpack demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.