2017-12-05 3 views
1

私はAngularを初めて使用しており、アプリケーションを提供する際にWebpackがどのような役割を果たしているのか疑問に思っていました。最初の印象の間、私はwebpackがビルドとパッケージツールとして機能し、必要なJSファイルをすべて別々のバンドルにグループ化することを知りました。私は、しかし、Webpackの設定ファイルを見つけることができなかったと角度とWebpackが一緒に絵に来る方法を把握できませんでした。AngularのURLでWebpackの役割

私は角度4アプリを提供するとき、これは端末に印刷されたものです。舞台裏で何が起こっているのかを正確に理解することはできません。

webpack: Compiling... 
Date: 2017-12-05T07:13:25.436Z 
Hash: a6d360a858a29480ebbc 
Time: 310ms 
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] 
chunk {main} main.bundle.js, main.bundle.js.map (main) 35.4 kB {vendor} [initial] [rendered] 
kB {vendor} [initial] [rendered]       ap (polyfills) 200 kB {inline} [initial]chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 200 kB {inline} [initial] 
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 195 kB {inline} [initial]chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.65 MB [initial] 
webpack: Compiled successfully. 

助けていただければ幸いです。

答えて

2

角度CLIは、効果的にあなたが合格プロジェクト設定オプションに基づいて、その場でWebPACKの設定ファイルを一緒に置きます。

あなたはこの設定hereを生成するコードの主要な部分、および渡すコードを見つけることができますそれはあなたがng servehereを実行するときにWebpackに。

+0

プロセスを少し複雑にして、webpackがこれらのパッケージをどのように作成しているかが明確になるようにしてください。また可能であれば、Angularの文脈で詳細に説明されているリンクも可能です。ありがとうございました –

+0

@SalmanKazmi:私がリンクしているコードは標準のWebpack設定を生成します([here](https://webpack.js.org/configuration/)に記載されています)、その時点からビルドは他のWebpackビルドと同じように効果的に動作します。 –

0

基本的にはまったく正しい!

多分あなたは公式文書のwebpack記事を見たいと思っていますか? https://angular.io/guide/webpack

はところで:WebPACKのは後半2016年以来使用され、たとえば、IBMアカデミーのためのブロッコリー& SystemJSに比べていくつかの利点を持っており、より高速回を構築しています。

+0

私があなたが言及したリンクで提供される詳細な説明を読んだ。有用ではあるが、情報は一般的にWebpackを説明することを目的としている。私は物事を詳細に説明するリソースを探しています。しかし、ありがとう。 –

+0

あなたも歓迎です、私にも新しいことですが、このリンクを見つけて、あなたがそれを見たいかもしれないと思った;) – x2twelve

関連する問題