詳しくはwebpack 4.Webpackの一般的な構成(上)

皆さん、こんにちは!私は大根ですが、この章ではwebpack 4でよく見られる配置を紹介します.
webpack.config.jsプロファイル
Webpackは構成可能なモジュールパッケージツールであり、webpackを変更することができる.config.jsのコンフィギュレーションファイルはwebpackに対してコンフィギュレーションを行い、webpackのコンフィギュレーションファイルはNodejsのCommonJSモジュール仕様に従い、require()構文で他のファイルをインポートしたり、Nodejs内蔵モジュールを使用したりすることができるが、実はwebpackである.config.jsはNodejsのモジュールです.
簡単なwebpackですconfig.js例

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './entry.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'entry.bundle.js'
  }
};

上記の例ではCommonJSのrequireを用いてNodejsに内蔵pathモジュールを導入しmodule.exportsはwebpackの構成をエクスポートします.
Tips:webpackの構成はNodejsモジュールであり、JSONオブジェクトではありません.
Webpack構成は複数の言語をサポート
Webpackはjs構成だけでなく、Typeスクリプト、CoffeeScript、さらにはJSX構文の構成もサポートしていますが、どの言語を使用してもコア構成項目は同じで、文法の違いにすぎません.コンフィギュレーションファイルの構文が多様であるほか、コンフィギュレーションのタイプも多様であり、最も一般的なのはオブジェクトとして使用され、オブジェクトに加えてwebpackは関数、Promise、およびマルチコンフィギュレーション配列をサポートします.
Webpackの使い方config.jsプロファイル
デフォルトでは、webpackは実行ディレクトリのwebpackを検索します.config.jsは構成として、構成ファイルを指定する必要がある場合は、コマンドを使用します.

npx webpack --config webpack.config.js

またはプロジェクトディレクトリの下で実行

node ./node_modules/webpack/bin/webpack --config webpack.config.js

Webpackのコアコンセプト
Webpackの機能は強く、構成項目が多いが、以下のいくつかのコア概念を理解すれば、それを自在に使用することができ、webpackには以下のいくつかのコア概念がある.

entry:プロジェクトエントリ、webpackが構築を実行する最初のステップはentryから始まり、入力に抽象化されます.

module:モジュールは、webpackではすべてモジュールであり、1つのモジュールは1つのファイルに対応し、モジュールはjsに限らず、css、ピクチャなどであってもよい.Webpackは、プロファイルのentryからすべての依存モジュールを再帰的に見つけます.

chunk:コードブロックであり、1つのchunkは、コードの結合および分割のために複数のモジュールからなることができる.

loader:モジュールの元のコンテンツを必要に応じて新しいコンテンツに変換するモジュール変換器.

plugin:拡張プラグインは、webpack構築プロセスにおける特定のタイミングで拡張ロジックを注入し、loaderが完了できないタスクを完了することができる.

output:結果を出力し、webpackが一連の処理を経て最終的に所望のコードを得た後に結果を出力する.

Webpackのエントリと出力(output)
Webpackは、処理が必要なjavascriptファイルから、プロジェクト内の各モジュールにマッピングされた依存関係図(dependency graph)を構築し、この依存関係図を1つ以上のbundleに出力するモジュールパッケージングツールです.Webpackは、指定されたエントリファイル(entry)から加工処理を経て、最終的にoutputに従って固定コンテンツのbundleを出力します.この加工処理の過程は、loaderとpluginの2つのツールを使って、loaderはソースコードのプロセッサで、pluginはloaderが処理できないことを解決します.
entryエントリ
Webpackのentryでは、文字列、オブジェクト、配列など、さまざまなタイプがサポートされています.役割上、単一ファイルエントリとマルチファイルエントリの2つの方法が含まれています.
シングルファイルエントリ

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

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

単一ファイル・エントリは、単一ファイル・エントリのみをすばやく作成できますが、比較的簡単で、構成を拡張する際の柔軟性が低いです.

module.exports = {
  mode: 'development',
  entry: ['./src/index1.js', './src/index2.js']
}

文字列でも文字列配列のentryでも、実際には1つのエントリしかありませんが、パッケージの生成には違いがあります.stringの形式であれば、webpackはそのstringで指定されたモジュールをエントリモジュールとして直接使用します.配列の形式である場合、webpackは自動的に別のエントリモジュールを生成し、配列内の各要素で指定するモジュールをロードし、最後のモジュールのmoduleを生成する.exportsはエントリモジュールのmoduleとして機能する.exportsエクスポート.
マルチファイルエントリ
マルチファイルエントリは、複数のentryをサポートするためにオブジェクト構文を使用します.マルチファイルエントリのオブジェクト構文は、単一ファイルエントリに比べて、マルチページアプリケーション、ページモジュール化分離最適化などの柔軟性が高くなります.

