parent
024b680e68
commit
9b27bfb61e
|
@ -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
|
|
@ -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.
|
||||
|
|
Loading…
Reference in New Issue