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.
|
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`:
|
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
|
:marked
|
||||||
Webpack inspects that file and traverses its `import` dependencies recursively.
|
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
|
:marked
|
||||||
Here it sees that we're importing *@angular/core* so it adds that to its dependency list for (potential) inclusion in the bundle.
|
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:
|
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
|
:marked
|
||||||
This `app.js` output bundle is a single JavaScript file that contains our application source and its dependencies.
|
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`:
|
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
|
:marked
|
||||||
Webpack constructs two separate dependency graphs
|
Webpack constructs two separate dependency graphs
|
||||||
and emits *two* bundle files, one called `app.js` containing only our application code and
|
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*.
|
We teach it to process such files into JavaScript with *loaders*.
|
||||||
Here we configure loaders for TypeScript and CSS:
|
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
|
:marked
|
||||||
As Webpack encounters `import` statements like these ...
|
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
|
:marked
|
||||||
... it applies the `test` RegEx patterns. When a pattern matches the filename, Webpack processes the file with the associated loader.
|
... 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.
|
Webpack has a build pipeline with well-defined phases.
|
||||||
We tap into that pipeline with plugins such as the `uglify` minification plugin:
|
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")
|
a(id="configure-webpack")
|
||||||
.l-main-section
|
.l-main-section
|
||||||
|
@ -212,7 +212,7 @@ a(id="common-configuration")
|
||||||
:marked
|
:marked
|
||||||
Our app will `import` dozens if not hundreds of JavaScript and TypeScript files.
|
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:
|
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
|
:marked
|
||||||
But most of our `import` statements won't mention the extension at all.
|
But most of our `import` statements won't mention the extension at all.
|
||||||
|
|
Loading…
Reference in New Issue