module.exports = {
  entry: {
    home: 'path/home.js',
    search: 'path/search.js',
    list: 'path/list.js'
  }
}

上の構文はentryを3つの独立したエントリファイルに分けて、3つの対応するbundleをパッケージ化します.
Tips:htmlページについては、entryを1つだけ使用することをお勧めします.ポータルを統一することで、解析された依存関係の管理とメンテナンスが容易になります.
output出力
Webpackのoutputはentry対応ファイルのコンパイルパッケージを指定した出力bundleです.outputの一般的なプロパティは、次のとおりです.

path:パッケージ後に出力されるbundleの格納経路が規定されている.

filename:bundleの名前です.

publicPath:ブラウザで参照されるURLアドレスを指定します.

Tips:outputを指定しない場合、デフォルトはdist/mainに出力されます.js、すなわちoutput.パスは
dist,output.filenameはmainです.
1つのwebpackの構成で、複数のentryを含めることができますが、outputは1つしかありません.異なるentryに対してoutput.filenameプレースホルダで区別します.

module.exports = {
  entry: {
    home: 'path/home.js',
    search: 'path/search.js',
    list: 'path/list.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

ここで[name]はentryのkey(home,search,list)に対応するプレースホルダである.現在、webpackでサポートされているプレースホルダは次のとおりです.

[hash]モジュール識別子のhash

[chunkhash]chunkコンテンツのhash

[name]モジュール名

[id]モジュール識別子

[query]モジュールのquery、例えばファイル名?後ろの文字列

[function]1つのreturnがfilenameの関数としてstringを出す

[hash]および[chunkhash]の長さは[hash:16](デフォルトは20)で指定するか、output.を指定します.hashDigestLengthはグローバル構成の長さですが、彼らの違いは何ですか?

[hash]:プロジェクト全体のhash値であり、コンパイルされるたびに計算され、コンパイルされるたびに新しいhashが生成されます.すなわち、任意のファイルを変更すると、すべてのファイルのhashが変更されます.1つの項目では入口が異なるがhashは同じである.hashは、ブラウザ上でフロントエンドの静的リソースを長いキャッシュすることができません.この場合、chunkhashを使用する必要があります.

[chunkhash]:異なるエントリファイル(entry)に基づいて依存ファイル解析を行い、対応するchunkを構築し、対応するhashを生成する.entryを構成するモジュールファイルが変化しない限り、対応するhashも変わらないので、一般的なプロジェクト最適化では、共通ライブラリコードの変動が少ないため、chunkhashを使用すると最長キャッシュの役割を果たすことができる.

[contenthash]:chunkhashを使用すると、CSSファイルがJSファイルに導入された場合、コンパイル後のhashは同じであるという問題があります.また、JSファイルの内容が変更されると、それに関連するCSSファイルhashも変更される場合には、CSSをJSからmini-css-extract-pluginまたはextract-text-webpack-pluginを使用して抽出してcontenthashを使用することができる.

[hash]、[chunkhash]、および[contenthash]は、[xxx:length]構文をサポートします.
Tips:プレースホルダは[name]-[hash:8]のように組み合わせて使用できます.
output.publicPath
私たちが構築した静的リソースファイルはすべて通過または<です.link> ラベルはロードされ、これらの静的リソースファイルは静的リソースサーバまたはCDNに配置する必要があります.では、これらの静的リソースファイルを異なるドメイン名またはCDNの上にどのように配置しますか?この時はoutput.publicPathによる構成:</p>
<pre><code>module.exports = {
output: {
filename: '[name]_[chunkhash:8].js',
publicPath: 'https://cdn.ezample.com/assets/'
}
}
</code></pre>
<p>出力:</p>
<p><code><script src="https://cdn.ezample.com/assets/a_456456456.js">
output.libraryとoutput.libraryTarget
実際の開発では、チームの他のパートナーが使用するライブラリをパッケージ化する必要があります.この場合、outputが必要です.libraryとoutput.libraryTarget,output.Libraryはライブラリの名前を指定します.output.libraryTargetは、commonjs 2、amd、umd 2など、パッケージ化された仕様を指定するために使用されます.
小結
この章では、WebpackのプロファイルからWebpackを作成します.config.js基本文法に着手し、構成の基本的な使い方とmode、context、entry、outputの基礎概念を説明し、皆さんに助けを与えたいと思っています.もっと知りたいなら、私の文章に注目してください.