mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-12-29 03:20:46 +08:00
Consolidate webpack configurations (#2716) bruception
* Consolidate webpack configurations * Add lint step back into dev compilation
This commit is contained in:
Bruce Berrios
GitHub
parent
95a0467089
commit
032fe57f2a
8 changed files with 110 additions and 152 deletions
|
|
@ -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) => {
|
||||
|
|
|
|||
5
frontend/package-lock.json
generated
5
frontend/package-lock.json
generated
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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`);
|
||||
},
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
|
@ -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);
|
||||
},
|
||||
}),
|
||||
],
|
||||
};
|
||||
47
frontend/webpack/config.base.js
Normal file
47
frontend/webpack/config.base.js
Normal file
|
|
@ -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;
|
||||
9
frontend/webpack/config.dev.js
Normal file
9
frontend/webpack/config.dev.js
Normal file
|
|
@ -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);
|
||||
46
frontend/webpack/config.prod.js
Normal file
46
frontend/webpack/config.prod.js
Normal file
|
|
@ -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);
|
||||
Loading…
Add table
Reference in a new issue