2022-03-22 04:22:47 +08:00
|
|
|
const { resolve } = require("path");
|
2022-03-18 04:00:20 +08:00
|
|
|
const CopyPlugin = require("copy-webpack-plugin");
|
2022-03-17 03:57:30 +08:00
|
|
|
const CircularDependencyPlugin = require("circular-dependency-plugin");
|
2022-03-18 22:40:40 +08:00
|
|
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
2022-03-22 04:22:47 +08:00
|
|
|
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
2022-03-17 03:57:30 +08:00
|
|
|
|
|
|
|
let circularImports = 0;
|
|
|
|
|
2022-03-22 04:22:47 +08:00
|
|
|
/** @type { import('webpack').Configuration } */
|
|
|
|
const BASE_CONFIG = {
|
|
|
|
entry: {
|
|
|
|
monkeytype: resolve(__dirname, "../src/scripts/index.ts"),
|
|
|
|
},
|
2022-03-17 03:57:30 +08:00
|
|
|
resolve: {
|
|
|
|
fallback: {
|
|
|
|
crypto: require.resolve("crypto-browserify"),
|
|
|
|
stream: require.resolve("stream-browserify"),
|
|
|
|
buffer: require.resolve("buffer"),
|
2022-03-22 04:22:47 +08:00
|
|
|
"bn.js": require.resolve("bn.js"),
|
|
|
|
},
|
|
|
|
alias: {
|
|
|
|
"bn.js": resolve(__dirname, "node_modules/bn.js/lib/bn.js"),
|
2022-03-17 03:57:30 +08:00
|
|
|
},
|
|
|
|
extensions: [".ts", ".js"],
|
|
|
|
},
|
|
|
|
output: {
|
2022-03-22 04:22:47 +08:00
|
|
|
filename: "./js/[name].[chunkhash:8].js",
|
|
|
|
path: resolve(__dirname, "../public/"),
|
2022-03-18 22:40:40 +08:00
|
|
|
clean: true,
|
2022-03-17 03:57:30 +08:00
|
|
|
},
|
|
|
|
module: {
|
2022-03-18 22:40:40 +08:00
|
|
|
rules: [
|
|
|
|
{ test: /\.tsx?$/, loader: "ts-loader" },
|
|
|
|
{
|
|
|
|
test: /\.s[ac]ss$/i,
|
|
|
|
use: [
|
|
|
|
MiniCssExtractPlugin.loader,
|
|
|
|
{
|
|
|
|
loader: "css-loader",
|
|
|
|
options: {
|
|
|
|
url: false,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
loader: "sass-loader",
|
|
|
|
options: {
|
|
|
|
implementation: require("sass"),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
],
|
2022-03-17 03:57:30 +08:00
|
|
|
},
|
2022-03-22 04:22:47 +08:00
|
|
|
optimization: {
|
|
|
|
splitChunks: {
|
|
|
|
chunks: "all",
|
|
|
|
minChunks: 1,
|
|
|
|
maxAsyncRequests: 30,
|
|
|
|
maxInitialRequests: 30,
|
|
|
|
enforceSizeThreshold: 50000,
|
|
|
|
cacheGroups: {
|
|
|
|
defaultVendors: {
|
|
|
|
name: "vendor",
|
|
|
|
test: /[\\/]node_modules[\\/]/,
|
|
|
|
priority: -10,
|
|
|
|
reuseExistingChunk: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2022-03-17 03:57:30 +08:00
|
|
|
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`);
|
|
|
|
},
|
|
|
|
}),
|
2022-03-18 04:00:20 +08:00
|
|
|
new CopyPlugin({
|
2022-03-22 04:22:47 +08:00
|
|
|
patterns: [
|
|
|
|
{
|
|
|
|
from: resolve(__dirname, "../static"),
|
|
|
|
to: "./",
|
|
|
|
globOptions: {
|
|
|
|
ignore: ["**/index.html"],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
}),
|
|
|
|
new HtmlWebpackPlugin({
|
|
|
|
filename: "./index.html",
|
|
|
|
template: resolve(__dirname, "../static/index.html"),
|
|
|
|
inject: "body",
|
2022-03-18 04:00:20 +08:00
|
|
|
}),
|
2022-03-18 22:40:40 +08:00
|
|
|
new MiniCssExtractPlugin({
|
2022-03-22 04:22:47 +08:00
|
|
|
filename: "./css/style.css",
|
2022-03-18 22:40:40 +08:00
|
|
|
}),
|
2022-03-17 03:57:30 +08:00
|
|
|
],
|
|
|
|
};
|
|
|
|
|
2022-03-22 04:22:47 +08:00
|
|
|
module.exports = BASE_CONFIG;
|