ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

Webpack の 5 つの中心概念の詳細な分析

著者：Eve Cole 更新時間：2022-08-17 15:48:23
Webpack はフロントエンド リソース構築ツールであり、静的モジュール バンドラーです。Webpack には 5 つの主要な概念 (エントリ、出力、ローダー、プラグイン、モード) があります。次の記事がより深い理解に役立つことを願っています。みんな！

webpack の 5 つの中心概念

1.

エントリは、パッケージ化を開始し、内部依存関係グラフを分析し、構築するための開始点としてどのファイルを使用するかを webpack に指示します。

2.

Output は、パッケージ化されたリソース バンドルを出力する場所と名前の付け方を webpack に指示します。

3. ローダー

Webpack は JavaScript と JSON ファイルのみを理解できます。これは、すぐに使用できる Webpack の組み込み機能です。ローダーを使用すると、Webpack が他のタイプのファイルを処理し、アプリケーションで使用して依存関係グラフに追加できる有効なモジュールに変換できるようになります。

4.

プラグインプラグインを使用すると、より幅広いタスクを実行できます。プラグインは、パッケージ化の最適化と圧縮から、環境内の変数の再定義まで多岐にわたります。

5. モード

mode (Mode) は、対応するモードの設定を使用するように webpack に指示します。

Webpack の 5 つの中心的な概念を詳しく紹介します。

1. エントリー

エントリー オブジェクトは、バンドルを検索、開始、構築するために webpack によって使用されます。エントリはアプリケーションの開始点です。この開始点からアプリケーションは実行を開始します。配列を渡すと、配列内の各項目が実行されます。エントリ ポイントは、Webpack の内部依存関係グラフの構築を開始するためにどのモジュールを使用する必要があるかを示します。エントリ ポイントを入力すると、webpack はそのエントリ ポイントが (直接的および間接的に) どのモジュールとライブラリに依存しているかを調べます。

単純なルール: すべての HTML ページには開始点があります。シングル ページ アプリケーション (SPA): 1 つのエントリ ポイント、マルチページ アプリケーション (MPA): 複数のエントリ ポイント。

デフォルト値は./src/index.jsですが、WebPack構成のentry属性を構成することにより、異なるエントリポイント（またはポイント）を指定できます。例:

//単一エントリ--文字列 module.exports = {
  エントリ: './path/to/my/entry/file.js',
};
//複数のエントリ -- 配列 module.exports = {
  エントリ: ['./src/index.js', './src/add.js']
};
//複数のエントリ -- オブジェクト module.exports = {
  エントリ: {
    ホーム: './home.js',
    について: './about.js',
    連絡先: './contact.js'
  }
}

valueのエントリ：

  • 文字列：パッケージ化されており、1つのバンドルファイルのみが最終的に出力されます

  • 。最後に 1 つのチャンクを形成してバンドル ファイルを出力し、チャンク名はデフォルトで main になります。一般に、HMR関数でのみ使用されるためにHTML Hot Update Effective

  • Object：複数のエントリ、キーがあるのと同じくらい多くのチャンクが出力され、各キー（キー）がチャンクの名前になります。オブジェクトタイプでは、各キーの値は文字列2だけでなく配列にもなります。

出力（出力）出力

output 、Webパックの出力方法とバンドル、アセット、その他のパッケージ、またはWebPackを使用してロードされたものを出力する場所に指示できます。 。出力バンドルのデフォルト値は./dist/main.jsで、その他の生成されたファイルはデフォルトで./distフォルダーに配置されます。

これらのプロセスを構成するには、構成でoutputフィールドを指定します:

//webpack.config.js
const パス = require('パス');
module.exports = {
  エントリ: './path/to/my/entry/file.js',
  出力: {
    パス: path.resolve(__dirname, 'dist'),
    ファイル名: 'my-first-webpack.bundle.js',
  }、

バンドルの名前と、バンドルが生成される場所を、 output.filenameとoutput.pathプロパティを通じて webpack に伝えることができます

。

2.1. Output.filename (ファイル名とディレクトリ)

このオプションは、各出力バンドルのディレクトリと名前を決定します。これらのバンドルは、 output.pathオプションで指定されたディレクトリに書き込まれます。

単一の入口ポイントの場合、ファイル名は静的な名前になります。ただし、複数のエントリ ポイント、コード分割、またはさまざまなプラグインを通じて複数のバンドルを作成する場合は、他の方法を使用して各バンドルに一意の名前を付ける必要があります。

// 単一エントリ:
module.exports = {
  //...
  出力: {
    ファイル名: 'js/bundle.js'
  }
};
//複数のエントリ -- エントリ名を使用します。
module.exports = {
  //...
  出力: {
    ファイル名: '[名前].bundle.js'
  }
};
//複数のエントリ - 各ビルド プロセスで一意のハッシュを使用して module.exports = { を生成します
  //...
  出力: {
    ファイル名: '[名前].[ハッシュ].bundle.js'
  }
};
...

