[js] revise examples for onnxruntime-web-bundler (#5)

natke · May 21, 2021 · a5644a7 · a5644a7
1 parent ae2c541
commit a5644a7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/js/quick-start_onnxruntime-web-bundler/README.md b/js/quick-start_onnxruntime-web-bundler/README.md
@@ -8,7 +8,7 @@ Modern browser based applications are usually built by frameworks like [Angular]
 
 This example contians a `package.json` file, which already lists "onnxruntime-web" as dependency and webpack packages as development dependency. To work on your own `package.json`, use command `npm install onnxruntime-web` to install ONNX Runtime Web, and use command `npm install --save-dev webpack webpack-cli` to install webpack as development dependency.
 
-[Webpack](https://webpack.js.org) is a very powerful bundler. This example shows basic usage only. See also [Getting Started](https://webpack.js.org/guides/getting-started/) for more information.
+[Webpack](https://webpack.js.org) is a very powerful bundler. This example uses a simple config file `webpack.config.js` to shows basic usage only. See also Webpack's [Getting Started](https://webpack.js.org/guides/getting-started/) for more information.
 
 In this example, we load onnxruntime, create an inference session with a simple model, feed input, get output as result and write it to the HTML page. All functions are called in their basic form.
 
@@ -21,9 +21,9 @@ In this example, we load onnxruntime, create an inference session with a simple
 
 2. use webpack to make bundle:
    ```sh
-   npx webpack --mode production --entry ./main.js
+   npx webpack
    ```
-   this generates the bundle file `./dist/main.js`
+   this generates the bundle file `./dist/bundle.min.js`
 
 3. use NPM package `light-server` to serve the current folder at http://localhost:8080/
    ```sh

diff --git a/js/quick-start_onnxruntime-web-bundler/index.html b/js/quick-start_onnxruntime-web-bundler/index.html
@@ -5,6 +5,6 @@
     </header>
     <body>
         <!-- consume a single file bundle -->
-        <script src="./dist/main.js"></script>
+        <script src="./dist/bundle.min.js"></script>
     </body>
 </html>
diff --git a/js/quick-start_onnxruntime-web-bundler/package.json b/js/quick-start_onnxruntime-web-bundler/package.json
@@ -7,6 +7,7 @@
     "onnxruntime-web": "^1.8.0"
   },
   "devDependencies": {
+    "copy-webpack-plugin": "^8.1.1",
     "webpack": "^5.36.2",
     "webpack-cli": "^4.6.0"
   }

diff --git a/js/quick-start_onnxruntime-web-bundler/webpack.config.js b/js/quick-start_onnxruntime-web-bundler/webpack.config.js
@@ -0,0 +1,24 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+const path = require('path');
+const CopyPlugin = require("copy-webpack-plugin");
+
+module.exports = () => {
+    return {
+        target: ['web'],
+        entry: path.resolve(__dirname, 'main.js'),
+        output: {
+            path: path.resolve(__dirname, 'dist'),
+            filename: 'bundle.min.js',
+            library: {
+                type: 'umd'
+            }
+        },
+        plugins: [new CopyPlugin({
+            // Use copy plugin to copy *.wasm to output folder.
+            patterns: [{ from: 'node_modules/onnxruntime-web/dist/*.wasm', to: '[name][ext]' }]
+        })],
+        mode: 'production'
+    }
+};