1.0コンセプト

WebPackはモジュールパッケージング機と見なすことができます.それは、あなたのプロジェクト構造を分析し、JavaScriptモジュールや他のブラウザで直接実行できない拡張言語(Scss、Type Scriptなど)を見つけ、ブラウザの使用のために適切なフォーマットにパッケージングすることです.ソースコードは、次のような内容の実行可能JavaScript、CSS、HTMLコードに変換されます.

    ：TypeScript     JavaScript、SCSS     CSS  。
    ：   JavaScript、CSS、HTML   ，       。
    ：           、                    。
    ：                    ，                  。
    ：          ，      、     。
    ：                      ，          。
    ：      ，                   。
        、              ，            ，                  。                ，         。

2.0どのように動作しますか?

あなたのプロジェクトを全体として、index.jsなどの特定のプライマリファイルを通じて、Webpackはこのファイルからあなたのプロジェクトのすべての依存ファイルを見つけ、loadersを使用して処理し、最後にブラウザで識別できるJavaScriptファイルにパッケージ化します.gulp機能と同様に、実装原理に違いがあり、Webpackの処理速度はより速く、より直接的で、より多くの異なるタイプのファイルをパッケージ化することができます.その4つのコア概念:エントリ(entry)、出力(output)、loader、プラグイン(plugins).

3.コアコンセプト

3.1.いりぐち

どのモジュールを使用して、その内部依存図の構築の開始とします.入口起点に入ると、webpackはどのモジュールとライブラリが入口起点(直接と間接)に依存しているかを見つけます.webpack では、entryプロパティが構成され、1つのエントリの開始点(または複数のエントリの開始点)を指定します.webpack.config.jsでのエントリの構成:

単一入口略写法

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

オブジェクト構文

//       
module.exports = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};
//    
module.exports = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

シーンアプリケーションシーン<1>アプリケーション(app)とサードパーティライブラリ(vendor)エントリを分離します.

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

Webpackはappからjsとvendors.jsは、互いに完全に分離され、互いに独立した依存図の作成を開始する.この方法は、vendorを除く1つのエントリ起点のみの単一ページアプリケーション(single page application)で一般的です.<2>マルチページアプリケーション

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

Webpackには3つの独立した依存図が必要で、複数のページアプリケーションでは、ページがジャンプするたびにサーバが新しいHTMLドキュメントを取得します.ページは新しいドキュメントを再ロードし、リソースは再ダウンロードされます.

3.2. しゅつりょく

Webpackが作成したbundlesをどこで出力するか、デフォルト値は./dist.基本的には、アプリケーション構造全体が、指定した出力パスのフォルダにコンパイルされます.これらの処理手順は、構成にoutputフィールドを指定することによって構成されます.

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

(1)output.filenameこのオプションは、各出力bundleの名前を決定します.

単一エントリの開始点についてfilenameは、

などの静的な名前になります.

filename: "bundle.js"

複数のエントリ開始点(entry point)コード分割(code splitting)または各種プラグイン(plugin)によって複数のbundleを作成するには、次の代替方法を使用して、

などのbundleごとに一意の名前を付ける必要があります.

//      
filename: "[name].bundle.js"
//     chunk id
filename: "[id].bundle.js"
//         ，    hash   
filename: "[name].[hash].bundle.js"
//       chunk     hash
filename: "[chunkhash].bundle.js"

3.3. loader

loaderはモジュールの に使用され、loaderはすべてのタイプのファイルをアプリケーションの依存図(および最終的なbundle)に変換します.従って、loader “ (task)”は、フロントエンド構築ステップを処理する強力な方法を提供する.loaderは、TypeScriptなどの異なる言語からJavaScriptにファイルを変換したり、インライン画像をdata URLに変換したりすることができます.loaderはJavaScriptモジュールのimport CSSファイルを直接使用することもできます!Webpackの構成ではloaderには2つのプロパティがあります.

testプロパティは、対応するloaderによって変換されるべきファイルまたはファイルを識別するために使用されます.

useプロパティは、変換を行うときにどのloaderを使用すべきかを示します.

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      }
    ]
}

3.4.プラグイン

oaderは、いくつかのタイプのモジュールを変換するために使用され、プラグインは に使用され得る.プラグインの範囲には、パッケージの最適化と圧縮から、環境内の変数の再定義までが含まれます.詳細な使い方:require()だけを必要とし、plugins配列に追加します.

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

module.exports = config;