2.2 output.path（ファイルディレクトリ）

output.pathすべての出力ファイルのディレクトリを指定します。これは、すべての将来のリソース出力の共通ディレクトリです。パスは絶対パスである必要があります。

module.exports = {
  //...
  出力: {
    パス: path.resolve(__dirname, 'dist/assets')
  }
2.3

. Output.publicPath (参照リソースのパス接頭辞)

publicPath は、HTML ファイル内のすべてのリソースによって導入されるパブリック パス接頭辞を指定します。生成されたファイルのパスには影響しません。代わりに、HTML ファイルでさまざまなリソースが導入されると、インポートされたリソースのパスに publicPath がプレフィックスとして追加されます。

例:

vue-cli によって生成された Webpack 構成では、運用環境の publicPath の値はデフォルトで「/」に設定されます。これは、現在のディレクトリのルート ディレクトリです。

パッケージ化した後、HTML ファイルを開くと、HTML ファイルに導入されたリソース パスが次のようになっていることがわかります。

ご覧のとおり、パスの前に / 記号が追加されています。生成された HTML ファイルにアクセスするためにブラウザーを開くと、リソースにアクセスできませんというエラーが表示され、このときのリソース アクセスは次のようになります。

サーバー上では以下のようになっていますが、アクセスに問題がある可能性があります。

publicPath を相対パスに変更することも、直接コメントアウトすることもできます。

2.3.1. path と publicPath の違い

  • Path打包后文件在硬盘中的存储位置，是webpack所有文件的输出的路径，必须是绝对路径。比如：输出的js、图片，HtmlWebpackPlugin生成的html文件等，都会存放在以path为基础的目录下。
  • publicPath は生成されるファイルのパスには影響しませんが、主にページに導入されるリソースのパスを完成させます。

2.4. Output.chunkFilename (非エントリ チャンクの名前)

Output.chunkFilename は、非エントリ チャンク ファイルの名前を決定します。つまり、エントリ ファイルによって生成されたチャンクに加えて、他のファイルによって生成されたチャンク ファイルにも名前が付けられます。

module.exports = {
  //...
  出力: {
    chunkFilename: 'js/[name]_chunk.js' //非エントリチャンクの名前}
3.

ローダー

webpack 自体は JavaScript と JSON ファイルのみをパッケージ化できます ( webpack3+和webpack2+には JSON ファイルの処理が組み込まれていますが、 webpack1+并不支持， json-loaderの組み込み機能です)。 Webpack はすぐに利用可能です。 Webpack 自体は、CSS、Vue などの他のタイプのファイルのパッケージ化をサポートしていませんが、さまざまなローダーを使用して、Webpack にこれらのタイプのファイルを処理させることができます。ローダーは、ファイルを異なる言語（TypeScriptなど）からJavaScriptに変換したり、Inline ImagesをデータURLに変換したりimportます。

さまざまなloaderを使用することで、 webpack外部スクリプトやツールを呼び出して、scss を分析して css に変換したり、次世代 JS ファイル (ES6、ES7) を最新のブラウザーと互換性のある JS ファイルに変換したりするなど、さまざまな形式のファイルを処理する機能を備えています。 React 開発の場合、適切なローダーは React で使用される JSX ファイルを JS ファイルに変換できます。

Webpack 設定では、ローダーには 2 つの属性があります。1

  • つは変換されるファイルを識別するtest属性です。

  • use属性は、変換を実行するときにどのローダーを使用するかを定義します。

  • include/exclude（可选）：処理する必要があるファイル (フォルダー) を手動で追加するか、処理する必要のないファイル (フォルダー) をブロックします。

  • query（可选） : ローダーに追加の設定オプションを提供します

// 例: webpack.config.
const パス = require('パス');
module.exports = {
  出力: {
    ファイル名: 'my-first-webpack.bundle.js',
  }、
  モジュール: {
    ルール: [
        { テスト: /.txt$/、ローダー: 'raw-loader' }、
        { test: /.css$/, use: ['style-loader', 'css-loader'] } //複数のローダーを使用する場合は、 use を使用する必要があります
    ]、 
  }、
上記の構成では
、

rules属性が別のモジュール オブジェクトに対して定義されており、これには 2 つの必須属性 ( testとuseが含まれています。これは、webpack コンパイラーに対してrequire() / importステートメントで「.txt」として解析されるパスが見つかったときに、パッケージ化する前にraw-loaderを使用して変換するように指示するのと同じです。

複数のローダーを使用する場合は、 use を使用する必要があります。 use 配列内のローダーは、右から左へ順番に実行されます。たとえば、上記の CSS ファイルでは、まず css-loader が CSS ファイルを JS にコンパイルし、JS ファイルに読み込みます。次に、style-loader がスタイル タグを作成し、JS 内のスタイル リソースを head タグに挿入します。

3.1. CSS-loader

Webpack は、スタイル シートを処理するための 2 つのツール、 css-loaderとstyle-loaderを提供します。これらは異なるタスクを処理します。 css-loader使用すると、 importと同様の方法で CSS ファイルを導入できます。 style-loaderを使用すると、計算されたすべてのスタイルを Webpack でパッケージ化された JS ファイルに埋め込むことができます。ファイルをJSファイルに導入できます。

//インストール npm install --save-dev style-loader css-loader //css-loaderのバージョンが高すぎるとコンパイルが失敗する可能性があるので、利用可能な[email protected]などのバージョンを下げることをお勧めします。
// module.exports を使用 = {
   ...
    モジュール: {
        ルール: [
            {
                テスト: /(.jsx|.js)$/,
                使用： {
                    ローダー: "バベルローダー"
                }、
                除外: /node_modules/
            }、
            {
                test: /.css$/, //複数のローダーを同じファイルに導入する方法。ローダーの動作順序は、後のローダーが最初に動作を開始することになります: [
                    {
                        ローダー: "スタイルローダー"
                    }、{
                        ローダー: "css-loader"
                    }
                】
            }
        】
    }

main.css ファイルがあると仮定し

ます
。
  背景: 緑;

Webpack が「main.css」ファイルを見つけるために、次のようにそれを「main.js」にインポートします

。
//main.js
「react」から React をインポートします。
'react-dom' から {render} をインポートします。
'./Greeter' から Greeter をインポートします。
import './main.css';//css ファイルをインポートするには require を使用します render(<Greeter />, document.getElementById('root'));

通常、css は js と同じファイルにパッケージ化されます。別の CSS ファイルとしてパッケージ化されます。ただし、適切な構成を使用すると、WebpackはCSSを個別のファイルにパッケージ化することもできます。

4. プラグイン

ローダーは、特定の種類のモジュールを変換するために使用されますが、プラグインは、パッケージ化の最適化、圧縮、リソース管理、環境変数の挿入など、より幅広いタスクを実行するために使用できます。プラグインの目的は、ローダーが達成できない他のことを解決することです。

プラグインを使用するには、 npm経由でインストールしてから、プラグインプロパティの下にプラグインのインスタンスを追加する必要があります。プラグインはパラメーター/オプションを搭載できるため、 newインスタンスをWebpack構成のpluginsプロパティに渡す必要があります。ほとんどのプラグインはオプションを介してカスタマイズでき、構成ファイルの異なる目的で同じプラグインを複数回使用できます。

//webpack.config.js
const htmlwebpackplugin = require（ 'html-webpack-plugin'）;
  モジュール: {
    ルール: [{ テスト: /.txt$/、使用: 'raw-loader' }]、
  }、
  プラグイン：[new htmlwebpackplugin（{template： './src/index.html'}]]、
};

上記の例では、 html-webpack-pluginアプリケーションのHTMLファイルを生成し、生成されたすべてのバンドルを自動的に注入します。

4.1 BannerPluginプラグイン（著作権ステートメントの追加）

パッケージコードに著作権ステートメントを追加するプラグインを追加しました。このプラグインは、Webpackに組み込まれたプラグインであり、インストールする必要はありません。

const webpack = require('webpack');
module.exports = {
...
    モジュール: {
        ルール: [
            {
                テスト: /(.jsx|.js)$/,
                使用： {
                    ローダー: "バベルローダー"
                }、
                除外: /node_modules/
            }、
            {
                テスト: /.css$/,
                使用： [
                    {
                        ローダー: "スタイルローダー"
                    }、{
                        ローダー: "css-loader",
                        オプション: {
                            モジュール: true
                        }
                    }、{
                        ローダー：「PostCSS-Roader」
                    }
                】
            }
        】
    }、
    プラグイン：[
        新しいwebpack.bannerplugin（ 'wenxuehai all rights reserved、任意の複製が調査されます'）
    ]、
}

4.2 Hot Module Plugin（HOT LOADING）は、

Hot Module Replacementコードを変更した後に自動的に更新およびプレビューすることができます。ホットロードは、アプリケーションが実行されている場合、WebPack-Dev-Serverが更新する必要があるのと同じように、アプリケーションが実行されているときにページを更新せずにアップデートの効果を表示できます。ページ。

（

1

）HMRプラグインをWebパックファイルに追加します

。

。 Babelには、 react-transform-hrmと呼ばれるプラグインがあります。これにより、HMRは

react-transform-hmr

NPMインストールを
追加せずに適切に機能します
-hmr
const webpack = require（ 'webpack'）;
module.exports = {
    エントリ: __dirname + "/app/main.js",//何度も言及されている唯一のエントリ ファイル出力: {
        パス：__dirname + "/public"、
        ファイル名：「bundle.js」
    }、
    devtool： 'eval-source-map'、
    DevServer：{
        contentBase: "./public",//ローカルサーバーによってロードされたページが配置されているディレクトリhistoryApiFallback: true,//インラインにジャンプしない: true,
        ホット：本当
    }、
    モジュール：{
        ルール：[
            {
                テスト：/( .jsx| .js )$/
                使用： {
                    ローダー：「バベルローダー」
                }、
                除外： /node_modules /
            }、
            {
                テスト：/.csss$/、
                使用： [
                    {
                        ローダー：「スタイルローダー」
                    }、{
                        ローダー：「CSS-Roader」、
                        オプション：{
                            モジュール：true
                        }
                    }、{
                        ローダー：「PostCSS-Roader」
                    }
                】
            }
        】
    }、
    プラグイン：[
        新しいwebpack.bannerplugin（ '著作権、任意の複製が調査されます'）、
new webpack.hotmodulereplacementplugin（）//ホットリロードプラグイン]、
};

babelを設定し

ます
{
  「プリセット」：[「反応」、「env」]、
  「env」：{
    "発達"： {
    「プラグイン」：[["React-Transform"、{
       「変革」：[{
         「変換」：「React-Transform-HMR」、         
         「輸入」：[「反応」]、       
         「地元の人々」：[「モジュール」]
       }]
     }]]
    }
  }
}
// Greeter、JS
Reactをインポート、{
  成分
} 'React'から
'./main.css'からのインポートスタイル
 
クラスグリーターはコンポーネントを拡張します{
  与える（） {
    戻る （ 
        <div>
          <h1>
            aaaf
          </h1>
        </div>
    );
  }
}
エクスポートデフォルトGreeter
//main.js
「React」からのImport React;
輸入 {
  与える
} 'React-dom'から;
'./greeter.js'からGreeterをインポートします。
render

（

<greeter />、document.getElementByID（ 'root'））

自動的に更新します。

（効果がない場合がありますが、バージョンの問題である可能性があります

）

。

JSファイルがレンダリングされたときに生成されたパッケージをパッケージ化すると、スタイルはJS構文を介してスタイルタグの形でページに挿入されます。しかし、この場合、パッケージ化されたバンドルファイルが大きすぎる可能性があります。

ExtractTextWebpackPlugin プラグインは、エントリ チャンクで参照されている *.css (インポートされた CSS ファイルと vue ファイルに記述されたスタイルを含む) を独立した分離された CSS ファイルに移動します。 ExtractTextPluginエントリ チャンクごとに対応する CSS ファイルを生成します。つまり、1 つのエントリが 1 つの CSS ファイルに対応します。エントリが複数ある場合は、対応する複数の CSS ファイルがそれぞれ生成されます。

ExtractTextWebpackPlugin プラグインを使用すると、スタイルは JS バンドルに埋め込まれなくなり、別の CSS ファイル ( styles.cssなど) に配置されます。 スタイルファイルのサイズが大きい場合、CSSバンドルがJSバンドルと並行してロードされるため、早期ロードが速くなります。

const抽出物plugin = require（ "extext-text-webpack-plugin"）;
module.exports = {
  モジュール: {
    ルール: [
      {
        テスト: /.css$/,
        使用：ExtractTextPlugin.Extrage（{
          フォールバック：「スタイルローダー」、
          使用：「CSS-Roader」
        })
      }
    】
  }、
  プラグイン：[
    新しいExtractTextPlugin（{
      ファイル名：utils.assetspath（ 'css/[name]。[contenthash] .css'）、// extracttextpluginは、各エントリチャンクに対応するファイルを生成するため、複数のエントリチャンクを構成する場合は、[name]、[idを使用する必要があります]または[contenthash]
      // allChunks：true、//「commonschunkplugin」を使用する場合、一般的なチャンクに抽出されたチャンク（「extracttextplugin.extract」から）があります。
    }）、
  】
}

4.3.1 AllChunksオプション（非同期にロードされたスタイルを抽出するかどうか）

extractTextWebPackPluginプラグインのデフォルト値は偽です。

allChunks オプションは、非同期的に読み込まれたスタイルをまとめて抽出する必要があるかどうかを意味します。デフォルトでは、ExtractTextWebPackPluginプラグインが使用されていても、スタイルまたはスタイルファイルが非同期にロードされている場合、これらのスタイルは独立したCSSファイルに抽出されませんが、JSファイルにパッケージ化されます。

したがって、 allChunks:falseはデフォルト値ですが、エントリからコードを抽出することですが、 allChunks:trueコードは抽出されません。ファイル。非同期のstyle-loaderの負荷が使用されているが、AllChunksがfalseに設定されている場合はfallback extracttextplugin.extralのフォールバックを設定する必要があります。抽出されたコンポーネント。

https：//github.com/sevencon/blog-github/blob/master/articles/webpack

研究ノート（2） - extracttextwebpackplugin.md

https://blog.csdn.net/weixin_414409/article/詳細 /884163565

。モード（モード）

development 、 productionのnone選択するか、 modeパラメーターを設定するためになしで、対応する環境でWebpackの組み込み最適化を有効にできます。そのデフォルト値はproductionです。

module.exports = {
  モード：「生産」、
}

構成ファイルでモードオプションを直接構成すると、モードオプションの組み込みが含まれます。

開発: 開発モード。パッケージ化されたコードは圧縮されず、コードのデバッグが有効になります。
生産：生産モード、正反対。

モードを開発または生産に設定すると、WebPackはProcess.Env.Node_Envの値を自動的に設定します。ただし、 NODE_ENVを設定しただけでは、 mode自動的に設定されません。 （ノードでは、グローバル変数プロセスは現在のノードプロセスを表します。Process.ENV属性にはユーザー環境情報が含まれます。Node_ENV属性はProcess.ENV自体に存在しません。node_Env属性を一般的に定義し、それを使用してそれを決定するかどうかを判断します。生産環境または開発環境です）

（

Mode

オプションはWebPack4で新しくなります。4以前は、definePack4で設定されました

webpackで

詳しく解説しています

が、一般的にNODE_ENVの値は設定ファイルで設定します。デフォルトでVUE-CLIを使用して生成されたVUEプロジェクトでは、node_env構成は次のとおりです

。
      'process.env'：require（ '../ config/dev.env'）
}),
//module.exports = merge(prodEnv, { dev.env.js ファイル内
  node_env： '"開発"'
}）//
webpack.prod.conf.jsファイルの下で、prod.env.jsファイルが導入されますenv = require（ '../ config/prod.env'）
新しい webpack.DefinePlugin({
      'process.env'：env
}）、
//module.exports = {in prod.env.jsファイル
  node_env： '"production"'
}

上記からわかるように、開発環境では、構成ファイルはnode_envを「開発」に設定します。

プロジェクトを実行すると、NPM Run DevまたはNPM Run Buildを実行します。対応するnode_env値は、プロジェクトの任意のファイルで取得できます（node_env値で構成された構成ファイルが有効になっているかどうかに依存するため、必ずしも構成ファイルではありません）。

5.2.ENV.NODE_ENV構成

プロセスはノードのグローバル変数であり、node_env属性はありません。 NODE_ENV変数はプロセスで直接使用できませんが、それを設定することで取得されます。この変数の機能は次のとおりです。この変数を判断することにより、開発環境または生産環境を区別できます。

（1）グローバル変数値は、Webpackの内蔵プラグインを介して設定できます

。
      'process.env.node_env'：json.stringify（ 'production'）
})、

設定後、実行スクリプトでこの値を取得できます。例:

// main.js
console.log(process.env.NODE_ENV); //本番環境

ですが、この値は webpack 設定ファイル webpack.config.js では取得できません。

(2) まず、

クロス環境パッケージ設定を通じてクロス環境パッケージをダウンロードします:

cnpm icross-env -D

package.json ファイルを設定します:

"build": "cross-env NODE_ENV=test webpack --config webpack.config .js "

この時点で、値（process.env.node_env）は構成ファイルで取得できますが、実行可能ファイルで取得できません。DefinePluginプラグインで使用する必要があります。
関連記事