mirror of
https://github.com/excalidraw/excalidraw.git
synced 2024-11-10 11:35:52 +01:00
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 <aakansha1216@gmail.com>
This commit is contained in:
DanielJGeiger
GitHub
parent
553b493f37
commit
da4fa91ffc
88
src/packages/common.webpack.dev.config.js
Normal file
88
src/packages/common.webpack.dev.config.js
Normal file
@ -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",
|
||||
},
|
||||
},
|
||||
};
|
||||
119
src/packages/common.webpack.prod.config.js
Normal file
119
src/packages/common.webpack.prod.config.js
Normal file
@ -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",
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user