fix web components webpack integration docs

change/@fluentui-web-components-9b0072b3-17e5-441c-bad4-32af33312546.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix web components webpack integration docs and update the package dependencies",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/package.json

@@ -89,7 +89,7 @@
   "dependencies": {
     "@microsoft/fast-colors": "^5.1.0",
     "@microsoft/fast-element": "^1.6.0",
-    "@microsoft/fast-foundation": "^2.23.0",
+    "@microsoft/fast-foundation": "^2.24.0",
     "@microsoft/fast-web-utilities": "^5.0.0",
     "tslib": "^1.13.0"
   }

packages/web-components/src/_docs/integrations/webpack.stories.mdx

@@ -75,46 +75,55 @@ You can learn more about `tsconfig.json` options in [the official TypeScript doc
 Next, create a `webpack.config.js` file in the root of your project folder with the following source:
 
 ```js
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const path = require('path');
 
-module.exports = function (env, { mode }) {
+module.exports = function(env, { mode }) {
   const production = mode === 'production';
   return {
     mode: production ? 'production' : 'development',
     devtool: production ? 'source-map' : 'inline-source-map',
     entry: {
-      app: ['./src/main.ts'],
+      app: ['./src/main.ts']
     },
     output: {
+      filename: 'bundle.js'
       filename: 'bundle.js',
+      publicPath:'/'
     },
     resolve: {
       extensions: ['.ts', '.js'],
-      modules: ['src', 'node_modules'],
+      modules: ['src', 'node_modules']
     },
     devServer: {
       port: 9000,
       historyApiFallback: true,
-      writeToDisk: true,
       open: !process.env.CI,
-      lazy: false,
+      devMiddleware: {
+        writeToDisk: true,
+      },
+      static: {
+        directory: path.join(__dirname, './')
+      }
     },
-    plugins: [new CleanWebpackPlugin()],
+    plugins: [
+      new CleanWebpackPlugin()
+    ],
     module: {
       rules: [
         {
           test: /\.ts$/i,
           use: [
             {
-              loader: 'ts-loader',
-            },
+              loader: 'ts-loader'
+            }
           ],
-          exclude: /node_modules/,
-        },
-      ],
-    },
-  };
-};
+          exclude: /node_modules/
+        }
+      ]
+    }
+  }
+}
 ```
 
 This setup uses `ts-loader` to process TypeScript. It will also enable both a production mode and a development mode that watches your source, recompiling and refreshing your browser as things change. You can read more about Webpack configuration in [the official Webpack documentation](https://webpack.js.org/).

yarn.lock

@@ -2655,18 +2655,18 @@
   resolved "https://registry.yarnpkg.com/@microsoft/fast-colors/-/fast-colors-5.1.3.tgz#5c46147401a823835a3833e3e18dae7f06016966"
   integrity sha512-XDEnRYxPO5P3Jsizm4TCxLu1osS/uV3Lym6SfRhq2PxfXPTgEcdvOYDUXyV2drqebs3U5VQnOcYcJiSp73xhng==
 
-"@microsoft/fast-element@^1.6.0", "@microsoft/fast-element@^1.6.1":
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.6.1.tgz#53cf476fc4cf3ea5ac90a51c1032b782f4ee9611"
-  integrity sha512-6wCL1yj5SSfqEq/GAkWeKdcE50NTx3VLINpSYG9cpxckgNGXHErsjDwbqwX3399e/O04BVwyIjILip11DFJP9w==
+"@microsoft/fast-element@^1.6.0", "@microsoft/fast-element@^1.6.2":
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.6.2.tgz#414abc9f49fde85e12002e01025c5cc3dddc16ac"
+  integrity sha512-TrFOpe9k9xIK2iLfIG5T2+bavUAWBvAC/KQ/3ecFsK65l9PAZ/j3zlkyLxNrpIksFtUBkfVdV03kwFurZjqzKQ==
 
-"@microsoft/fast-foundation@^2.23.0":
-  version "2.23.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.23.0.tgz#8bbba33920ee3a0b6a8709b29ede470844faa3c1"
-  integrity sha512-71/oN+Mi6ZTgDcJ9EJlCLoUOUN+YyUSkek2VIR1uP5ezYlGutVj5M/t3/XAtENSg59x2pQV/Jk9Ix1uxY1iGfw==
+"@microsoft/fast-foundation@^2.24.0":
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.24.0.tgz#ab78f99e91cf96d5d440172eaa9b5eff25e15d51"
+  integrity sha512-rwUS/QAIaOJ5Uceo42JrgzIUhIAh305g0UZgCc633g4/OOVYa/zjRAG5QBxdrrjYN+U3mJyOWrsY/FJkJpEcQg==
   dependencies:
-    "@microsoft/fast-element" "^1.6.1"
-    "@microsoft/fast-web-utilities" "^5.0.1"
+    "@microsoft/fast-element" "^1.6.2"
+    "@microsoft/fast-web-utilities" "^5.0.2"
     "@microsoft/tsdoc-config" "^0.13.4"
     tabbable "^5.2.0"
     tslib "^1.13.0"
@@ -2678,10 +2678,10 @@
   dependencies:
     exenv-es6 "^1.0.0"
 
-"@microsoft/fast-web-utilities@^5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-5.0.1.tgz#091f5f9400e8a77b655a2b6d36c41f2807532942"
-  integrity sha512-WvQXkNzlwh3n7tD0xb6seSy5U2rAnPE/+AFkJis56F7PE52qcd8PDqnbR1KIyshZlpnAm88cGCTRN6hxoi9ZoA==
+"@microsoft/fast-web-utilities@^5.0.2":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-5.0.2.tgz#666631e38108893e4ec63cd8f52025f5f35a34a1"
+  integrity sha512-J8Wy64V1NWF/UjFJ1mvmJNNPChbWobsNkJ8xNaV5/M+VKOQEOheojrOS+RmOUG7DKTBlCLIbUvyXsj1YiCfwkA==
   dependencies:
     exenv-es6 "^1.0.0"