Nylon Pendulum Movement

    find-webpack

    2.2.1 • Public • Published

    find-webpack semantic-release Build status

    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

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

    License

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

    Install

    npm i find-webpack

    DownloadsWeekly Downloads

    155,161

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    21.5 kB

    Total Files

    8

    Last publish

    Collaborators

    • bahmutov