@cypress/webpack-preprocessor
    TypeScript icon, indicating that this package has built-in type declarations

    5.11.0 • Public • Published

    Cypress Webpack Preprocessor

    Cypress preprocessor for bundling JavaScript via webpack

    Installation

    npm install --save-dev @cypress/webpack-preprocessor

    This package relies on the following peer dependencies:

    • @babel/core
    • @babel/preset-env
    • babel-loader
    • webpack

    It is likely you already have these installed either directly or as a transient dependency, but if not, you will need to install them.

    npm install --save-dev @babel/core @babel/preset-env babel-loader webpack

    Compatibility

    This version is only compatible with webpack 4.x+ and Babel 7.x+.

    • If you need webpack 2 or 3 support, use @cypress/webpack-preprocessor 1.x
    • If you need Babel 6 support, use @cypress/webpack-preprocessor <= 2.x

    By default, this plugin (and all Cypress plugins) run in the Node version that is bundled with Cypress. Alternatively, you can use the Node found on your system by setting nodeVersion: system configuration option. A common use case for using the system Node are native dependencies like node-sass.

    Usage

    In your project's plugins file:

    const webpackPreprocessor = require('@cypress/webpack-preprocessor')
    
    module.exports = (on) => {
      on('file:preprocessor', webpackPreprocessor())
    }

    Examples

    Options

    Pass in options as the second argument to webpack:

    const webpackPreprocessor = require('@cypress/webpack-preprocessor')
    
    module.exports = (on) => {
      const options = {
        // send in the options from your webpack.config.js, so it works the same
        // as your app's code
        webpackOptions: require('../../webpack.config'),
        watchOptions: {},
      }
    
      on('file:preprocessor', webpackPreprocessor(options))
    }

    webpackOptions

    Object of webpack options. Just require in the options from your webpack.config.js to use the same options as your app.

    Default:

    {
      mode: 'development',
      module: {
        rules: [
          {
            test: /\.jsx?$/,
            exclude: [/node_modules/],
            use: [{
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
              },
            }],
          },
        ],
      },
    }

    Source maps are always enabled unless explicitly disabled by specifying devtool: false.

    Webpack mode is set to development if not present. You can set mode to "development", "production" or "none".

    use babelrc

    If you have a .babelrc file and would like to use it, then you must delete options.presets from the default Webpack options

    const webpackPreprocessor = require('@cypress/webpack-preprocessor')
    const defaults = webpackPreprocessor.defaultOptions
    module.exports = (on) => {
      delete defaults.webpackOptions.module.rules[0].use[0].options.presets
      on('file:preprocessor', webpackPreprocessor(defaults))
    }

    watchOptions

    Object of options for watching. See webpack's docs.

    Default: {}

    additionalEntries

    An array of file path strings for additional entries to be included in the bundle.

    By necessity, this preprocessor sets the entry point for webpack as the spec file or support file. The additionalEntries option allows you to specify more entry points in order to utilize webpack's multi-main entry. This allows runtime dependency resolution.

    Default: []

    Example:

    const webpackPreprocessor = require('@cypress/webpack-preprocessor')
    
    module.exports = (on) => {
      const options = {
        webpackOptions: require('../../webpack.config'),
        additionalEntries: ['./app/some-module.js'],
      }
    
      on('file:preprocessor', webpackPreprocessor(options))
    }

    Modifying default options

    The default options are provided as webpack.defaultOptions so they can be more easily modified.

    If, for example, you want to update the options for the babel-loader to add the stage-3 preset, you could do the following:

    const webpackPreprocessor = require('@cypress/webpack-preprocessor')
    
    module.exports = (on) => {
      const options = webpackPreprocessor.defaultOptions
      options.webpackOptions.module.rules[0].use[0].options.presets.push('babel-preset-stage-3')
    
      on('file:preprocessor', webpackPreprocessor(options))
    }

    Debugging

    You can see debug messages from this module by running with environment variable

    DEBUG=cypress:webpack
    

    You can see Webpack bundle diagnostic output (timings, chunks, sizes) by running with environment variable

    DEBUG=cypress:webpack:stats
    

    Webpack stats

    Contributing

    Use the version of Node that matches Cypress.

    Build the typescript files:

    yarn build

    Watch the typescript files and rebuild on file change:

    yarn build --watch

    Run all tests once:

    npm test

    Run tests in watch mode:

    npm run test-watch

    License

    This project is licensed under the terms of the MIT license.

    Changelog

    Changelog

    Install

    npm i @cypress/webpack-preprocessor

    DownloadsWeekly Downloads

    900,136

    Version

    5.11.0

    License

    MIT

    Unpacked Size

    32.8 kB

    Total Files

    10

    Last publish

    Collaborators

    • cypress-npm-publisher