fix web components webpack integration docs (microsoft#20429)

mlp73 · Jan 17, 2022 · 4579e28 · 4579e28
1 parent 7ef94e5
commit 4579e28
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 30 deletions.
diff --git a/change/@fluentui-web-components-9b0072b3-17e5-441c-bad4-32af33312546.json b/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"
+}
diff --git a/packages/web-components/package.json b/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"
  }

diff --git a/packages/web-components/src/_docs/integrations/webpack.stories.mdx b/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/).

diff --git a/yarn.lock b/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"