docs(webpack): checkin missing snippets; .js->.ts

closes #1375

Author: wardbell

public/docs/_examples/webpack/ts-snippets/webpack.config.snippets.ts

@@ -0,0 +1,59 @@
+/* tslint:disable */
+// #docregion one-entry
+entry: {
+  app: 'src/app.ts'
+}
+// #enddocregion one-entry
+
+// #docregion app-example
+import { Component } from '@angular/core';
+
+@Component({
+  ...
+})
+export class AppComponent {}
+// #enddocregion app-example
+
+// #docregion one-output
+output: {
+  filename: 'app.js'
+}
+// #enddocregion one-output
+
+// #docregion two-entries
+entry: {
+  app: 'src/app.ts',
+  vendor: 'src/vendor.ts'
+},
+
+output: {
+  filename: '[name].js'
+}
+// #enddocregion two-entries
+
+// #docregion loaders
+loaders: [
+  {
+    test: /\.ts$/
+    loaders: 'ts'
+  },
+  {
+    test: /\.css$/
+    loaders: 'style!css'
+  }
+]
+// #enddocregion loaders
+
+// #docregion imports
+// #docregion single-import
+import { AppComponent } from './app.component.ts';
+// #enddocregion single-import
+import 'uiframework/dist/uiframework.css';
+// #enddocregion imports
+
+// #docregion plugins
+plugins: [
+  new webpack.optimize.UglifyJsPlugin()
+]
+// #enddocregion plugins
+// #enddocregion

public/docs/ts/latest/guide/webpack.jade

@@ -52,20 +52,20 @@ a(id="entries-outputs")
   We feed Webpack with one or more *entry* files and let it find and incorporate the dependencies that radiate from those entries. 
   In this example, we start from the application's root file, `src/app.ts`:
 
-+makeExample('webpack/ts-snippets/webpack.config.snippets.js', 'one-entry', 'webpack.config.js (single entry)')(format=".")
++makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'one-entry', 'webpack.config.js (single entry)')(format=".")
 
 :marked
   Webpack inspects that file and traverses its `import` dependencies recursively.
 
-+makeExample('webpack/ts-snippets/webpack.config.snippets.js', 'app-example', 'src/app.ts')(format=".")
++makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'app-example', 'src/app.ts')(format=".")
 
 :marked
   Here it sees that we're importing *@angular/core* so it adds that to its dependency list for (potential) inclusion in the bundle.
   It opens *@angular/core* and follows _its_ network of `import` statements until it has build the complete dependency graph from `app.ts` down.
 
   Then it **outputs** these files to the `app.js` _bundle file_ designated in configuration:
 
-+makeExample('webpack/ts-snippets/webpack.config.snippets.js', 'one-output', 'webpack.config.js (single output)')(format=".")
++makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'one-output', 'webpack.config.js (single output)')(format=".")
 
 :marked
   This `app.js` output bundle is a single JavaScript file that contains our application source and its dependencies. 
@@ -77,7 +77,7 @@ a(id="entries-outputs")
 
   We change the configuration so that we have two entry points, `app.ts` and `vendor.ts`:
 
-+makeExample('webpack/ts-snippets/webpack.config.snippets.js', 'two-entries','webpack.config.js (two entries)')(format=".")
++makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'two-entries','webpack.config.js (two entries)')(format=".")
 :marked
   Webpack constructs two separate dependency graphs
   and emits *two* bundle files, one called `app.js` containing only our application code and 
@@ -105,12 +105,12 @@ a(id="loaders")
   We teach it to process such files into JavaScript with *loaders*. 
   Here we configure loaders for TypeScript and CSS:
 
-+makeExample('webpack/ts-snippets/webpack.config.snippets.js', 'loaders', 'webpack.config.js (two entries)')(format=".")
++makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'loaders', 'webpack.config.js (two entries)')(format=".")
 
 :marked
   As Webpack encounters `import` statements like these ...
 
-+makeExample('webpack/ts-snippets/webpack.config.snippets.js', 'imports')(format=".")
++makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'imports')(format=".")
 
 :marked
   ... it applies the `test` RegEx patterns. When a pattern matches the filename, Webpack processes the file with the associated loader. 
@@ -131,7 +131,7 @@ a(id="plugins")
   Webpack has a build pipeline with well-defined phases.
   We tap into that pipeline with plugins such as the `uglify` minification plugin:
 
-+makeExample('webpack/ts-snippets/webpack.config.snippets.js', 'plugins')(format=".")
++makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'plugins')(format=".")
 
 a(id="configure-webpack")
 .l-main-section
@@ -212,7 +212,7 @@ a(id="common-configuration")
 :marked
   Our app will `import` dozens if not hundreds of JavaScript and TypeScript files. 
   We _might_ write `import` statements with explicit extensions as in this example:
-+makeExample('webpack/ts-snippets/webpack.config.snippets.js', 'single-import')(format=".")
++makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'single-import')(format=".")
 
 :marked
   But most of our `import` statements won't mention the extension at all.