簡単にwebpackの4つの核心概念のEnttryを話します。

4382 ワード

webpackはnodejsに基づいたツールですので、学習過程で関わるnodejs知識も解釈して発散的に展開します。
webpack中国語の文書
一、module.exports

module.exports = {
     entry: './path/to/my/entry/file.js'
  };
exports変数は、モジュールのファイルレベルのスコープ内で利用可能であり、モジュール実行前にmodule.exportsに値を与え、nodejsにexportとrequireの2つのオブジェクトを提供しています。ここでexportsはモジュール公開のインターフェースであり、外部からモジュールのインターフェース、すなわち取得モジュールのexportオブジェクトを取得するためにrequireを使用します。exportsが投げ出したインターフェースの中で、もしあなたがモジュールを望むならば、特別な対象のタイプにしたいです。module.exportsを使ってください。モジュールが伝統的なモジュール例になることを望むなら、exports.xx方法を使用してください。module.exportsこそ本当のインターフェースです。exportsはその補助ツールにすぎません。最終的に呼び出しに戻ったのはexportsではなくmodule.exportsです。ここではnodejs公式サイトの一つを引用します。 例

function require(/* ... */) {
     const module = { exports: {} };
     ((module, exports) => {`     `
     //       。      ,       。
      function someFunc() {}
      exports = someFunc;//        exports    exports   module         
    //   ,exports       module.exports      ,
    //                  。
      module.exports = someFunc;//          module        
    //   ,      someFunc,       。
   })(module, module.exports);
   return module.exports;//          (         module.exports   exports)
  }
二、ベンry
entryエントリの開始点であり、entryで構成されているファイルパスが指すファイルはプロジェクトの入口ファイル、すなわち内部依存の開始は、エントランスファイルに従って層ごとに依存をロードします。Chunkとパッケージ時の入り口ファイルの配置に関しては、もしentryがstringやarrayであれば、Chunkという名前はmainであり、entryがobjectであれば、複数のChunkが出現する可能性があります。Chunkの名前はobjectキーの対内ボタンの名前です。
イベントは3種類の値を受け付けています。
1.シングルエントリの書き方String例:

  entry: './app/to/my/entry/file.js'
  entry:{ main:"'./app/to/my/entry/file.js'"}

2.単一入口配列の書き方Aray例:

  entry:['./app/entry1', './app/entry2']
 複数の依存ファイルを一緒に注入し、それらの依存ガイドを一つの「chunk」に導くときに、行列に入る方法が有用です。つまり、複数のファイルを統合した依存モジュールです。
3.対象文法Object例:

entry:{ a: './app/entry-a', b: ['./app/entry-b1', './app/entry-b2']}
第三者モジュールと共通モジュールを分離
第三者モジュールとwebpackファイルを分離するなど、公共モジュールと似たようなものは、ロードなどの問題を避けるために、時間がかかりすぎて、最適化されます。ここでは主にイベントの対象文法とCommons ChunkPluginを適用します。実用例:
1.業務モジュールと公共モジュール(webpackファイル、第三者モジュール、カスタム共通モジュール)を分離する。

const path = require("path");
const webpack = require("webpack");
const packagejson = require("./package.json");
const config = {
entry: {
  first: './src/first.js',//   common.j vue.js
  second: './src/second.js',//   common.j vue.js
  vendor: Object.keys(packagejson.dependencies)//          
  //    ,      ,                       chunk 
  //   vue          
},
output: {
  path: path.resolve(__dirname,'./dist'),
  filename: '[name].js'
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',//       chunk      vendor,
                 chunk      ,       name commons chunk。
    filename: '[name].js'//           
  }),
]
}

module.exports = config;

2.業務モジュールを詳細に分離し、第三者が公共モジュールwebpackに依存してファイルを実行する

plugins: [//    webpack        
    new webpack.optimize.CommonsChunkPlugin({//          
      name: 'vendor',
      filename: '[name].js'
    }),
    new webpack.optimize.CommonsChunkPlugin({//   vendor    webpack    
      name: 'runtime',
      filename: '[name].js',
      chunks: ['vendor']
    }),
     new webpack.optimize.CommonsChunkPlugin({
    name: ['vendor','runtime'],
    filename: '[name].js',
    minChunks: Infinity//       (entry chunks) >= 3    ,
    //                  
    }),
    new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    filename: '[name].js',
    minChunks:2,//   2,         chunk      
    //  common  first  second          
    chunks: ['first','second']// first.js second.js   commons chunk
    }),
  ]
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。