From 032fe57f2a29e867fc10e9f099681dd0967200b6 Mon Sep 17 00:00:00 2001 From: Bruce Berrios <58147810+Bruception@users.noreply.github.com> Date: Wed, 16 Mar 2022 15:57:30 -0400 Subject: [PATCH] Consolidate webpack configurations (#2716) bruception * Consolidate webpack configurations * Add lint step back into dev compilation --- frontend/gulpfile.js | 8 +-- frontend/package-lock.json | 5 +- frontend/package.json | 5 +- frontend/webpack.config.dev.js | 53 -------------------- frontend/webpack.config.prod.js | 89 --------------------------------- frontend/webpack/config.base.js | 47 +++++++++++++++++ frontend/webpack/config.dev.js | 9 ++++ frontend/webpack/config.prod.js | 46 +++++++++++++++++ 8 files changed, 110 insertions(+), 152 deletions(-) delete mode 100644 frontend/webpack.config.dev.js delete mode 100644 frontend/webpack.config.prod.js create mode 100644 frontend/webpack/config.base.js create mode 100644 frontend/webpack/config.dev.js create mode 100644 frontend/webpack/config.prod.js diff --git a/frontend/gulpfile.js b/frontend/gulpfile.js index 09c9e939e..e3751fecb 100644 --- a/frontend/gulpfile.js +++ b/frontend/gulpfile.js @@ -5,8 +5,8 @@ const eslint = require("gulp-eslint-new"); const vinylPaths = require("vinyl-paths"); const sass = require("gulp-sass")(require("dart-sass")); const { task, src, dest, series, watch } = require("gulp"); -const webpackDevConfig = require("./webpack.config.dev.js"); -const webpackProdConfig = require("./webpack.config.prod.js"); +const webpackDevConfig = require("./webpack/config.dev.js"); +const webpackProdConfig = require("./webpack/config.prod.js"); const JSONValidation = require("./json-validation"); const eslintConfig = "../.eslintrc.json"; @@ -33,10 +33,6 @@ task("validate-json-schema", function () { return JSONValidation.validateAll(); }); -task("copy-src-contents", function () { - return src("./src/scripts/**").pipe(dest("./dist/")); -}); - task("webpack", async function () { return new Promise((resolve, reject) => { webpack(webpackDevConfig, (err, stats) => { diff --git a/frontend/package-lock.json b/frontend/package-lock.json index a92eb0f67..de870d462 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -38,7 +38,7 @@ "circular-dependency-plugin": "5.2.2", "dart-sass": "^1.25.0", "del": "^6.0.0", - "eslint-webpack-plugin": "^3.1.1", + "eslint-webpack-plugin": "3.1.1", "grecaptcha": "^1.0.3", "gulp": "^4.0.2", "gulp-concat": "^2.6.1", @@ -54,7 +54,8 @@ "vinyl-buffer": "^1.0.1", "vinyl-paths": "^3.0.1", "webpack": "^5.68.0", - "webpack-cli": "4.9.2" + "webpack-cli": "4.9.2", + "webpack-merge": "5.8.0" }, "engines": { "npm": "8.1.2" diff --git a/frontend/package.json b/frontend/package.json index 0aa76e5dc..3abbfe0ab 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -31,7 +31,7 @@ "circular-dependency-plugin": "5.2.2", "dart-sass": "^1.25.0", "del": "^6.0.0", - "eslint-webpack-plugin": "^3.1.1", + "eslint-webpack-plugin": "3.1.1", "grecaptcha": "^1.0.3", "gulp": "^4.0.2", "gulp-concat": "^2.6.1", @@ -47,7 +47,8 @@ "vinyl-buffer": "^1.0.1", "vinyl-paths": "^3.0.1", "webpack": "^5.68.0", - "webpack-cli": "4.9.2" + "webpack-cli": "4.9.2", + "webpack-merge": "5.8.0" }, "dependencies": { "axios": "^0.21.2", diff --git a/frontend/webpack.config.dev.js b/frontend/webpack.config.dev.js deleted file mode 100644 index d5be0ef86..000000000 --- a/frontend/webpack.config.dev.js +++ /dev/null @@ -1,53 +0,0 @@ -const path = require("path"); -const CircularDependencyPlugin = require("circular-dependency-plugin"); - -let circularImportNum = 0; - -module.exports = { - mode: "development", // Change to 'production' for production - devtool: false, - entry: path.resolve(__dirname, "src/scripts/index.ts"), - resolve: { - fallback: { - crypto: require.resolve("crypto-browserify"), - stream: require.resolve("stream-browserify"), - buffer: require.resolve("buffer"), - }, - extensions: [".ts", ".js"], - }, - output: { - path: path.resolve(__dirname, "public/js/"), - filename: "monkeytype.js", - }, - module: { - rules: [{ test: /\.tsx?$/, loader: "ts-loader" }], - }, - plugins: [ - // Ensure that there are no circular dependencies - new CircularDependencyPlugin({ - exclude: /node_modules/, - include: /./, - failOnError: true, - allowAsyncCycles: false, // Allow async webpack imports - cwd: process.cwd(), // set current working dir for displaying module paths - // `onDetected` is called for each module that is cyclical - onDetected({ module: _webpackModuleRecord, paths }) { - // `paths` will be an Array of the relative module paths that make up the cycle - // `module` will be the module record generated by webpack that caused the cycle - circularImportNum += 1; - console.log( - "\u001b[31mCircular import found: \u001b[0m" + - paths.join("\u001b[31m -> \u001b[0m") - ); - }, - // `onEnd` is called before the cycle detection ends - onEnd() { - let coloredImportNum = ""; - if (circularImportNum === 0) - coloredImportNum = `\u001b[32m${circularImportNum}\u001b[0m`; - else coloredImportNum = `\u001b[31m${circularImportNum}\u001b[0m`; - console.log(`Found ${coloredImportNum} circular imports`); - }, - }), - ], -}; diff --git a/frontend/webpack.config.prod.js b/frontend/webpack.config.prod.js deleted file mode 100644 index 889f21e95..000000000 --- a/frontend/webpack.config.prod.js +++ /dev/null @@ -1,89 +0,0 @@ -const path = require("path"); -const CircularDependencyPlugin = require("circular-dependency-plugin"); - -let circularImportNum = 0; - -module.exports = { - mode: "production", - entry: path.resolve(__dirname, "src/scripts/index.ts"), - resolve: { - fallback: { - crypto: require.resolve("crypto-browserify"), - stream: require.resolve("stream-browserify"), - buffer: require.resolve("buffer"), - }, - extensions: [".ts", ".js"], - }, - module: { - rules: [ - { - test: /version\.ts$/, - loader: "string-replace-loader", - options: { - search: /^export const CLIENT_VERSION =.*/, - replace(_match, _p1, _offset, _string) { - const date = new Date(); - const dateString = [ - date.getFullYear(), - date.getMonth() + 1, - date.getDate(), - date.getHours(), - date.getMinutes(), - date.getSeconds(), - ].join("-"); - return `export const CLIENT_VERSION = "${dateString}";`; - }, - flags: "g", - }, - }, - { test: /\.tsx?$/, loader: "ts-loader" }, - { - test: /\.m?js$/, - exclude: /(node_modules)/, - use: { - loader: "babel-loader", - options: { - presets: ["@babel/preset-env"], - plugins: [ - "@babel/plugin-transform-runtime", - "@babel/plugin-transform-modules-commonjs", - ], - }, - }, - }, - ], - }, - output: { - path: path.resolve(__dirname, "public/js/"), - filename: "monkeytype.js", - }, - plugins: [ - // Ensure that there are no circular dependencies - new CircularDependencyPlugin({ - exclude: /node_modules/, - include: /./, - failOnError: true, - allowAsyncCycles: false, // Allow async webpack imports - cwd: process.cwd(), // set current working dir for displaying module paths - // `onDetected` is called for each module that is cyclical - onDetected({ module: _webpackModuleRecord, paths }) { - // `paths` will be an Array of the relative module paths that make up the cycle - // `module` will be the module record generated by webpack that caused the cycle - circularImportNum += 1; - console.log( - "\u001b[31mCircular import found: \u001b[0m" + - paths.join("\u001b[31m -> \u001b[0m") - ); - }, - // `onEnd` is called before the cycle detection ends - onEnd() { - let coloredImportNum = ""; - if (circularImportNum === 0) - coloredImportNum = `\u001b[32m${circularImportNum}\u001b[0m`; - else coloredImportNum = `\u001b[31m${circularImportNum}\u001b[0m`; - console.log(`Found ${coloredImportNum} circular imports`); - if (circularImportNum > 0) process.exit(1); - }, - }), - ], -}; diff --git a/frontend/webpack/config.base.js b/frontend/webpack/config.base.js new file mode 100644 index 000000000..4e0415c96 --- /dev/null +++ b/frontend/webpack/config.base.js @@ -0,0 +1,47 @@ +const path = require("path"); +const CircularDependencyPlugin = require("circular-dependency-plugin"); + +let circularImports = 0; + +const BASE_CONFIGURATION = { + entry: path.resolve(__dirname, "../src/scripts/index.ts"), + resolve: { + fallback: { + crypto: require.resolve("crypto-browserify"), + stream: require.resolve("stream-browserify"), + buffer: require.resolve("buffer"), + }, + extensions: [".ts", ".js"], + }, + output: { + path: path.resolve(__dirname, "../public/js/"), + filename: "monkeytype.js", + }, + module: { + rules: [{ test: /\.tsx?$/, loader: "ts-loader" }], + }, + plugins: [ + new CircularDependencyPlugin({ + exclude: /node_modules/, + include: /./, + failOnError: true, + allowAsyncCycles: false, + cwd: process.cwd(), + onStart() { + circularImports = 0; + }, + onDetected({ paths }) { + circularImports++; + const joinedPaths = paths.join("\u001b[31m -> \u001b[0m"); + console.log(`\u001b[31mCircular import found: \u001b[0m${joinedPaths}`); + }, + onEnd() { + const colorCode = circularImports === 0 ? 32 : 31; + const countWithColor = `\u001b[${colorCode}m${circularImports}\u001b[0m`; + console.log(`Found ${countWithColor} circular imports`); + }, + }), + ], +}; + +module.exports = BASE_CONFIGURATION; diff --git a/frontend/webpack/config.dev.js b/frontend/webpack/config.dev.js new file mode 100644 index 000000000..8c63178d2 --- /dev/null +++ b/frontend/webpack/config.dev.js @@ -0,0 +1,9 @@ +const { merge } = require("webpack-merge"); +const BASE_CONFIGURATION = require("./config.base"); + +const DEVELOPMENT_CONFIGURATION = { + mode: "development", + devtool: false, +}; + +module.exports = merge(BASE_CONFIGURATION, DEVELOPMENT_CONFIGURATION); diff --git a/frontend/webpack/config.prod.js b/frontend/webpack/config.prod.js new file mode 100644 index 000000000..3d3b47f07 --- /dev/null +++ b/frontend/webpack/config.prod.js @@ -0,0 +1,46 @@ +const { merge } = require("webpack-merge"); +const BASE_CONFIGURATION = require("./config.base"); + +const PRODUCTION_CONFIGURATION = { + mode: "production", + module: { + rules: [ + { + test: /version\.ts$/, + loader: "string-replace-loader", + options: { + search: /^export const CLIENT_VERSION =.*/, + replace(_match, _p1, _offset, _string) { + const date = new Date(); + const dateString = [ + date.getFullYear(), + date.getMonth() + 1, + date.getDate(), + date.getHours(), + date.getMinutes(), + date.getSeconds(), + ].join("-"); + return `export const CLIENT_VERSION = "${dateString}";`; + }, + flags: "g", + }, + }, + { + test: /\.m?js$/, + exclude: /(node_modules)/, + use: { + loader: "babel-loader", + options: { + presets: ["@babel/preset-env"], + plugins: [ + "@babel/plugin-transform-runtime", + "@babel/plugin-transform-modules-commonjs", + ], + }, + }, + }, + ], + }, +}; + +module.exports = merge(BASE_CONFIGURATION, PRODUCTION_CONFIGURATION);