1 | # Cypress Webpack Preprocessor [![CircleCI](https://circleci.com/gh/cypress-io/cypress-webpack-preprocessor.svg?style=svg)](https://circleci.com/gh/cypress-io/cypress-webpack-preprocessor) [![semantic-release][semantic-image] ][semantic-url]
|
2 |
|
3 | Cypress preprocessor for bundling JavaScript via webpack
|
4 |
|
5 | ## Installation
|
6 |
|
7 | Requires [Node](https://nodejs.org/en/) version 6.5.0 or above.
|
8 |
|
9 | ```sh
|
10 | npm install --save-dev @cypress/webpack-preprocessor
|
11 | ```
|
12 |
|
13 | ## Usage
|
14 |
|
15 | In your project's [plugins file](https://on.cypress.io/guides/guides/plugins.html):
|
16 |
|
17 | ```javascript
|
18 | const webpack = require('@cypress/webpack-preprocessor')
|
19 |
|
20 | module.exports = (on) => {
|
21 | on('file:preprocessor', webpack())
|
22 | }
|
23 | ```
|
24 |
|
25 | ## Options
|
26 |
|
27 | Pass in options as the second argument to `webpack`:
|
28 |
|
29 | ```javascript
|
30 | const webpack = require('@cypress/webpack-preprocessor')
|
31 | module.exports = (on) => {
|
32 | const options = {
|
33 | // send in the options from your webpack.config.js, so it works the same
|
34 | // as your app's code
|
35 | webpackOptions: require('../../webpack.config'),
|
36 | watchOptions: {},
|
37 | }
|
38 |
|
39 | on('file:preprocessor', webpack(options))
|
40 | }
|
41 | ```
|
42 |
|
43 | ### webpackOptions
|
44 |
|
45 | Object of webpack options. Just `require` in the options from your `webpack.config.js` to use the same options as your app.
|
46 |
|
47 | **Default**:
|
48 |
|
49 | ```javascript
|
50 | {
|
51 | module: {
|
52 | rules: [
|
53 | {
|
54 | test: /\.jsx?$/,
|
55 | exclude: [/node_modules/],
|
56 | use: [{
|
57 | loader: 'babel-loader',
|
58 | options: {
|
59 | presets: [
|
60 | 'babel-preset-env',
|
61 | 'babel-preset-react',
|
62 | ],
|
63 | },
|
64 | }],
|
65 | },
|
66 | ],
|
67 | },
|
68 | }
|
69 | ```
|
70 |
|
71 | ### watchOptions
|
72 |
|
73 | Object of options for watching. See [webpack's docs](https://webpack.github.io/docs/node.js-api.html#compiler).
|
74 |
|
75 | **Default**: `{}`
|
76 |
|
77 | ## Modifying default options
|
78 |
|
79 | The default options are provided as `webpack.defaultOptions` so they can be more easily modified.
|
80 |
|
81 | If, for example, you want to update the options for the `babel-loader` to add the [stage-3 preset](https://babeljs.io/docs/plugins/preset-stage-3/), you could do the following:
|
82 |
|
83 | ```javascript
|
84 | const webpack = require('@cypress/webpack-preprocessor')
|
85 |
|
86 | module.exports = (on) => {
|
87 | const options = webpack.defaultOptions
|
88 | options.webpackOptions.module.rules[0].use[0].options.presets.push('babel-preset-stage-3')
|
89 |
|
90 | on('file:preprocessor', webpack(options))
|
91 | }
|
92 | ```
|
93 |
|
94 | ## Compatibility
|
95 |
|
96 | * webpack: 4.x+ (use `cypress-webpack-preprocessor` 1.x if you need webpack 2 or 3 support)
|
97 | * node: 8.2.1 minimum (aligned with Cypress 2.x)
|
98 |
|
99 | ## Contributing
|
100 |
|
101 | Run all tests once:
|
102 |
|
103 | ```shell
|
104 | npm test
|
105 | ```
|
106 |
|
107 | Run tests in watch mode:
|
108 |
|
109 | ```shell
|
110 | npm run test-watch
|
111 | ```
|
112 |
|
113 | ## License
|
114 |
|
115 | This project is licensed under the terms of the [MIT license](/LICENSE.md).
|
116 |
|
117 | [semantic-image]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
|
118 | [semantic-url]: https://github.com/semantic-release/semantic-release
|