webpack

2022-08-07 03:48:40 -04:00 · 2022-08-07 03:48:40 -04:00 · 4e0187005a
parent a1f9f5e4d9
commit 4e0187005a
9 changed files with 242 additions and 63 deletions
--- a/docz/docs/02-installation/01-standalone.mdx
+++ b/docz/docs/02-installation/01-standalone.mdx
@ -161,7 +161,7 @@ Bower is deprecated and the maintainers recommend using other tools.
 [Bower](https://bower.io/) plays nice with the CDN tarballs:

 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npx bower install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npx bower install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>

 Bower will place the standalone scripts in `bower_components/js-xlsx/dist/`
--- a/docz/docs/02-installation/02-frameworks.md
+++ b/docz/docs/02-installation/02-frameworks.md
@ -18,17 +18,17 @@ proper ECMAScript Module release which can be optimized with developer tools.
 <Tabs>
  <TabItem value="npm" label="npm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="pnpm" label="pnpm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="yarn" label="Yarn" default>
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
 </Tabs>
@ -53,20 +53,20 @@ For existing projects, the easiest approach is to uninstall and reinstall:
 <Tabs>
  <TabItem value="npm" label="npm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm rm --save xlsx
-$ npm i --save file:vendor/xlsx-${current}.tgz`}
+npm rm --save xlsx
+npm i --save file:vendor/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="pnpm" label="pnpm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ pnpm rm xlsx
-$ pnpm install file:vendor/xlsx-${current}.tgz`}
+pnpm rm xlsx
+pnpm install file:vendor/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="yarn" label="Yarn" default>
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ yarn remove xlsx
-$ yarn add file:vendor/xlsx-${current}.tgz`}
+yarn remove xlsx
+yarn add file:vendor/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
 </Tabs>
--- a/docz/docs/02-installation/04-nodejs.md
+++ b/docz/docs/02-installation/04-nodejs.md
@ -23,17 +23,17 @@ Tarballs can be directly installed using a package manager:
 <Tabs>
  <TabItem value="npm" label="npm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="pnpm" label="pnpm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="yarn" label="Yarn" default>
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
 </Tabs>
@ -52,20 +52,20 @@ For existing projects, the easiest approach is to uninstall and reinstall:
 <Tabs>
  <TabItem value="npm" label="npm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm rm --save xlsx
-$ npm i --save file:vendor/xlsx-${current}.tgz`}
+npm rm --save xlsx
+npm i --save file:vendor/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="pnpm" label="pnpm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ pnpm rm xlsx
-$ pnpm install file:vendor/xlsx-${current}.tgz`}
+pnpm rm xlsx
+pnpm install file:vendor/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="yarn" label="Yarn" default>
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ yarn remove xlsx
-$ yarn add file:vendor/xlsx-${current}.tgz`}
+yarn remove xlsx
+yarn add file:vendor/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
 </Tabs>
@ -87,17 +87,17 @@ For general stability, "vendoring" modules is the recommended approach:
 <Tabs>
  <TabItem value="npm" label="npm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm i --save file:vendor/xlsx-${current}.tgz`}
+npm i --save file:vendor/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="pnpm" label="pnpm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ pnpm install file:vendor/xlsx-${current}.tgz`}
+pnpm install file:vendor/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="yarn" label="Yarn" default>
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ yarn add  file:vendor/xlsx-${current}.tgz`}
+yarn add  file:vendor/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
 </Tabs>
--- a/docz/docs/03-example.mdx
+++ b/docz/docs/03-example.mdx
@ -249,7 +249,7 @@ hosted (no `file:///` access).
 Install the dependencies:

 ```bash
-$ npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
+npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
 ```

 Save the following script to `snippet.js` and run `node snippet.js`:
@ -297,7 +297,7 @@ like `axios` presents a similar API for fetching data:
 Install the dependencies:

 ```bash
-$ npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
+npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
 ```

 The differences in the script are highlighted below.
