基本概念

webpackは現代JavaScriptアプリケーションのモジュールパッケージングです.これは信じられない構成性を持っていますが、使用を開始する前に、以下の4つのコア概念を理解する必要があります.
あなたのwebpack学習の旅の始まりとして、これらの概念を紹介することによって、高いレベルの概観を提供するとともに、これらの概念特定の用例へのリンクも提供することを目的として、この文章を書いています.
入り口(Entry)
webpackは、アプリケーションに依存するすべての関係図を作成しました.関係図の起点は_といいます.入り口_._入り口webpackに教えてください._からどこから始まりますかそして依存関係図に沿って何を包装するべきかを知っています.あなたのアプリケーションの入り口をルートコンテキストとして認識することができます.
webpackでは、私たちはentry属性で入口を私たちのwebpack構成オブジェクトに定義します.
一番簡単な例を挙げると、次のようになります.
webpack.co.nfig.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

アプリケーションに必要な特定のentry属性を宣言するための様々な方法がある.
もっと分かります
出口(Output)
あなたがすでにすべての資源を一緒に梱包した時、私達はまだwebpackがどこにあるかを教えてください.wepbackのoutput属性は、パッケージコードの扱い方を説明しています.
webpack.co.nfig.js

var path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

上記の例では、私たちはoutput.filenameとoutput.pathの属性によってwebpackパケットの名前と、私たちがファイルを梱包して生成したい場所を説明しています.
Tip:プロジェクトの生成は、ドキュメント全体とプラグインAPI全体を通して行われることがわかります.これは「生産または排出」という特殊用語です.output属性は、より多くの構成可能な特性を有しているが、まず、output属性のいくつかの最も一般的な用例を知るために時間をかけていく.
もっと分かります
キャリア(Loader)
webpackの目標は、ブラウザではなく、webpackにプロジェクトのすべてのリソースに注目させることです.webpackは各ファイル(.css,html,scss,jpg,etc.)をモジュールとして処理します.webpackはJavaScriptしか知らないとしても.
キャリアアップは、webpackでこれらのリソースファイルをモジュールに変換する役割を演じています.webpackがこれらのモジュールをあなたの依存図に追加するように.
webpackはより高いレベルに配置されています.二つの目標があります.

は、特定のキャリアに変換すべきファイルを識別する.(test属性)

は、依存グラフに追加できるファイル(最終パッケージ)を変換する(loader属性)

.
webpack.co.nfig.js

var path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  }
};

module.exports = config;

以上の構成では、単一モジュールのrules属性の2つの必須属性を定義した.testとloader.それはwebpackコンパイラに以下のように教えています.
「えっと、webpackコンパイラは、「require()/import文で'と解析されました.js'または'.jsx'のパス」に出会ったら、それらを追加して包装する前に、まずbabel-loaderを使って彼らを変換します.
特に、webpack構成でloaderを定義する場合、module.rulesではなくrulesに定義する必要がある.webpackはエラーを提示します.
まだ言及していないloaderがあります.もっと特定の属性を設定できます.
もっと分かります
プラグイン(Plugins)
キャリアは単一のファイル処理に基づいてのみ変換されるので、プラグインは、パッケージモジュールの「コンパイル」と「ブロック群」の時に、動作とカスタマイズ機能を実行するのが最も一般的である(ただし、これに限定されない).webpackのプラグインシステムは極めて強く、カスタマイズ可能です.
プラグインを使用するためには、require()だけが必要です.そして、それらをplugins配列に追加します.多くのプラグインはオプションでカスタマイズできます.異なる目的のために複数の構成でプラグインを使用することができるので、newを使用してプラグインのインスタンスを作成し、プラグインを起動する必要があります.
webpack.co.nfig.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

webpackは多くの開梱可能なプラグインを提供しています.私たちのプラグインのリストを見て、より多くの情報を得ることを歓迎します.
webpack構成ではプラグインは直接使用されますが、多くの用例が検討されます.
もっと分かります
下一篇:入り口