diff --git a/src/packages/common.webpack.dev.config.js b/src/packages/common.webpack.dev.config.js deleted file mode 100644 index 0ee82688..00000000 --- a/src/packages/common.webpack.dev.config.js +++ /dev/null @@ -1,88 +0,0 @@ -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 deleted file mode 100644 index f0cca725..00000000 --- a/src/packages/common.webpack.prod.config.js +++ /dev/null @@ -1,119 +0,0 @@ -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 5b535186..9e8180f5 100644 --- a/src/packages/excalidraw/webpack.dev.config.js +++ b/src/packages/excalidraw/webpack.dev.config.js @@ -1,18 +1,97 @@ -global.__childdir = __dirname; const path = require("path"); -const { merge } = require("webpack-merge"); -const commonConfig = require("../common.webpack.dev.config"); +const webpack = require("webpack"); +const autoprefixer = require("autoprefixer"); +const { parseEnvVariables } = require("./env"); const outputDir = process.env.EXAMPLE === "true" ? "example/public" : "dist"; -const config = { +module.exports = { + mode: "development", + devtool: false, 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 59328707..0450d36f 100644 --- a/src/packages/excalidraw/webpack.prod.config.js +++ b/src/packages/excalidraw/webpack.prod.config.js @@ -1,17 +1,119 @@ -global.__childdir = __dirname; const path = require("path"); -const { merge } = require("webpack-merge"); -const commonConfig = require("../common.webpack.prod.config"); +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 config = { +module.exports = { + mode: "production", 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 58a6bbf0..7238ad02 100644 --- a/src/packages/utils/webpack.prod.config.js +++ b/src/packages/utils/webpack.prod.config.js @@ -1,23 +1,60 @@ -global.__childdir = __dirname; -global.__noenv = true; const webpack = require("webpack"); const path = require("path"); -const { merge } = require("webpack-merge"); -const commonConfig = require("../common.webpack.prod.config"); +const BundleAnalyzerPlugin = + require("webpack-bundle-analyzer").BundleAnalyzerPlugin; -const config = { +module.exports = { + mode: "production", 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);