build: Add separate dev and prod builds and add source-maps to dev build 🎉 (#3330)

* build: Add separate dev and prod builds and add sourcemaps to dev build

* update

* add

* update changelog

src/packages/excalidraw/CHANGELOG.md

@@ -23,6 +23,14 @@ Please add the latest change on the top under the correct section.
   Use `location.hash` when importing libraries to fix installation issues. This will require host apps to add a `hashchange` listener and call the newly exposed `excalidrawAPI.importLibrary(url)` API when applicable [#3320](https://github.com/excalidraw/excalidraw/pull/3320).
 - Append `location.pathname` to `libraryReturnUrl` default url [#3325](https://github.com/excalidraw/excalidraw/pull/3325).
 
+### Build
+
+- Expose separate builds for dev and prod and support source maps in dev build [#3330](https://github.com/excalidraw/excalidraw/pull/3330).
+  #### BREAKING CHANGE
+  - If you are using script tag to embed excalidraw then the name of the file will have to be updated to `excalidraw.production.min.js` instead of `excalidraw.min.js`. If you want to use dev build you can use `excalidraw.development.js`
+
+---
+
 ## 0.5.0 (2021-03-21)
 
 ## Excalidraw API

src/packages/excalidraw/main.js

@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./dist/excalidraw.production.min.js");
+} else {
+  module.exports = require("./dist/excalidraw.development.js");
+}

src/packages/excalidraw/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@excalidraw/excalidraw",
   "version": "0.5.0",
-  "main": "dist/excalidraw.min.js",
+  "main": "main.js",
   "files": [
     "dist/*"
   ],
@@ -66,7 +66,7 @@
   "repository": "https://github.com/excalidraw/excalidraw",
   "homepage": "https://github.com/excalidraw/excalidraw/tree/master/src/packages/excalidraw",
   "scripts": {
-    "build:umd": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js",
+    "build:umd": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js && cross-env NODE_ENV=development webpack --config webpack.dev.config.js",
     "build:umd:withAnalyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --config webpack.prod.config.js",
     "pack": "yarn build:umd && yarn pack"
   }

src/packages/excalidraw/webpack.dev.config.js

@@ -0,0 +1,81 @@
+const path = require("path");
+const webpack = require("webpack");
+
+module.exports = {
+  mode: "development",
+  devtool: false,
+  entry: {
+    "excalidraw.development": "./entry.js",
+  },
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    library: "Excalidraw",
+    libraryTarget: "umd",
+    filename: "[name].js",
+    chunkFilename: "excalidraw-assets-dev/[name]-[contenthash].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" }, "sass-loader"],
+      },
+      {
+        test: /\.(ts|tsx|js|jsx|mjs)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "ts-loader",
+            options: {
+              transpileOnly: true,
+              configFile: path.resolve(__dirname, "../tsconfig.dev.json"),
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        use: [
+          {
+            loader: "file-loader",
+            options: {
+              name: "[name].[ext]",
+              outputPath: "excalidraw-assets-dev",
+            },
+          },
+        ],
+      },
+    ],
+  },
+  optimization: {
+    splitChunks: {
+      chunks: "async",
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendor",
+        },
+      },
+    },
+  },
+  plugins: [new webpack.EvalSourceMapDevToolPlugin({ exclude: /vendor/ })],
+  externals: {
+    react: {
+      root: "React",
+      commonjs2: "react",
+      commonjs: "react",
+      amd: "react",
+    },
+    "react-dom": {
+      root: "ReactDOM",
+      commonjs2: "react-dom",
+      commonjs: "react-dom",
+      amd: "react-dom",
+    },
+  },
+};

src/packages/excalidraw/webpack.prod.config.js

@@ -6,7 +6,7 @@ const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
 module.exports = {
   mode: "production",
   entry: {
-    "excalidraw.min": "./entry.js",
+    "excalidraw.production.min": "./entry.js",
   },
   output: {
     path: path.resolve(__dirname, "dist"),
@@ -24,7 +24,13 @@ module.exports = {
       {
         test: /\.(sa|sc|c)ss$/,
         exclude: /node_modules/,
-        use: ["style-loader", { loader: "css-loader" }, "sass-loader"],
+        use: [
+          "style-loader",
+          {
+            loader: "css-loader",
+          },
+          "sass-loader",
+        ],
       },
       {
         test: /\.(ts|tsx|js|jsx|mjs)$/,

src/packages/tsconfig.dev.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "esNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "sourceMap": true,
+    "allowJs": true
+  }
+}