From da4fa91ffc2bf9b1b74c9fec8164348273a9cad2 Mon Sep 17 00:00:00 2001 From: DanielJGeiger <1852529+DanielJGeiger@users.noreply.github.com> Date: Tue, 30 Aug 2022 02:07:18 -0500 Subject: [PATCH] chore: Dedupe webpack configs. (#5449) * chore: Dedupe package dependencies and webpack configs. * Fully dedupe `src/packages` via symlinks * Merge https://github.com/excalidraw/excalidraw into dedupe-package-deps-configs * fix: Link `tsc` so `build:example` works in @excalidraw/excalidraw * @excalidraw/plugins: Revert the `yarn.lock` deduping. * Drop yarn commands from the root `package.json`. * Remove more unneeded `package.json` additions. * One more change to drop in `package.json` files. * Deduping: Move even more into common webpack configs. * renaming Co-authored-by: Aakansha Doshi --- src/packages/common.webpack.dev.config.js | 88 +++++++++++++ src/packages/common.webpack.prod.config.js | 119 ++++++++++++++++++ src/packages/excalidraw/webpack.dev.config.js | 89 +------------ .../excalidraw/webpack.prod.config.js | 112 +---------------- src/packages/utils/webpack.prod.config.js | 49 +------- 5 files changed, 223 insertions(+), 234 deletions(-) create mode 100644 src/packages/common.webpack.dev.config.js create mode 100644 src/packages/common.webpack.prod.config.js diff --git a/src/packages/common.webpack.dev.config.js b/src/packages/common.webpack.dev.config.js new file mode 100644 index 00000000..0ee82688 --- /dev/null +++ b/src/packages/common.webpack.dev.config.js @@ -0,0 +1,88 @@ +const path = require("path"); +const autoprefixer = require("autoprefixer"); +const webpack = require("webpack"); +const { parseEnvVariables } = require(path.resolve(global.__childdir, "./env")); + +module.exports = { + mode: "development", + devtool: false, + output: { + libraryTarget: "umd", + filename: "[name].js", + publicPath: "", + }, + resolve: { + extensions: [".js", ".ts", ".tsx", ".css", ".scss"], + }, + module: { + rules: [ + { + test: /\.(sa|sc|c)ss$/, + exclude: /node_modules/, + use: [ + "style-loader", + { loader: "css-loader" }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [autoprefixer()], + }, + }, + }, + "sass-loader", + ], + }, + { + test: /\.(ts|tsx|js|jsx|mjs)$/, + exclude: /node_modules\/(?!browser-fs-access)/, + use: [ + { + loader: "ts-loader", + options: { + transpileOnly: true, + configFile: path.resolve(__dirname, "./tsconfig.dev.json"), + }, + }, + ], + }, + { + test: /\.(woff|woff2|eot|ttf|otf)$/, + type: "asset/resource", + }, + ], + }, + optimization: { + splitChunks: { + chunks: "async", + cacheGroups: { + vendors: { + test: /[\\/]node_modules[\\/]/, + name: "vendor", + }, + }, + }, + }, + plugins: [ + new webpack.EvalSourceMapDevToolPlugin({ exclude: /vendor/ }), + new webpack.DefinePlugin({ + "process.env": parseEnvVariables( + path.resolve(__dirname, "../../.env.development"), + ), + }), + ], + externals: { + react: { + root: "React", + commonjs2: "react", + commonjs: "react", + amd: "react", + }, + "react-dom": { + root: "ReactDOM", + commonjs2: "react-dom", + commonjs: "react-dom", + amd: "react-dom", + }, + }, +}; diff --git a/src/packages/common.webpack.prod.config.js b/src/packages/common.webpack.prod.config.js new file mode 100644 index 00000000..f0cca725 --- /dev/null +++ b/src/packages/common.webpack.prod.config.js @@ -0,0 +1,119 @@ +const path = require("path"); +const autoprefixer = require("autoprefixer"); +const webpack = require("webpack"); +const BundleAnalyzerPlugin = require(path.resolve( + path.join(global.__childdir, "node_modules"), + "webpack-bundle-analyzer", +)).BundleAnalyzerPlugin; +const TerserPlugin = require("terser-webpack-plugin"); +const { parseEnvVariables } = + "__noenv" in global ? {} : require(path.resolve(global.__childdir, "./env")); + +module.exports = { + mode: "production", + output: { + libraryTarget: "umd", + filename: "[name].js", + publicPath: "", + }, + resolve: { + extensions: [".js", ".ts", ".tsx", ".css", ".scss"], + }, + module: { + rules: [ + { + test: /\.(sa|sc|c)ss$/, + exclude: /node_modules/, + use: [ + "style-loader", + { + loader: "css-loader", + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [autoprefixer()], + }, + }, + }, + "sass-loader", + ], + }, + { + test: /\.(ts|tsx|js|jsx|mjs)$/, + exclude: /node_modules\/(?!browser-fs-access)/, + use: [ + { + loader: "ts-loader", + options: { + transpileOnly: true, + configFile: path.resolve(__dirname, "./tsconfig.prod.json"), + }, + }, + { + loader: "babel-loader", + options: { + presets: [ + "@babel/preset-env", + ["@babel/preset-react", { runtime: "automatic" }], + "@babel/preset-typescript", + ], + plugins: [ + "transform-class-properties", + "@babel/plugin-transform-runtime", + ], + }, + }, + ], + }, + { + test: /\.(woff|woff2|eot|ttf|otf)$/, + type: "asset/resource", + }, + ], + }, + optimization: { + minimize: true, + minimizer: [ + new TerserPlugin({ + test: /\.js($|\?)/i, + }), + ], + splitChunks: { + chunks: "async", + cacheGroups: { + vendors: { + test: /[\\/]node_modules[\\/]/, + name: "vendor", + }, + }, + }, + }, + plugins: [ + ...(process.env.ANALYZER === "true" ? [new BundleAnalyzerPlugin()] : []), + ...("__noenv" in global + ? [] + : [ + new webpack.DefinePlugin({ + "process.env": parseEnvVariables( + path.resolve(__dirname, "../../.env.production"), + ), + }), + ]), + ], + externals: { + react: { + root: "React", + commonjs2: "react", + commonjs: "react", + amd: "react", + }, + "react-dom": { + root: "ReactDOM", + commonjs2: "react-dom", + commonjs: "react-dom", + amd: "react-dom", + }, + }, +}; diff --git a/src/packages/excalidraw/webpack.dev.config.js b/src/packages/excalidraw/webpack.dev.config.js index 9e8180f5..5b535186 100644 --- a/src/packages/excalidraw/webpack.dev.config.js +++ b/src/packages/excalidraw/webpack.dev.config.js @@ -1,97 +1,18 @@ +global.__childdir = __dirname; const path = require("path"); -const webpack = require("webpack"); -const autoprefixer = require("autoprefixer"); -const { parseEnvVariables } = require("./env"); +const { merge } = require("webpack-merge"); +const commonConfig = require("../common.webpack.dev.config"); const outputDir = process.env.EXAMPLE === "true" ? "example/public" : "dist"; -module.exports = { - mode: "development", - devtool: false, +const config = { entry: { "excalidraw.development": "./entry.js", }, output: { path: path.resolve(__dirname, outputDir), library: "ExcalidrawLib", - libraryTarget: "umd", - filename: "[name].js", chunkFilename: "excalidraw-assets-dev/[name]-[contenthash].js", assetModuleFilename: "excalidraw-assets-dev/[name][ext]", - - publicPath: "", - }, - resolve: { - extensions: [".js", ".ts", ".tsx", ".css", ".scss"], - }, - module: { - rules: [ - { - test: /\.(sa|sc|c)ss$/, - exclude: /node_modules/, - use: [ - "style-loader", - { loader: "css-loader" }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [autoprefixer()], - }, - }, - }, - "sass-loader", - ], - }, - { - test: /\.(ts|tsx|js|jsx|mjs)$/, - exclude: /node_modules\/(?!browser-fs-access)/, - use: [ - { - loader: "ts-loader", - options: { - transpileOnly: true, - configFile: path.resolve(__dirname, "../tsconfig.dev.json"), - }, - }, - ], - }, - { - test: /\.(woff|woff2|eot|ttf|otf)$/, - type: "asset/resource", - }, - ], - }, - optimization: { - splitChunks: { - chunks: "async", - cacheGroups: { - vendors: { - test: /[\\/]node_modules[\\/]/, - name: "vendor", - }, - }, - }, - }, - plugins: [ - new webpack.EvalSourceMapDevToolPlugin({ exclude: /vendor/ }), - new webpack.DefinePlugin({ - "process.env": parseEnvVariables( - path.resolve(__dirname, "../../../.env.development"), - ), - }), - ], - externals: { - react: { - root: "React", - commonjs2: "react", - commonjs: "react", - amd: "react", - }, - "react-dom": { - root: "ReactDOM", - commonjs2: "react-dom", - commonjs: "react-dom", - amd: "react-dom", - }, }, }; +module.exports = merge(commonConfig, config); diff --git a/src/packages/excalidraw/webpack.prod.config.js b/src/packages/excalidraw/webpack.prod.config.js index 0450d36f..59328707 100644 --- a/src/packages/excalidraw/webpack.prod.config.js +++ b/src/packages/excalidraw/webpack.prod.config.js @@ -1,119 +1,17 @@ +global.__childdir = __dirname; const path = require("path"); -const TerserPlugin = require("terser-webpack-plugin"); -const BundleAnalyzerPlugin = - require("webpack-bundle-analyzer").BundleAnalyzerPlugin; -const autoprefixer = require("autoprefixer"); -const webpack = require("webpack"); -const { parseEnvVariables } = require("./env"); +const { merge } = require("webpack-merge"); +const commonConfig = require("../common.webpack.prod.config"); -module.exports = { - mode: "production", +const config = { entry: { "excalidraw.production.min": "./entry.js", }, output: { path: path.resolve(__dirname, "dist"), library: "ExcalidrawLib", - libraryTarget: "umd", - filename: "[name].js", chunkFilename: "excalidraw-assets/[name]-[contenthash].js", assetModuleFilename: "excalidraw-assets/[name][ext]", - publicPath: "", - }, - resolve: { - extensions: [".js", ".ts", ".tsx", ".css", ".scss"], - }, - module: { - rules: [ - { - test: /\.(sa|sc|c)ss$/, - exclude: /node_modules/, - use: [ - "style-loader", - { - loader: "css-loader", - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [autoprefixer()], - }, - }, - }, - "sass-loader", - ], - }, - { - test: /\.(ts|tsx|js|jsx|mjs)$/, - exclude: /node_modules\/(?!browser-fs-access)/, - use: [ - { - loader: "ts-loader", - options: { - transpileOnly: true, - configFile: path.resolve(__dirname, "../tsconfig.prod.json"), - }, - }, - { - loader: "babel-loader", - options: { - presets: [ - "@babel/preset-env", - ["@babel/preset-react", { runtime: "automatic" }], - "@babel/preset-typescript", - ], - plugins: [ - "transform-class-properties", - "@babel/plugin-transform-runtime", - ], - }, - }, - ], - }, - { - test: /\.(woff|woff2|eot|ttf|otf)$/, - type: "asset/resource", - }, - ], - }, - optimization: { - minimize: true, - minimizer: [ - new TerserPlugin({ - test: /\.js($|\?)/i, - }), - ], - splitChunks: { - chunks: "async", - cacheGroups: { - vendors: { - test: /[\\/]node_modules[\\/]/, - name: "vendor", - }, - }, - }, - }, - plugins: [ - ...(process.env.ANALYZER === "true" ? [new BundleAnalyzerPlugin()] : []), - new webpack.DefinePlugin({ - "process.env": parseEnvVariables( - path.resolve(__dirname, "../../../.env.production"), - ), - }), - ], - externals: { - react: { - root: "React", - commonjs2: "react", - commonjs: "react", - amd: "react", - }, - "react-dom": { - root: "ReactDOM", - commonjs2: "react-dom", - commonjs: "react-dom", - amd: "react-dom", - }, }, }; +module.exports = merge(commonConfig, config); diff --git a/src/packages/utils/webpack.prod.config.js b/src/packages/utils/webpack.prod.config.js index 7238ad02..58a6bbf0 100644 --- a/src/packages/utils/webpack.prod.config.js +++ b/src/packages/utils/webpack.prod.config.js @@ -1,60 +1,23 @@ +global.__childdir = __dirname; +global.__noenv = true; const webpack = require("webpack"); const path = require("path"); -const BundleAnalyzerPlugin = - require("webpack-bundle-analyzer").BundleAnalyzerPlugin; +const { merge } = require("webpack-merge"); +const commonConfig = require("../common.webpack.prod.config"); -module.exports = { - mode: "production", +const config = { entry: { "excalidraw-utils.min": "./index.js" }, output: { path: path.resolve(__dirname, "dist"), - filename: "[name].js", library: "ExcalidrawUtils", - libraryTarget: "umd", - }, - resolve: { - extensions: [".tsx", ".ts", ".js", ".css", ".scss"], }, optimization: { runtimeChunk: false, }, - module: { - rules: [ - { - test: /\.(sa|sc|c)ss$/, - exclude: /node_modules/, - use: ["style-loader", { loader: "css-loader" }, "sass-loader"], - }, - { - test: /\.(ts|tsx|js)$/, - use: [ - { - loader: "ts-loader", - options: { - transpileOnly: true, - configFile: path.resolve(__dirname, "../tsconfig.prod.json"), - }, - }, - { - loader: "babel-loader", - - options: { - presets: [ - "@babel/preset-env", - ["@babel/preset-react", { runtime: "automatic" }], - "@babel/preset-typescript", - ], - plugins: [["@babel/plugin-transform-runtime"]], - }, - }, - ], - }, - ], - }, plugins: [ new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1, }), - ...(process.env.ANALYZER === "true" ? [new BundleAnalyzerPlugin()] : []), ], }; +module.exports = merge(commonConfig, config);