--- a/docz/docs/04-getting-started/03-demos/03-database.md
+++ b/docz/docs/04-getting-started/03-demos/03-database.md
@ -284,7 +284,7 @@ runs a prepared statement and returns an array of JS objects.
 1) Install the dependencies:

 ```bash
-$ npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz better-sqlite3
+npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz better-sqlite3
 ```

 2) Save the following to `node.mjs`:
@ -334,7 +334,7 @@ Bun ships with a built-in high-performance module `bun:sqlite`.
 1) Install the dependencies:

 ```bash
-$ npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
+npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
 ```

 2) Save the following to `bun.mjs`:
@ -780,7 +780,7 @@ It was verified in Node 16.16.0.
 1) Install the dependencies:

 ```bash
-$ npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz mongodb
+npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz mongodb
 ```

 2) Start a MongoDB server on localhost (follow official instructions)
--- a/docz/docs/04-getting-started/03-demos/09-bundler.md
+++ b/docz/docs/04-getting-started/03-demos/09-bundler.md
@ -46,17 +46,17 @@ Web Worker scripts can be bundled using the same approach.
 <Tabs>
  <TabItem value="npm" label="npm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="pnpm" label="pnpm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="yarn" label="Yarn" default>
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
 </Tabs>
@ -98,17 +98,17 @@ local testing, a bundled script can save tens of milliseconds per run.
 <Tabs>
  <TabItem value="npm" label="npm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="pnpm" label="pnpm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="yarn" label="Yarn" default>
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
 </Tabs>
@ -186,17 +186,17 @@ Both the `node` and `browser` platforms work out of the box.
 <Tabs>
  <TabItem value="npm" label="npm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="pnpm" label="pnpm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="yarn" label="Yarn" default>
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
 </Tabs>
@ -264,17 +264,17 @@ npx http-server .
 <Tabs>
  <TabItem value="npm" label="npm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="pnpm" label="pnpm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="yarn" label="Yarn" default>
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
 </Tabs>
@ -405,17 +405,17 @@ document.getElementById("xport").onclick = async() => {
 <Tabs>
  <TabItem value="npm" label="npm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="pnpm" label="pnpm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="yarn" label="Yarn" default>
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
 </Tabs>
@ -472,17 +472,17 @@ Rollup requires `@rollup/plugin-node-resolve` to support NodeJS modules:
 <Tabs>
  <TabItem value="npm" label="npm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
 </code></pre>
  </TabItem>
  <TabItem value="pnpm" label="pnpm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
+pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
 </code></pre>
  </TabItem>
  <TabItem value="yarn" label="Yarn" default>
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
 </code></pre>
  </TabItem>
 </Tabs>
@ -566,17 +566,17 @@ Snowpack works with no caveats.
 <Tabs>
  <TabItem value="npm" label="npm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="pnpm" label="pnpm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="yarn" label="Yarn" default>
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
 </Tabs>
@ -665,17 +665,17 @@ SWC provides `spack` for bundling scripts.
 <Tabs>
  <TabItem value="npm" label="npm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
 </code></pre>
  </TabItem>
  <TabItem value="pnpm" label="pnpm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
+pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
 </code></pre>
  </TabItem>
  <TabItem value="yarn" label="Yarn" default>
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
 </code></pre>
  </TabItem>
 </Tabs>
@ -888,7 +888,7 @@ a `require` implementation when loading [`main.js`](pathname:///systemjs/main.js
 1) Install the dependencies:

 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz systemjs@0.19`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz systemjs@0.19`}
 </code></pre>

 2) Save the following script to `SheetJSystem.js`:
@ -988,7 +988,7 @@ When prompted for **Framework**, select **`vue`** then **`vue-ts`**
 2) Add the SheetJS dependency:

 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>

 3) Replace `src\components\HelloWorld.vue` with:
@ -1054,6 +1054,186 @@ Access http://localhost:8080 in your web browser.

 </details>

