diff --git a/packages/gatsby/src/utils/__tests__/__snapshots__/webpack-utils.js.snap b/packages/gatsby/src/utils/__tests__/__snapshots__/webpack-utils.js.snap new file mode 100644 index 0000000000000..b215eea6216a8 --- /dev/null +++ b/packages/gatsby/src/utils/__tests__/__snapshots__/webpack-utils.js.snap @@ -0,0 +1,29 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`webpack utils js returns default values without any options 1`] = ` +Object { + "exclude": /core-js\\|event-source-polyfill\\|webpack-hot-middleware\\\\/client/, + "test": /\\\\\\.\\(js\\|mjs\\|jsx\\)\\$/, + "type": "javascript/auto", + "use": Array [ + Object { + "loader": "/packages/gatsby/src/utils/babel-loader.js", + "options": Object {}, + }, + ], +} +`; + +exports[`webpack utils js returns the correct exclude paths 1`] = ` +Object { + "exclude": /core-js\\|event-source-polyfill\\|webpack-hot-middleware\\\\/client\\|node_modules/, + "test": /\\\\\\.\\(js\\|mjs\\|jsx\\)\\$/, + "type": "javascript/auto", + "use": Array [ + Object { + "loader": "/packages/gatsby/src/utils/babel-loader.js", + "options": Object {}, + }, + ], +} +`; diff --git a/packages/gatsby/src/utils/__tests__/webpack-utils.js b/packages/gatsby/src/utils/__tests__/webpack-utils.js index ba6065120c6b1..58436833d9572 100644 --- a/packages/gatsby/src/utils/__tests__/webpack-utils.js +++ b/packages/gatsby/src/utils/__tests__/webpack-utils.js @@ -11,19 +11,23 @@ beforeAll(async () => { }) describe(`webpack utils`, () => { - describe(`mjs`, () => { - it(`adds .mjs rule`, () => { - expect(config.rules.mjs).toEqual(expect.any(Function)) + describe(`js`, () => { + it(`adds .js rule`, () => { + expect(config.rules.js).toEqual(expect.any(Function)) }) - it(`returns correct rule`, () => { - const rule = config.rules.mjs() + it(`returns default values without any options`, () => { + const rule = config.rules.js() - expect(rule).toEqual({ - include: /node_modules/, - test: /\.mjs$/, - type: `javascript/auto`, + expect(rule).toMatchSnapshot() + }) + + it(`returns the correct exclude paths`, () => { + const rule = config.rules.js({ + exclude: [`node_modules`], }) + + expect(rule).toMatchSnapshot() }) }) }) diff --git a/packages/gatsby/src/utils/webpack-utils.js b/packages/gatsby/src/utils/webpack-utils.js index e7b2fb593aa6f..fd3d482f2d2ef 100644 --- a/packages/gatsby/src/utils/webpack-utils.js +++ b/packages/gatsby/src/utils/webpack-utils.js @@ -293,34 +293,20 @@ module.exports = async ({ * JavaScript loader via babel, excludes node_modules */ { - let js = (options = {}) => { - return { - test: /\.jsx?$/, - exclude: vendorRegex, - use: [loaders.js(options)], - } - } - - rules.js = js - } + let js = ({ exclude = [], ...options } = {}) => { + const excludeRegex = [ + `core-js|event-source-polyfill|webpack-hot-middleware/client`, + ].concat(exclude) - /** - * mjs loader: - * webpack 4 has issues automatically dealing with - * the .mjs extension, thus we need to explicitly - * add this rule to use the default webpack js loader - */ - { - let mjs = (options = {}) => { return { - test: /\.mjs$/, - include: /node_modules/, + test: /\.(js|mjs|jsx)$/, + exclude: new RegExp(excludeRegex.join(`|`)), type: `javascript/auto`, - ...options, + use: [loaders.js(options)], } } - rules.mjs = mjs + rules.js = js } { diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js index 91ee65dd73eb3..1cb4cadf35a6e 100644 --- a/packages/gatsby/src/utils/webpack.config.js +++ b/packages/gatsby/src/utils/webpack.config.js @@ -245,12 +245,19 @@ module.exports = async (program, directory, suppliedStage) => { } } - function getModule(config) { + function getModule() { + const jsOptions = {} + + // Speedup 🏎️💨 the build! We only include transpilation of node_modules on production builds + // TODO create gatsby plugin to enable this behaviour on develop (only when people are requesting this feature) + if (stage === `develop`) { + jsOptions.exclude = [`node_modules`] + } + // Common config for every env. // prettier-ignore let configRules = [ - rules.mjs(), - rules.js(), + rules.js(jsOptions), rules.yaml(), rules.fonts(), rules.images(),