Updating the "Extend Webpack" example to correspond to the edits to the documentation. (#332)

samples/js-extend-webpack/config/config.json

@@ -1,13 +1,18 @@
 {
-  "entries": [
-    {
-      "entry": "./lib/webparts/webpackExample/WebpackExampleWebPart.js",
-      "manifest": "./src/webparts/webpackExample/WebpackExampleWebPart.manifest.json",
-      "outputPath": "./dist/webpack-example.bundle.js"
+  "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "webpack-example-bundle": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/webpackExample/WebpackExampleWebPart.js",
+          "manifest": "./src/webparts/webpackExample/WebpackExampleWebPart.manifest.json"
+        }
+      ]
     }
-  ],
-  "externals": {},
+  },
   "localizedResources": {
-    "webpackExampleStrings": "webparts/webpackExample/loc/{locale}.js"
-  }
-}
+    "webpackExampleStrings": "lib/webparts/webpackExample/loc/{locale}.js"
+  },
+  "externals": {}
+}

samples/js-extend-webpack/config/tslint.json

@@ -29,7 +29,6 @@
       "no-switch-case-fall-through": true,
       "no-unnecessary-semicolons": true,
       "no-unused-expression": true,
-      "no-unused-imports": true,
       "no-use-before-declare": true,
       "no-with-statement": true,
       "semicolon": true,

samples/js-extend-webpack/gulpfile.js

@@ -3,14 +3,24 @@
 const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
 
-build.configureWebpack.mergeConfig({ 
-  additionalConfiguration: (generatedConfiguration) => { 
-    generatedConfiguration.module.loaders.push([ 
-      { test: /\.md$/, loader: "html!markdown" } 
-    ]); 
+build.configureWebpack.mergeConfig({
+  additionalConfiguration: (generatedConfiguration) => {
+    generatedConfiguration.module.rules.push(
+      {
+        test: /\.md$/,
+        use: [
+          {
+            loader: 'html-loader'
+          },
+          {
+            loader: 'markdown-loader'
+          }
+        ]
+      }
+    );
 
-    return generatedConfiguration; 
-  } 
+    return generatedConfiguration;
+  }
 });
 
 build.initialize(gulp);

samples/js-extend-webpack/package.json

@@ -6,19 +6,16 @@
     "node": ">=0.10.0"
   },
   "dependencies": {
-    "@microsoft/sp-client-base": "~1.0.0",
-    "@microsoft/sp-core-library": "~1.0.0",
-    "@microsoft/sp-webpart-base": "~1.0.0",
-    "@types/webpack-env": ">=1.12.1 <1.14.0"
+    "@microsoft/sp-core-library": "~1.3.0",
+    "@microsoft/sp-webpart-base": "~1.3.0",
+    "@types/webpack-env": "1.13.1"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "1.0.0",
-    "@microsoft/sp-module-interfaces": "1.0.0",
-    "@microsoft/sp-webpart-workbench": "1.0.0",
-    "@types/chai": ">=3.4.34 <3.6.0",
-    "@types/mocha": ">=2.2.33 <2.6.0",
+    "@microsoft/sp-build-web": "1.3.0",
+    "@microsoft/sp-module-interfaces": "1.3.0",
+    "@microsoft/sp-webpart-workbench": "1.3.0",
     "gulp": "~3.9.1",
-    "markdown-loader": "^0.1.7"
+    "markdown-loader": "~2.0.1"
   },
   "scripts": {
     "build": "gulp bundle",

samples/js-extend-webpack/src/my-markdown.md

@@ -1,5 +1,5 @@
 # Hello Markdown
 
-*Markdown* is a simple markup format to write content. 
+*Markdown* is a simple markup format to write content.
 
-You can also format text as **bold** or *italics* or ***bold italics***. 
+You can also format text as **bold** or *italics* or ***bold italics***.

samples/js-extend-webpack/src/webparts/webpackExample/WebpackExample.module.scss

@@ -1,39 +0,0 @@
-@import "~/office-ui-fabric-react/dist/sass/Fabric.Common";
-
-.row {
-  @include ms-Grid-row;
-  @include ms-bgColor-themeDark;
-  @include ms-fontColor-white;
-
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
-  max-width: 700px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-.column {
-  @include ms-Grid-col;
-  @include ms-u-lg10;
-  @include ms-u-xl8;
-  @include ms-u-lgPush1;
-  @include ms-u-xlPush2;
-}
-
-.title {
-  @include ms-font-xl;
-  @include ms-fontColor-white;
-}
-
-.subtitle {
-  @include ms-font-l;
-  @include ms-fontColor-white;
-}
-
-.description {
-  @include ms-font-l;
-  @include ms-fontColor-white;
-}
-
-.button {
-  text-decoration: none;
-}

samples/js-extend-webpack/src/webparts/webpackExample/WebpackExampleWebPart.ts

@@ -7,12 +7,12 @@ import {
 import * as strings from 'webpackExampleStrings';
 import { IWebpackExampleWebPartProps } from './IWebpackExampleWebPartProps';
 
-const strMarkdown = require('../../my-markdown.md') as string;
+const markdownString: string = require<string>('../../my-markdown.md');
 
 export default class WebpackExampleWebPart extends BaseClientSideWebPart<IWebpackExampleWebPartProps> {
 
   public render(): void {
-    this.domElement.innerHTML = strMarkdown;
+    this.domElement.innerHTML = markdownString;
   }
 
   protected get dataVersion(): Version {
@@ -30,9 +30,12 @@ export default class WebpackExampleWebPart extends BaseClientSideWebPart<IWebpac
             {
               groupName: strings.BasicGroupName,
               groupFields: [
-                PropertyPaneTextField('description', {
-                  label: strings.DescriptionFieldLabel
-                })
+                PropertyPaneTextField(
+                  'description',
+                  {
+                    label: strings.DescriptionFieldLabel
+                  }
+                )
               ]
             }
           ]