webpackとは？ webpackはパッケージングツールであり、パッケージングプロセス中に依存関係グラフを内部的に作成し、プロジェクトで使用されているモジュールを記録し、パッケージングプロセスの最後に1つ以上のパッケージ化されたファイルを生成します。

コアコンセプト

entry

これは、webpackがパッケージングのエントリポイントとして使用するモジュールを指し、webpackは依存する他のモジュールやライブラリを検索します。

module.exports { entry: './index.js' }

これはエントリーファイルが1つの場合の省略法です。詳しい説明は以下の通りです。

module.exports {
 entry:{
 main: './index.js'
 }
}

パッケージ化されたファイルの名前を変更しない場合、パッケージ化されたファイルの名前は現在のキーであるmain.jsになります。

output

出力はwebpackにパッケージ化されたファイルを公開する場所を指示します。/dist/main.js'です。

const path = require('path')
module.export {
 entry: './index.js'
 output: {
 path: path.resolve(__direname, dist)
 filename: 'ファイル名.js'
 }
}

loader

webpackはjsファイルとjsonファイルしか認識しませんが、他の形式は認識しません。 他の形式をパッケージ化するために、ローダーはそれらを処理し、有効なモジュールに変換します。

module.export {
 module: {
 rule: [
 {test: /\.txt$/, use: 'raw-loader'}
 ]
 }
}

test属性は対応するファイルにマッチするために使われ、use属性は変換のために見つかったファイルに対応するローダーを適用するために使われます。

ローダーは連鎖させることもできます。

読み込み順：右から左、下から上

plugins

const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports {
 plugins: [
 new HtmlWebpackPlugin({template: './src/index.html'})
 ] 
}

開発モード

modeはproductionモードとdevelopmentモードを区別する属性で、デフォルトのモードはproductionで、違いは主にパッケージングによって生成されるファイルが圧縮されているかどうかにあります。

その他

プロジェクトでは、ES6の構文を使用しますが、いくつかのブラウザでこれらの構文を適用することはできませんので、それらの低バージョンとの互換性を確保するために、またはES6ブラウザをサポートしていない、ES5の構文に変換するポリフィルをロードするには

上記のwebpackの設定ファイルからnodeの構文の適用を調べることができるので、webpackのパッケージングを適用したい場合は、node 8.xの環境でなければなりません。

コンフィグ

サーマルモジュールのアップデート

いわゆるホットモジュールアップデートとは、ファイルの内容を変更した後、ブラウザがページを更新せずにページデータを再要求し、変更された内容の置換を行うことです。

index.jsに導入されるホットモジュールの更新で、ホットモジュールの置換の判定で、判定が正しい、次のステップは、元のノードを削除し、ノードの後に更新を追加します。

ES6からES5への設定

npm i babel-loader @babel/core

npm i @babel/preset-env コードをES5に変換するための構文

しかし、構文変換だけでは不十分で、ES5には存在しない変数や関数を補完するツールも必要なので、polifillを使います。

npm i @babel/polyfill

次に、jsファイルのヘッダーにnpm i @babel/polyfill

ここで、useBuiltInsはポリフィルが必要なものをオンデマンドでインポートすることが保証されています！

sourcemap

inline-source-mapエラーが発生した場合、どの行とどの文字が間違っているかを教えてくれます。また、inlineのおかげで、生成された.mapファイルをパッケージ化されたmain.jsにインライン化します。

import '@babel/polyfill'エラーレポートがどの行に表示されたかを示すだけなので、梱包のスピードが少し向上します。

cheap-inline-source-mapは開発モードに最適な設定です。

cheap-module-eval-source-mapオンライン環境に最適な構成です。

treeshaking

treeshakingが導入されたのは、jsファイルにモジュールを導入する際の問題のためで、必要なモジュールをオンデマンドで導入できるようにするためには、treeshakingを導入する必要がありました。

webpack.config.jsに以下を追加します。ただし、開発モードであれば、すでに設定されているので不要です。

また、package.jsonファイルを以下のように変更します。

ここでfalseは、ファイルが使用されない限り保持されないことを意味します。

開発モード

開発モードに応じて、異なるwebpackパッケージング設定ファイルが作成されます。開発モードと本番モードは同じ設定が多いので、共通の設定ファイルwebpack.common.jsを作成し、このフォルダをそれぞれのモードのフォルダにマージします。

package.jsonフォルダで、scriptタグの内容を変更する必要があります。

コードの分割

何らかの方法でコードを分割することで、パッケージングの速度を上げ、修正によるパッケージングを可能にします。

方法1: webpack.config.jsに設定情報を追加します。

方法2：コンポーネントの非同期ロード、システムは自動的にコンポーネントをファイルに格納します。

詳細設定

cssのコードを分割したい場合は、webpackの設定をさらに詳しくします。

は上記のプラグインを利用し、プラグインにパラメータを渡すことで、cssファイルの保存場所や分割方法などを指定することができます。

遅延ロード

レイジー・ローディングとは、オンデマンドでコード・ブロックをロードすることです。このオンデマンド・ローディングは、特定の条件によってトリガーされ、ページのロード速度が非常に速くなります。

上の図では、ブラウザで実行されるコードを見ることができます。どのようなコードが実行されているのか、また、外部からモジュールに導入されたコードについては、非同期メソッドに変更することで、コードの使用率を向上させることができます。

しかし、より良いロード効果を持つためには、遅延ロードを達成するためにプリフェッチの方法を使用することができます、原理は、ページの本体がロードされ、ネットワークが空き時間にあることです、密かにモジュールをロードする必要がある場合があります。

！！！！！！！！！！！！！！！！！

コード分割には2つの方法があることを知っておいてください：1.同期 2.非同期

同期化はキャッシュの読み込み体験を向上させることに対応しますが、顕著な効果を得るにはこのページの別の読み込みが必要なため、体験はあまり良くありません。ロードされるファイルが変更されていない場合、ブラウザはローカルにキャッシュされたファイルを使用します。しかし、ファイルが変更されると、ブラウザはリクエストを再送します。 ファイルが変更されるたびにファイル名が変更されることを保証するために、次のコンフィギュレーションが採用されます

しかし、非同期アプローチには、ネットワークチャネルの空き時間にモジュールをロードできるという明らかな利点があり、効率が大幅に向上します。

！！！！！！！！！！！！！！！！！

devServer

devSever は開発環境でのみ使用可能で、その存在意義はサーバへのデプロイをシミュレートすることです。開発中にオンラインリクエストを送信するプロセスをリアルにシミュレートするために、devSeverは非常に便利です。

リクエストの転送は devserver の proxy 属性を設定することで実現できます。この時点で proxy 属性は準配信リクエストの中継局のようなものです。

もちろん、本番環境では、この設定項目をdevseverすることはないので、リクエストアドレスはもはやプロキシする必要はありませんが、プロキシの本当の意味は、フロントエンドとバックエンドの調整を容易にすることです。