別のバンドルへのWebPACKパッケージコード

Demo4マニュアル

このデモは、パッケージおよび他のより高度な使用をブロックする方法を示しています

環境を準備します

その後、DEMO1 CDのディレクトリに、次のコマンドを実行し、環境を初期化します。

npm init -y
npm install webpack webpack-cli webpack-dev-server typescript ts-loader -D

次のように新しいtsconfig.jsonは、読み取ります。

{
  "compilerOptions": {
    "target": "es5"
  }
}

'WebPACKの-devのサーバー--open'：NPMパッケージを追加するためのコマンド。

L7のrequire.ensure

コードは、アプリケーションがたくさんある場合は、我々はすべてのコードがファイルにパッケージ化されて入れ、それを考慮にホームのロード・パフォーマンスの他の原因を取って、少し肥大化したようで、一定のルールに従ってコードパッケージとは別に必要です。

WebPACKのそれぞれ別々のノードを定義するrequire.ensureを使用します。

分離単一のファイル

次のように、srcディレクトリにlibrary1.tsとindex.tsを作成します：

// library1.ts
export class Library {
  hi() {
    console.log('I\'m Library1.')
  }
}
// index.ts
require.ensure(['./library1.ts'], function (require) {
  var lib = require('./library1');
  const ins = new lib.Library();
  ins.hi();
});

次のように新しいwebpack.config.jsは、読み取ります。

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'output.js'
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      }
    ]
  }
}

WebPACKの実装を成功は、あなたがそこにある二つの出力ファイルと1.output distのディレクトリを参照することができ、梱包することができます。

独立した複数のファイル

次のように前のファイルに基づいて新しいlibrary2.tsとlibrary3.tsは、読み取ります。

// library2.ts
export class Library {
  hi() {
    console.log('I\'m Library2.')
  }
}
// library3.ts
export class Library {
  hi() {
    console.log('I\'m Library3.')
  }
}

index.tsを変更し、次のように読み取ります。

require.ensure(['./library1.ts'], function (require) {
  var lib = require('./library1');
  const ins = new lib.Library();
  ins.hi();
});

require.ensure(['./library2.ts', './library3.ts'], function (require) {
  var lib2 = require('./library2');
  const ins2 = new lib2.Library();
  ins2.hi();

  var lib3 = require('./library3');
  const ins3 = new lib3.Library();
  ins3.hi();
});

実行のWebPACKは、あなたがアップパックすることができ、あなたはdistディレクトリに出力、1.outputと2.output 3つのファイルを見ることができます。

ブラウザに実行すると2.outputにパッケージ化library2 1.outputに詰めlibrary3、およびライブラリ1を見ることができます。

L8バンドルローダー

・ローダーをバンドルだけrequire.ensureのパッケージを作っている、原則としては、インストール、まだ同じです：

npm install bundle-loader -S

次のようにwebpack.config.jsを変更します。

module.exports = {
  entry: './src/bundle.ts',
  output: {
    filename: 'output.js'
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'bundle-loader'
          }, {
            loader: 'ts-loader'
          }
        ]
      }
    ]
  }
}

次のようにsrcディレクトリ新bundle.tsでは、読み取ります。

require('./library1')(lib => {
  const ins = new lib.Library();
  ins.hi();
});
require('./library2')(lib => {
  const ins = new lib.Library();
  ins.hi();
});
require('./library3')(lib => {
  const ins = new lib.Library();
  ins.hi();
});

その結果、出力1,2,3 2,3,4に詰めたパックされたライブラリです。

L9 SplitChunksPlugin

私たちは、同じパッケージに多くのパックされたファイルを依存しているときではないすべてのパッケージが分離されている場合、パッケージは、そう多くは他のパッケージにパッケージ化を繰り返してもよいパッケージに依存している、これはあなたが個別にパッケージ共通のコードのために必要な時間です。

実際には様々な種類の情報を導入する前にCommonsChunkPluginあり、そして彼女は最初からV4取り出し、その次はSplitChunksPluginの使用について説明されています。

実際に私はそれを更新し続けるために時間が続くこのステップを、終了しませんでした......