序文
理解しましょう、webpackとは正確には何ですか? なぜこれがあるのですか？主に、任意の言語でのプロジェクト開発では、保守性を確保するためにプロジェクト コードを多くのモジュールに分割します. Web フロントエンド vue 開発モードでは、これらの管理モジュールは webpack です.
もちろん、これは他の多くの追加機能も提供します. 深い理解がある限り、フロントエンドエンジニアリングがその背後にあるコードを開発する必要があることを知ることができます. その他の追加機能の短いリスト:
1. webpackとは
webpack とは? プロジェクトを開発しているときに、オブジェクト指向のコードを記述すると、関数が肥大化するという問題が発生します。メンテナンスは困難または不可能であるため、通常、プロジェクトを開発するときは、プロジェクトを多くのファイルに分割し、後でメンテナンスを容易にするためにそれらをインデックス ファイルに導入し、問題のあるファイルを見つけます。どのファイルがいいですか。
ただし、それに対応して、複数のファイルに分割する必要があるため、ページは多くのファイルをロードする必要があります。これは、1 つのファイルに複数の <script> を導入することと同等であり、実行のパフォーマンスに影響を与えます。
インポートの方法でインポートできる場合は、ページの html の知恵がファイルのみであることを確認でき、ファイルの翼竜のローンも非常に明確です。
次に、モジュール モジュール パッケージ ツール
注: この時点では、webpack は全体的な意味で js トランスレーターとは見なされません。webpack はインポート構文しか認識せず、他の高度な js 構文を認識しないため、webpack は単なるモジュール パッケージ ツールです。
1. webpack のインストール方法
vue のインストールも同様に考えることができます. 同様に、これらのツールのインストールはノード仕様に準拠しており、npm init 初期化ファイルを使用して仕様に準拠できます.
バージョンが固定されているため、ここで webpack をグローバルにインストールすることはお勧めしません。これは、開発するさまざまなプロジェクトがパッケージ化にさまざまな webpack を使用するためです。ここで推奨される場合、つまり、各プロジェクトで --save-dev を介して webpack をインストールできます。
npm install html-webpack-plugin --save-dev
或
npm install [email protected] -g
或
cnpm install [email protected] -g2. webpack 構成ファイルを使用する
注: ファイルごとにパッケージが異なります. js ファイルをインポートする必要があります. 画像の場合は直接インポートできます. そして、設定ファイルの書き方を指定するエントリファイルを指定する必要があります。構成ファイルの名前は vue で与えられています----"webpack.config.js
ここで npm を追加する必要はありません。これは、スクリプトがプロジェクト内でプロジェクトを構成し、最初にプロジェクトから webpack を見つけるためです。次に、webpack-cli の役割は、私たち全員がコマンドラインで webpack 命令を実行できるようにすることです。
この webpack パッケージの出力を見てみましょう。
チャンクという名前の各ファイルは各 js ファイルを表し、chunknames は構成中に指定された名前であることがわかります。