From ea638482e583b3b1729b5114ecdd0cbe8c3251fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Rodr=C3=ADguez?= Date: Tue, 21 Mar 2017 05:37:49 +0100 Subject: [PATCH] docs(webpack): remove ts-snippets (#3398) --- .../ts-snippets/webpack.config.snippets.ts | 58 ----------------- .../webpack/ts/config/webpack.common.js | 8 ++- .../webpack/ts/src/app/app.component.ts | 4 ++ public/docs/ts/latest/guide/webpack.jade | 62 +++++++++++++++---- 4 files changed, 59 insertions(+), 73 deletions(-) delete mode 100644 public/docs/_examples/webpack/ts-snippets/webpack.config.snippets.ts diff --git a/public/docs/_examples/webpack/ts-snippets/webpack.config.snippets.ts b/public/docs/_examples/webpack/ts-snippets/webpack.config.snippets.ts deleted file mode 100644 index 2a3c596359..0000000000 --- a/public/docs/_examples/webpack/ts-snippets/webpack.config.snippets.ts +++ /dev/null @@ -1,58 +0,0 @@ -/* 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 -rules: [ - { - test: /\.ts$/, - loader: 'awesome-typescript-loader' - }, - { - test: /\.css$/, - loaders: 'style-loader!css-loader' - } -] -// #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 diff --git a/public/docs/_examples/webpack/ts/config/webpack.common.js b/public/docs/_examples/webpack/ts/config/webpack.common.js index feba2c9404..be01ad5603 100644 --- a/public/docs/_examples/webpack/ts/config/webpack.common.js +++ b/public/docs/_examples/webpack/ts/config/webpack.common.js @@ -1,3 +1,4 @@ +// #docplaster // #docregion var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); @@ -5,13 +6,16 @@ var ExtractTextPlugin = require('extract-text-webpack-plugin'); var helpers = require('./helpers'); module.exports = { - // #docregion entries + // #docregion entries, one-entry, two-entries entry: { + // #enddocregion one-entry, two-entries 'polyfills': './src/polyfills.ts', + // #docregion two-entries 'vendor': './src/vendor.ts', + // #docregion one-entry 'app': './src/main.ts' }, - // #enddocregion + // #enddocregion entries, one-entry, two-entries // #docregion resolve resolve: { diff --git a/public/docs/_examples/webpack/ts/src/app/app.component.ts b/public/docs/_examples/webpack/ts/src/app/app.component.ts index 7367660166..2c5eac0147 100644 --- a/public/docs/_examples/webpack/ts/src/app/app.component.ts +++ b/public/docs/_examples/webpack/ts/src/app/app.component.ts @@ -1,8 +1,12 @@ +// #docplaster // #docregion +// #docregion component import { Component } from '@angular/core'; +// #enddocregion component import '../assets/css/styles.css'; +// #docregion component @Component({ selector: 'my-app', templateUrl: './app.component.html', diff --git a/public/docs/ts/latest/guide/webpack.jade b/public/docs/ts/latest/guide/webpack.jade index 03a4ee1893..9645d803e0 100644 --- a/public/docs/ts/latest/guide/webpack.jade +++ b/public/docs/ts/latest/guide/webpack.jade @@ -57,22 +57,26 @@ a(id="entries-outputs") ### Entries and outputs You supply Webpack with one or more *entry* files and let it find and incorporate the dependencies that radiate from those entries. - The one entry point file in this example is the application's root file, `src/app.ts`: + The one entry point file in this example is the application's root file, `src/main.ts`: -+makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'one-entry', 'webpack.config.js (single entry)')(format=".") ++makeExample('webpack/ts/config/webpack.common.js', '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.ts', 'app-example', 'src/app.ts')(format=".") ++makeExample('webpack/ts/src/app/app.component.ts', 'component', 'src/main.ts')(format=".") :marked It sees that you're importing *@angular/core* so it adds that to its dependency list for (potential) inclusion in the bundle. - It opens the *@angular/core* file and follows _its_ network of `import` statements until it has built the complete dependency graph from `app.ts` down. + It opens the *@angular/core* file and follows _its_ network of `import` statements until it has built the complete dependency graph from `main.ts` down. Then it **outputs** these files to the `app.js` _bundle file_ designated in configuration: -+makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'one-output', 'webpack.config.js (single output)')(format=".") +.code-example + code-example(name="webpack.config.js (single output)" language="javascript"). + output: { + filename: 'app.js' + } :marked This `app.js` output bundle is a single JavaScript file that contains the application source and its dependencies. @@ -82,9 +86,19 @@ a(id="entries-outputs") You probably don't want one giant bundle of everything. It's preferable to separate the volatile application app code from comparatively stable vendor code modules. - Change the configuration so that it has two entry points, `app.ts` and `vendor.ts`: + Change the configuration so that it has two entry points, `main.ts` and `vendor.ts`: + +.code-example + code-example(language="javascript"). + entry: { + app: 'src/app.ts', + vendor: 'src/vendor.ts' + }, + + output: { + filename: '[name].js' + } -+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 the application code and @@ -110,13 +124,28 @@ a(id="loaders") Webpack _itself_ only understands JavaScript files. Teach it to transform non-JavaScript file into their JavaScript equivalents with *loaders*. Configure loaders for TypeScript and CSS as follows. - -+makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'loaders', 'webpack.config.js (two entries)')(format=".") + +.code-example + code-example(language="javascript"). + rules: [ + { + test: /\.ts$/, + loader: 'awesome-typescript-loader' + }, + { + test: /\.css$/, + loaders: 'style-loader!css-loader' + } + ] :marked As Webpack encounters `import` statements like these ... - -+makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'imports')(format=".") + +.code-example + code-example(language="typescript"). + import { AppComponent } from './app.component.ts'; + + import 'uiframework/dist/uiframework.css'; :marked ... it applies the `test` RegEx patterns. When a pattern matches the filename, Webpack processes the file with the associated loader. @@ -137,7 +166,11 @@ a(id="plugins") Webpack has a build pipeline with well-defined phases. Tap into that pipeline with plugins such as the `uglify` minification plugin: -+makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'plugins')(format=".") +.code-example + code-example(language="javascript"). + plugins: [ + new webpack.optimize.UglifyJsPlugin() + ] a(id="configure-webpack") .l-main-section @@ -249,7 +282,10 @@ a#common-resolve The app will `import` dozens if not hundreds of JavaScript and TypeScript files. You could write `import` statements with explicit extensions like this example: -+makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'single-import')(format=".") + +.code-example + code-example(language="typescript"). + import { AppComponent } from './app.component.ts'; :marked But most `import` statements don't mention the extension at all.