feat: set webpack mode to development if missing (#87)

Author: bahmutov

README.md

@@ -75,6 +75,7 @@ Object of webpack options. Just `require` in the options from your `webpack.conf
 
 ```javascript
 {
+  mode: 'development',
   module: {
     rules: [
       {
@@ -92,7 +93,9 @@ Object of webpack options. Just `require` in the options from your `webpack.conf
 }
 ```
 
-Source maps are always enabled unless explicitly disabled by specifying `devtool: false`.
+Source maps are **always enabled** unless explicitly disabled by specifying `devtool: false`.
+
+Webpack [mode](https://webpack.js.org/configuration/mode/) is set to `development` if not present. You can set `mode` to "development", "production" or "none".
 
 ### use babelrc
 
@@ -172,6 +175,18 @@ DEBUG=cypress:webpack:stats
 
 Use the [version of Node that matches Cypress](https://github.com/cypress-io/cypress/blob/develop/.node-version).
 
+Build the typescript files:
+
+```shell
+yarn build
+```
+
+Watch the typescript files and rebuild on file change:
+
+```shell
+yarn build --watch
+```
+
 Run all tests once:
 
 ```shell

cypress/plugins/index.js

@@ -12,14 +12,11 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
-const webpack = require('../../')
-
-// const webpackOptions = require('@packages/runner/webpack.config.ts').default
+const webpackPreprocessor = require('../../')
 
 /**
  * @type {Cypress.PluginConfig}
  */
 module.exports = (on) => {
-  // on('file:preprocessor', webpack({ webpackOptions }))
-  on('file:preprocessor', webpack({ }))
+  on('file:preprocessor', webpackPreprocessor())
 }

index.ts

@@ -1,15 +1,13 @@
-import * as webpack from 'webpack'
 import * as Promise from 'bluebird'
 import * as events from 'events'
-
+import * as _ from 'lodash'
+import * as webpack from 'webpack'
 import { createDeferred } from './deferred'
 
 const path = require('path')
 const debug = require('debug')('cypress:webpack')
 const debugStats = require('debug')('cypress:webpack:stats')
 
-const stubbableRequire = require('./stubbable-require')
-
 type FilePath = string
 
 // bundle promises from input spec filename to output bundled file paths
@@ -21,16 +19,17 @@ const getDefaultWebpackOptions = (): webpack.Configuration => {
   debug('load default options')
 
   return {
+    mode: 'development',
     module: {
       rules: [
         {
           test: /\.jsx?$/,
           exclude: [/node_modules/],
           use: [
             {
-              loader: stubbableRequire.resolve('babel-loader'),
+              loader: 'babel-loader',
               options: {
-                presets: [stubbableRequire.resolve('@babel/preset-env')],
+                presets: ['@babel/preset-env'],
               },
             },
           ],
@@ -123,34 +122,45 @@ const preprocessor: WebpackPreprocessor = (options: PreprocessorOptions = {}): F
       return bundles[filePath]
     }
 
-    // user can override the default options
-    let webpackOptions: webpack.Configuration = options.webpackOptions || getDefaultWebpackOptions()
-    const watchOptions = options.watchOptions || {}
+    const defaultWebpackOptions = getDefaultWebpackOptions()
 
-    debug('webpackOptions: %o', webpackOptions)
-    debug('watchOptions: %o', watchOptions)
-
-    const entry = [filePath].concat(options.additionalEntries || [])
     // we're provided a default output path that lives alongside Cypress's
     // app data files so we don't have to worry about where to put the bundled
     // file on disk
     const outputPath = path.extname(file.outputPath) === '.js'
       ? file.outputPath
       : `${file.outputPath}.js`
 
-    // we need to set entry and output
-    webpackOptions = Object.assign(webpackOptions, {
+    const entry = [filePath].concat(options.additionalEntries || [])
+
+    const watchOptions = options.watchOptions || {}
+
+    // user can override the default options
+    const webpackOptions: webpack.Configuration = _
+    .chain(options.webpackOptions)
+    .defaultTo(defaultWebpackOptions)
+    .defaults({
+      mode: defaultWebpackOptions.mode,
+    })
+    .assign({
+      // we need to set entry and output
       entry,
       output: {
         path: path.dirname(outputPath),
         filename: path.basename(outputPath),
       },
     })
+    .tap((opts) => {
+      if (opts.devtool !== false) {
+        debug('setting devtool to inline-source-map')
 
-    if (webpackOptions.devtool !== false) {
-      webpackOptions.devtool = 'inline-source-map'
-    }
+        opts.devtool = 'inline-source-map'
+      }
+    })
+    .value() as any
 
+    debug('webpackOptions: %o', webpackOptions)
+    debug('watchOptions: %o', watchOptions)
     debug(`input: ${filePath}`)
     debug(`output: ${outputPath}`)
 
@@ -277,8 +287,7 @@ const preprocessor: WebpackPreprocessor = (options: PreprocessorOptions = {}): F
   }
 }
 
-// provide a clone of the default options, lazy-loading them
-// so they aren't required unless the user utilizes them
+// provide a clone of the default options
 Object.defineProperty(preprocessor, 'defaultOptions', {
   get () {
     debug('get default options')

package.json

@@ -14,12 +14,12 @@
     "secure": "nsp check",
     "semantic-release": "semantic-release",
     "size": "npm pack --dry",
-    "pretest": "npm run lint && npm run build",
-    "test": "npm run test-unit && npm run test-e2e",
+    "pretest": "yarn lint && yarn build",
+    "test": "yarn test-unit && yarn test-e2e",
     "test-debug": "node --inspect --debug-brk ./node_modules/.bin/_mocha",
     "test-e2e": "mocha test/e2e/*.spec.js",
     "test-unit": "mocha test/unit/*.spec.js",
-    "test-watch": "chokidar '*.js' 'test/unit/*.js' -c 'npm run test-unit'",
+    "test-watch": "yarn test-unit & chokidar '*.js' 'test/unit/*.js' -c 'yarn test-unit'",
     "types": "tsc --noEmit"
   },
   "husky": {
@@ -29,7 +29,8 @@
   },
   "dependencies": {
     "bluebird": "3.7.1",
-    "debug": "4.1.1"
+    "debug": "4.1.1",
+    "lodash": "4.17.15"
   },
   "devDependencies": {
     "@babel/core": "^7.0.1",

stubbable-require.ts

@@ -43,7 +43,12 @@ describe('webpack preprocessor - e2e', () => {
   })
 
   it('correctly preprocesses the file', () => {
-    return preprocessor()(file).then(() => {
+    const options = preprocessor.defaultOptions
+
+    // our snapshot is minified
+    options.webpackOptions.mode = 'production'
+
+    return preprocessor(options)(file).then(() => {
       snapshot(fs.readFileSync(outputPath).toString())
     })
   })

test/e2e/compilation.spec.js

@@ -4,7 +4,7 @@ const glob = require('fast-glob')
 
 describe('can test', async () => {
   // runs every test in cypress/tests/e2e as its own test
-  // the comment above the test will determince the assertion on the results
+  // the comment above the test will determine the assertion on the results
   glob.sync(path.join(__dirname, '../../cypress/tests/e2e/**/*'))
   .map((v) => {
     const filename = path.relative(process.cwd(), v)

test/e2e/e2e.spec.js

@@ -17,7 +17,6 @@ mockery.enable({
 mockery.registerMock('webpack', webpack)
 
 const preprocessor = require('../../dist/index')
-const stubbableRequire = require('../../dist/stubbable-require')
 
 describe('webpack preprocessor', function () {
   beforeEach(function () {
@@ -107,27 +106,33 @@ describe('webpack preprocessor', function () {
 
       it('specifies the entry file', function () {
         return this.run().then(() => {
-          expect(webpack.lastCall.args[0].entry).to.eql([this.file.filePath])
+          expect(webpack).to.be.calledWithMatch({
+            entry: [this.file.filePath],
+          })
         })
       })
 
       it('includes additional entry files', function () {
         return this.run({
           additionalEntries: ['entry-1.js', 'entry-2.js'],
         }).then(() => {
-          expect(webpack.lastCall.args[0].entry).to.eql([
-            this.file.filePath,
-            'entry-1.js',
-            'entry-2.js',
-          ])
+          expect(webpack).to.be.calledWithMatch({
+            entry: [
+              this.file.filePath,
+              'entry-1.js',
+              'entry-2.js',
+            ],
+          })
         })
       })
 
       it('specifies output path and filename', function () {
         return this.run().then(() => {
-          expect(webpack.lastCall.args[0].output).to.eql({
-            path: 'output',
-            filename: 'output.js',
+          expect(webpack).to.be.calledWithMatch({
+            output: {
+              path: 'output',
+              filename: 'output.js',
+            },
           })
         })
       })
@@ -143,17 +148,53 @@ describe('webpack preprocessor', function () {
         })
       })
 
-      it('enables inline source maps', function () {
-        return this.run().then(() => {
-          expect(webpack.lastCall.args[0].devtool).to.equal('inline-source-map')
+      describe('devtool', function () {
+        it('enables inline source maps', function () {
+          return this.run().then(() => {
+            expect(webpack).to.be.calledWithMatch({
+              devtool: 'inline-source-map',
+            })
+          })
+        })
+
+        it('does not enable inline source maps when devtool is false', function () {
+          const options = { webpackOptions: { devtool: false } }
+
+          return this.run(options).then(() => {
+            expect(webpack).to.be.calledWithMatch({
+              devtool: false,
+            })
+          })
+        })
+
+        it('always sets devtool even when mode is "production"', function () {
+          const options = { webpackOptions: { mode: 'production' } }
+
+          return this.run(options).then(() => {
+            expect(webpack).to.be.calledWithMatch({
+              devtool: 'inline-source-map',
+            })
+          })
         })
       })
 
-      it('does not enable inline source maps when devtool is false', function () {
-        const options = { webpackOptions: { devtool: false } }
+      describe('mode', function () {
+        it('sets mode to development by default', function () {
+          return this.run().then(() => {
+            expect(webpack).to.be.calledWithMatch({
+              mode: 'development',
+            })
+          })
+        })
 
-        return this.run(options).then(() => {
-          expect(webpack.lastCall.args[0].devtool).to.be.false
+        it('follows user mode if present', function () {
+          const options = { webpackOptions: { mode: 'production' } }
+
+          return this.run(options).then(() => {
+            expect(webpack).to.be.calledWithMatch({
+              mode: 'production',
+            })
+          })
         })
       })
 
@@ -178,7 +219,7 @@ describe('webpack preprocessor', function () {
         const options = { watchOptions: { poll: true } }
 
         return this.run(options).then(() => {
-          expect(this.compilerApi.watch.lastCall.args[0]).to.eql({
+          expect(this.compilerApi.watch).to.be.calledWith({
             poll: true,
           })
         })
@@ -252,26 +293,9 @@ describe('webpack preprocessor', function () {
         const options = { webpackOptions: { module: { rules: [] } } }
 
         return this.run(options).then(() => {
-          expect(webpack.lastCall.args[0].module).to.equal(options.webpackOptions.module)
-        })
-      })
-
-      it('requires babel dependencies when default options are used', function () {
-        sinon.spy(stubbableRequire, 'resolve')
-
-        return this.run().then(() => {
-          expect(stubbableRequire.resolve).to.be.calledWith('babel-loader')
-          expect(stubbableRequire.resolve).to.be.calledWith('@babel/preset-env')
-        })
-      })
-
-      it('does not requires babel dependencies when user options are non-default', function () {
-        sinon.spy(stubbableRequire, 'resolve')
-        const options = { webpackOptions: { module: { rules: [] } } }
-
-        return this.run(options).then(() => {
-          expect(stubbableRequire.resolve).not.to.be.calledWith('babel-loader')
-          expect(stubbableRequire.resolve).not.to.be.calledWith('@babel/preset-env')
+          expect(webpack).to.be.calledWithMatch({
+            module: options.webpackOptions.module,
+          })
         })
       })
     })