combine webpack builds for faster builds & simpler tooling

graphql · Jul 5, 2023 · b704ff3 · b704ff3
1 parent 6b16e0c
commit b704ff3
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "cypress-open": "yarn workspace graphiql cypress-open",
     "dev-graphiql": "yarn workspace graphiql dev",
     "e2e": "yarn run e2e:build && yarn workspace graphiql e2e",
-    "e2e:build": "yarn build && yarn workspace graphiql build-bundles-min",
+    "e2e:build": "yarn build && yarn workspace graphiql build-bundles",
     "eslint": "NODE_OPTIONS=--max-old-space-size=4096 eslint --max-warnings=0 --ignore-path .gitignore --cache .",
     "format": "yarn eslint --fix && yarn pretty",
     "jest": "jest --testPathIgnorePatterns cm6-graphql",

diff --git a/packages/graphiql/package.json b/packages/graphiql/package.json
@@ -31,12 +31,11 @@
     "graphiql.min.css.map"
   ],
   "scripts": {
-    "analyze-bundle": "cross-env NODE_ENV=production CDN=1 ANALYZE=1 yarn webpack -p",
+    "analyze-bundle": "cross-env NODE_ENV=production ANALYZE=1 yarn webpack -p",
     "build": "yarn build-clean && yarn build-cjs && yarn build-esm",
-    "build-bundles": "yarn build-bundles-clean && yarn build-bundles-dev && yarn build-bundles-min",
+    "build-bundles": "yarn build-bundles-clean && yarn build-bundles-webpack",
     "build-bundles-clean": "rimraf 'graphiql.*{js,css}' *.html",
-    "build-bundles-dev": "cross-env NODE_ENV=development BABEL_ENV=development CDN=1 yarn webpack --mode development --bail",
-    "build-bundles-min": "cross-env ANALYZE=1 NODE_ENV=production CDN=1 yarn webpack --mode production --bail",
+    "build-bundles-webpack": "cross-env yarn webpack --mode development --bail",
     "build-cjs": "tsc",
     "build-clean": "rimraf esm dist webpack *.html",
     "build-esm": "tsc --project ./tsconfig.esm.json",

diff --git a/packages/graphiql/resources/webpack.config.js b/packages/graphiql/resources/webpack.config.js
@@ -8,14 +8,14 @@ const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const graphql = require('graphql');
 const rimraf = require('rimraf');
 
-const isDev = process.env.NODE_ENV === 'development';
-const isHMR = Boolean(isDev && process.env.WEBPACK_DEV_SERVER);
-
 const relPath = (...args) => path.resolve(__dirname, ...args);
 const rootPath = (...args) => relPath('../', ...args);
 
-const resultConfig = {
-  mode: process.env.NODE_ENV,
+const resultConfig = ({isDev}) => {
+  const isHMR = Boolean(isDev && process.env.WEBPACK_DEV_SERVER);
+
+  const config = {
+    mode: isDev ? 'development' : 'production',
   entry: './cdn.ts',
   context: rootPath('src'),
   output: {
@@ -55,7 +55,7 @@ const resultConfig = {
       // i think we need to add another rule for
       // codemirror-graphql esm.js files to load
       {
-        test: /\.(js|jsx|ts|tsx)$/,
+          test: /\.(js|jsx|ts|tsx|mjs)$/,
         use: [{ loader: 'babel-loader' }],
         exclude: /\.(d\.ts|d\.ts\.map|spec\.tsx)$/,
       },
@@ -113,13 +113,15 @@ const resultConfig = {
 };
 
 if (process.env.ANALYZE) {
-  resultConfig.plugins.push(
+    config.plugins.push(
     new BundleAnalyzerPlugin({
       analyzerMode: 'static',
       openAnalyzer: false,
       reportFilename: rootPath('analyzer.html'),
     }),
   );
 }
+  return config;
+};
 
-module.exports = resultConfig;
+module.exports = [resultConfig({isDev: true}), resultConfig()];