+## Webpack
+
+The ECMAScript Module build has no `require` or `import` statements and does
+not use `process` or any variable that Webpack could interpret as a NodeJS
+feature.  Various `package.json` fields have been added to appease various
+Webpack versions starting from the `2.x` series.
+
+:::note CommonJS and ESM
+
+Webpack bundled the CommonJS build in older versions of the library.  Version
+`0.18.1` changed the NodeJS module package so that Webpack uses the ESM build.
+
+The ESM build does not include the codepage support library for XLS reading.
+[As described in the installation instructions](../../installation/frameworks),
+the codepage dependency should be imported explicitly:
+
+```js
+import * as XLSX from 'xlsx';
+import * as cptable from 'xlsx/dist/cpexcel.full.mjs';
+set_cptable(cptable);
+```
+
+:::
+
+<details><summary><b>Complete Example</b> (click to show)</summary>
+
+1) Install the tarball using a package manager:
+
+<Tabs>
+  <TabItem value="npm" label="npm">
+<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+</code></pre>
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
+pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+</code></pre>
+  </TabItem>
+  <TabItem value="yarn" label="Yarn" default>
+<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+</code></pre>
+  </TabItem>
+</Tabs>
+
+2) Save the following to `index.js`:
+
+```js title="index.js"
+// highlight-next-line
+import { utils, version, writeFileXLSX } from 'xlsx/xlsx.mjs';
+
+document.getElementById("xport").addEventListener("click", async() => {
+/* fetch JSON data and parse */
+const url = "https://sheetjs.com/executive.json";
+const raw_data = await (await fetch(url)).json();
+
+/* filter for the Presidents */
+const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));
+
+/* flatten objects */
+const rows = prez.map(row => ({
+  name: row.name.first + " " + row.name.last,
+  birthday: row.bio.birthday
+}));
+
+/* generate worksheet and workbook */
+const worksheet = utils.json_to_sheet(rows);
+const workbook = utils.book_new();
+utils.book_append_sheet(workbook, worksheet, "Dates");
+
+/* fix headers */
+utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });
+
+/* calculate column width */
+const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10);
+worksheet["!cols"] = [ { wch: max_width } ];
+
+/* create an XLSX file and try to save to Presidents.xlsx */
+writeFileXLSX(workbook, "Presidents.xlsx");
+});
+```
+
+3) Create a small `webpack.config.js` script that writes to `index.min.js`:
+
+```js title="webpack.config.js"
+module.exports = {
+  /* entry point index.js */
+  entry: './index.js',
+
+  /* write to index.min.js */
+  output: { path:__dirname, filename: './index.min.js' }
+}
+```
+
+4) Build for production.  The command depends on the version of webpack:
+
+<Tabs>
+  <TabItem value="23" label="2.x and 3.x">
+
+**Webpack 2.x**
+
+```bash
+npx webpack@2.x -p
+```
+
+**Webpack 3.x**
+
+```bash
+npx webpack@3.x -p
+```
+
+:::caution
+
+The minifier that ships with Webpack 2.x does not handle `async` functions. The
+unminified code generated by Webpack will work for the purposes of the demo. It
+is strongly recommended to upgrade to a newer version of Webpack.  If that is
+not feasible, the example should be replaced with a traditional Promise chain.
+
+:::
+
+  </TabItem>
+  <TabItem value="4+" label="4.x, 5.x and beyond" default>
+
+:::warning Pinning specific versions of webpack
+
+The webpack tooling is not designed for switching between versions. A specific
+version above 4.0 can be pinned by locally installing webpack and the CLI tool.
+
+:::
+
+**Webpack 4.x**
+
+```bash
+npm install --save webpack@4.x webpack-cli
+npx webpack --mode=production
+```
+
+**Webpack 5.x**
+
+```bash
+npm install --save webpack@5.x webpack-cli
+npx webpack --mode=production
+```
+
+**Webpack latest**
+
+```bash
+npm install --save webpack webpack-cli
+npx webpack --mode=production
+```
+
+  </TabItem>
+</Tabs>
+
+
+5) Create a small HTML page that loads the script.  Save to `index.html`:
+
+```html title="index.html"
+<!DOCTYPE html>
+<html lang="en">
+  <head></head>
+  <body>
+    <h1>SheetJS Presidents Demo</h1>
+    <button id="xport">Click here to export</button>
+    <script src="./index.min.js"></script>
+  </body>
+</html>
+```
+
+6) Start a local HTTP server and go to http://localhost:8080/
+
+```bash
+npx http-server .
+```
+
+Click on "Click here to export" to generate a file.
+
+</details>
+
 ## WMR

 WMR follows the same structure as Snowpack
