webpack + esbuild

webpack.config.base.js

@@ -1,61 +1,72 @@
 import path from 'path';
+const { ESBuildMinifyPlugin } = require('esbuild-loader');
 
 const amdRule = {
   parser: {
-    amd: false, // https://github.com/lodash/lodash/issues/3052
-  },
+    amd: false // https://github.com/lodash/lodash/issues/3052
+  }
 };
 
 const jisonRule = {
   test: /\.jison$/,
   use: {
     loader: path.resolve(__dirname, './jisonLoader'),
     options: {
-      'token-stack': true,
-    },
-  },
+      'token-stack': true
+    }
+  }
 };
 const jsRule = {
   test: /\.js$/,
   include: [
     path.resolve(__dirname, './src'),
-    path.resolve(__dirname, './node_modules/dagre-d3-renderer/lib'),
+    path.resolve(__dirname, './node_modules/dagre-d3-renderer/lib')
   ],
   use: {
-    loader: 'babel-loader',
-  },
+    loader: 'esbuild-loader',
+    options: {
+      target: 'es2015'
+    }
+  }
 };
 
 const scssRule = {
   // load scss to string
   test: /\.scss$/,
-  use: [{ loader: 'css-to-string-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }],
+  use: [{ loader: 'css-to-string-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }]
 };
 
 export const jsConfig = () => {
   return {
     mode: 'development',
     target: 'web',
     entry: {
-      mermaid: './src/mermaid.js',
+      mermaid: './src/mermaid.js'
     },
     resolve: {
-      extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'],
+      extensions: ['.wasm', '.mjs', '.js', '.json', '.jison']
     },
     node: {
-      fs: 'empty', // jison generated code requires 'fs'
+      fs: 'empty' // jison generated code requires 'fs'
     },
     output: {
       path: path.join(__dirname, './dist/'),
       filename: '[name].js',
       library: 'mermaid',
       libraryTarget: 'umd',
       libraryExport: 'default',
-      globalObject: 'typeof self !== "undefined" ? self : this',
+      globalObject: 'typeof self !== "undefined" ? self : this'
     },
     module: {
-      rules: [amdRule, jsRule, scssRule, jisonRule],
+      rules: [amdRule, jsRule, scssRule, jisonRule]
     },
     devtool: 'source-map',
+    optimization: {
+      minimizer: [
+        new ESBuildMinifyPlugin({
+          target: 'es2015'
+        })
+      ]
+    }
   };
 };

webpack.config.e2e.js

@@ -4,29 +4,29 @@ const jsRule = {
   test: /\.js$/,
   exclude: /node_modules/,
   use: {
-    loader: 'babel-loader',
-  },
+    loader: 'esbuild-loader'
+  }
 };
 
 const jisonRule = {
   test: /\.jison$/,
   use: {
     loader: path.resolve(__dirname, './jisonLoader'),
     options: {
-      'token-stack': true,
-    },
-  },
+      'token-stack': true
+    }
+  }
 };
 
 const amdRule = {
   parser: {
-    amd: false, // https://github.com/lodash/lodash/issues/3052
-  },
+    amd: false // https://github.com/lodash/lodash/issues/3052
+  }
 };
 const scssRule = {
   // load scss to string
   test: /\.scss$/,
-  use: [{ loader: 'css-to-string-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }],
+  use: [{ loader: 'css-to-string-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }]
 };
 
 module.exports = {
@@ -35,31 +35,31 @@ module.exports = {
   entry: {
     mermaid: './src/mermaid.js',
     e2e: './cypress/platform/viewer.js',
-    'bundle-test': './cypress/platform/bundle-test.js',
+    'bundle-test': './cypress/platform/bundle-test.js'
   },
   resolve: {
-    extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'],
+    extensions: ['.wasm', '.mjs', '.js', '.json', '.jison']
   },
   node: {
-    fs: 'empty', // jison generated code requires 'fs'
+    fs: 'empty' // jison generated code requires 'fs'
   },
   output: {
     path: path.join(__dirname, './dist/'),
     filename: '[name].js',
     library: 'mermaid',
     libraryTarget: 'umd',
-    libraryExport: 'default',
+    libraryExport: 'default'
   },
   devServer: {
     contentBase: [path.join(__dirname, 'cypress', 'platform'), path.join(__dirname, 'dist')],
     compress: true,
-    port: 9000,
+    port: 9000
   },
   module: {
-    rules: [amdRule, jsRule, scssRule, jisonRule],
+    rules: [amdRule, jsRule, scssRule, jisonRule]
   },
   externals: {
-    mermaid: 'mermaid',
+    mermaid: 'mermaid'
   },
-  devtool: 'source-map',
+  devtool: 'source-map'
 };