Merge pull request #832 from EOSIO/webpack_externals

Webpack separating external packages and cross-platform building (release/22.0.x)
EOSIO · Feb 12, 2021 · 4c73057 · 4c73057
2 parents 7f76096 + 4a2f4f0
commit 4c73057
Show file tree

Hide file tree

Showing 6 changed files with 283 additions and 89 deletions.
diff --git a/docs/basic-usage/00_browser.md b/docs/basic-usage/00_browser.md
@@ -1,7 +1,8 @@
-To use `eosjs` in a browser run `npm run build-web` or `yarn build-web`.  This will create the `dist-web` folder and web distribution modules.
+To use `eosjs` in a browser run `npm run build-web` or `yarn build-web`.  This will create the `dist-web` folder and web distribution modules.  Ensure that you include `externals.min.js` as it includes external packages that eosjs uses.
 ```html
 <pre style="width: 100%; height: 100%; margin:0px; "></pre>
 
+<script src='dist-web/externals.min.js'></script>
 <script src='dist-web/eosjs-api.min.js'></script>
 <script src='dist-web/eosjs-jsonrpc.min.js'></script>
 <script src='dist-web/eosjs-jssig.min.js'></script>

diff --git a/package.json b/package.json
@@ -11,8 +11,8 @@
     "test": "jest src/tests/*eosjs*",
     "test-node": "jest src/tests/*node*",
     "test-all": "yarn test && yarn test-node && yarn cypress",
-    "build": "rm -rf dist && tsc -p ./tsconfig.json && node scripts/copy-ripe-md.js",
-    "build-web": "rm -rf dist-web && webpack --config webpack.prod.js && webpack --config webpack.debug.js",
+    "build": "rimraf dist && tsc -p ./tsconfig.json && node scripts/copy-ripe-md.js",
+    "build-web": "webpack --config webpack.prod.js && webpack --config webpack.debug.js",
     "build-production": "yarn build && yarn build-web && yarn test-all",
     "docs-init": "sh .docs/scripts/init.sh",
     "docs-build": "sh .docs/scripts/build.sh",
@@ -26,31 +26,30 @@
     "url": "https://github.com/EOSIO/eosjs.git"
   },
   "dependencies": {
-    "bn.js": "5.1.2",
+    "bn.js": "5.1.3",
     "elliptic": "6.5.3",
     "hash.js": "1.1.7",
-    "pako": "1.0.11"
+    "pako": "2.0.3"
   },
   "devDependencies": {
     "@blockone/eslint-config-blockone": "^3.0.0",
     "@types/elliptic": "^6.4.12",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.14.25",
     "@types/pako": "^1.0.1",
-    "cypress": "^4.12.1",
+    "clean-webpack-plugin": "^3.0.0",
+    "cypress": "^6.4.0",
     "eosjs-ecc": "^4.0.7",
     "eslint": "^6.8.0",
     "jest": "^26.6.3",
     "jest-fetch-mock": "^3.0.3",
+    "rimraf": "^3.0.2",
     "ts-jest": "^26.5.1",
-    "ts-loader": "^7.0.5",
+    "ts-loader": "^8.0.17",
     "typescript": "^3.9.9",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12"
   },
-  "resolutions": {
-    "lodash": "4.17.19"
-  },
   "jest": {
     "automock": false,
     "setupFiles": [

diff --git a/src/tests/web.html b/src/tests/web.html
@@ -2,6 +2,7 @@
 <html>
     <head>
         <link rel='stylesheet' type='text/css' href='web.css'>
+        <script src='../../dist-web/externals.min.js'></script>
         <script src='../../dist-web/eosjs-api.min.js'></script>
         <script src='../../dist-web/eosjs-jsonrpc.min.js'></script>
         <script src='../../dist-web/eosjs-jssig.min.js'></script>

diff --git a/webpack.debug.js b/webpack.debug.js
@@ -30,5 +30,17 @@ module.exports = {
         filename: x => x.chunk.name.replace('_', '-') + '.js',
         library: '[name]',
         path: path.resolve(__dirname, 'dist-web'),
+    },
+    optimization: {
+        splitChunks: {
+            cacheGroups: {
+                vendor: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name: 'externals',
+                    filename: 'externals.js',
+                    chunks: 'all'
+                },
+            },
+        },
     }
 };
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -1,4 +1,5 @@
 const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = {
     entry: {
@@ -22,12 +23,27 @@ module.exports = {
             }
         ]
     },
+    plugins: [
+        new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ['**/*'] })
+    ],
     resolve: {
         extensions: ['.tsx', '.ts', '.js']
     },
     output: {
         filename: x => x.chunk.name.replace('_', '-') + '.min.js',
         library: '[name]',
         path: path.resolve(__dirname, 'dist-web'),
+    },
+    optimization: {
+        splitChunks: {
+            cacheGroups: {
+                vendor: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name: 'externals',
+                    filename: 'externals.min.js',
+                    chunks: 'all'
+                },
+            },
+        },
     }
 };