@ -1065,17 +1245,17 @@ WMR follows the same structure as Snowpack
 <Tabs>
  <TabItem value="npm" label="npm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="pnpm" label="pnpm">
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
  <TabItem value="yarn" label="Yarn" default>
 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>
  </TabItem>
 </Tabs>
--- a/docz/docs/04-getting-started/03-demos/index.md
+++ b/docz/docs/04-getting-started/03-demos/index.md
@ -21,7 +21,6 @@ The demo projects include small runnable examples and short explainers.
 - [`Angular.JS`](./legacy#angularjs)
 - [`Angular 2+ and Ionic`](https://github.com/SheetJS/SheetJS/tree/master/demos/angular2/)
 - [`Knockout`](./legacy#knockout)
- [`Meteor`](https://github.com/SheetJS/SheetJS/tree/master/demos/meteor/)
 - [`React, React Native and NextJS`](https://github.com/SheetJS/SheetJS/tree/master/demos/react/)
 - [`VueJS, WeeX, and NuxtJS`](https://github.com/SheetJS/SheetJS/tree/master/demos/vue/)

@ -62,7 +61,7 @@ The demo projects include small runnable examples and short explainers.
 - [`rollup`](./bundler#rollup)
 - [`snowpack`](./bundler#snowpack)
 - [`swc`](./bundler#swc)
- [`systemjs`](https://github.com/SheetJS/SheetJS/tree/master/demos/systemjs/)
+- [`systemjs`](./bundler#systemjs)
 - [`vite`](./bundler#vite)
- [`webpack 2.x`](https://github.com/SheetJS/SheetJS/tree/master/demos/webpack/)
+- [`webpack`](./bundler#webpack)
 - [`wmr`](./bundler#wmr)
--- a/docz/docs/06-solutions/01-input.md
+++ b/docz/docs/06-solutions/01-input.md
@ -440,7 +440,7 @@ server.run();`}</code></pre>
 Deno must be run with the `--allow-net` flag to enable network requests:

 ```bash
-$ deno run --allow-net test-server.ts
+deno run --allow-net test-server.ts
 ```

 To test, submit a POST request to http://localhost:7262 including a file:
@ -589,7 +589,7 @@ const workbook = XLSX.read(data);`}</code></pre>
 Deno must be run with the `--allow-net` flag to enable network requests:

 ```
-$ deno run --allow-net test-fetch.ts
+deno run --allow-net test-fetch.ts
 ```

 :::
--- a/docz/docs/08-api/07-write-options.md
+++ b/docz/docs/08-api/07-write-options.md
@ -89,7 +89,7 @@ XLSX.writeFile(wb, "textport.numbers", {numbers: XLSX_ZAHL_PAYLOAD, compression:
 After installing the package:

 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>

 The scripts will be available at `xlsx/dist/xlsx.zahl` (CommonJS) and
@ -113,7 +113,7 @@ XLSX.writeFile(wb, "textport.numbers", {numbers: XLSX_ZAHL_PAYLOAD, compression:
 After installing the package:

 <pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 </code></pre>

 The scripts will be available at `xlsx/dist/xlsx.zahl` (CommonJS) and