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

closes #1375
This commit is contained in:
Ward Bell 2016-05-12 18:16:08 -07:00
parent 024b680e68
commit 9b27bfb61e
2 changed files with 67 additions and 8 deletions

View File

@ -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

View File

@ -52,12 +52,12 @@ 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.
@ -65,7 +65,7 @@ a(id="entries-outputs")
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.