Webpackの原理を簡単に説明します.

Webpackの原理を簡単に説明します.
webpackはJavaScriptアプリケーションの静的モジュールパッケージングであり、webpack処理アプリケーションの場合、再帰的に依存関係図を構築し、図に依存してプロジェクトに必要な各モジュールをマッピングし、パッケージ化して一つ以上のbundleを生成する.
コマンドライン実行命令webpackの場合、webpackはデフォルトで現在のディレクトリからwebpack.co.fig.jsファイルを検索します.
webpackの構成(webpack.co.fig.js)には4つのコア概念があります.

入口(entry)

出力(output)

loader

プラグイン

入り口(entry)
entry属性はどのモジュールから依存図を構築するかをwebpackに教え、このモジュールの直接または間接依存モジュールをすべて計算します.
entryがStringまたはArayの場合、entryが出力するChunkの名前はデフォルトではmain entryがObjectの場合、webpackは複数のChunkを出力し、Chunkの名前はkeyとなります.
ここをクリックして詳細を確認してください.
出力(output)
out put属性はwebpackに最終的にファイルを包装する出力経路を教えます.また、パッケージファイルの名前はどうなりますか?

const path = require('path');

module.exports = {
  entry: './src/index.js',
  // ./dist/main.js
  output: {
    //           
    filename: 'my-first-webpack.bundle.js', 
    //          
    // id - Chunk     , 0  
    // name - Chunk   
    // hash - Chunk     ( id) hash 
    // chunkhash - Chunk   hash 
    filename: '[id].[name].[hash].[chunkhash].js',
    //            
    // __dirname           
    path: path.resolve(__dirname, 'dist'), 
  }
};

nodeの中のpath、ここをクリックして詳細を調べます.
loader
module属性構成はモジュールをどのように処理しますか?ここでは、rules構成モジュールの読み取りと解析規則は、Loaderを構成するために一般的に使用されます.
カスタムプロファイルが追加されていない場合、webpackはJavaScriptファイルとJSONファイルしか処理できません.Loaderはwebpackに他の種類のファイルをモジュールに処理させて、依存図に追加して、アプリケーションに使用されます.
条件マッチング:test/include/excluedeの3つの構成でファイルにマッチングし、stringとarrayをサポートします.
アプリケーションルール:ヒットファイルにマッチした後、useの構成を使って、loaderを適用します.同時に「後ろから前へ」の順番で複数のloaderを適用できます.
リセット順序:一組のloaderの実行順序は右から左へ魅力的です.enforceオプションによって、一つのloaderの実行順序を最後か一番前に置くことができます.

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [ //  rules         
      {
        test: /\.txt$/, //                
        //    src    js  ，   Webpack     
        include: path.resolve(__dirname, 'src'),
        //    node_modules       
        exclude: path.resolve(__dirname, 'node_modules'),
        //          ，     sass-loader   ，       css-loader      style-loader。
        use: ['style-loader', 'css-loader', 'sass-loader'],
        // use       Object
        use: [
              {
                loader:'babel-loader',
                options:{
                  cacheDirectory:true,
                },
                // enforce:'post'        Loader          
                // enforce        pre，    Loader           
                enforce:'post'
              },
        ]
      }
    ]
  }
};

ここをクリックして詳細を確認してください.
プラグイン(plugis)
loadersはいくつかのタイプのモジュール(ファイル)を変換します.pluginは最適化、資源管理、環境変数の挿入などの様々なタスクを実行します.
pluginはWebpack機能を拡張するためのもので、構築プロセスにフックを注入することによって、webpackに大きな柔軟性を与えます.
require方式でプラグインを導入し、実際に例化されたオブジェクトをpluginsに追加します.

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

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

上の例では、html-webpack-pluginプラグインはアプリケーションにHTMLファイルを作成し、ファイルにパッケージされたファイルを挿入します.
tip:Pluginを使用する難しさは、WebpackでPluginにどのようにアクセスするかではなく、Plugin自身が提供する構成項目を把握することにある.
ここをクリックして詳細を確認してください.
webpackパッケージの基本的なロジック

初期化パラメータ

設定ファイルとShell文からパラメータを読み出して統合し、最終的なパラメータを導出します.

はコンパイルを開始しました.
最初のステップで得られたパラメータでCopilerオブジェクトを初期化し、すべての構成のプラグインをロードし、オブジェクト中のrunメソッドを実行してコンパイルを開始します.

入り口確認

設定中のイベントからすべてのエントリファイルを探し出します.

コンパイルモジュール

エントリファイルから、すべての構成のloaderを呼び出してモジュールを翻訳し、モジュールに依存するモジュールを探し出し、すべてのモジュール依存性を再帰的に検索する.

完成モジュールコンパイル

第四部のloaderを使って、すべてのモジュールを翻訳した後、モジュールごとに翻訳された最終内容と彼らの間の依存関係を得る.

出力リソース

入口とモジュール間の依存関係によって、複数のモジュールを含むChunkに組み立て、各chunkを個別のファイルに変換して出力リストに追加する.

出力完了

出力内容を確認したら、プロファイルから出力の経路とファイル名を確認し、ファイル内容をファイルシステムに書き込みます.
tip:上記の過程で、webpackは特定の時間に特定の時間を放送し、プラグインは所望のイベント放送を受けた後に特性の論理を実行し、プラグインはwebpackが提供するAPIを呼び出してwebpackの運転結果を変更することができます.
出力ファイル解析
webpackプロファイル

const path = require('path')
// Since webpack 4 the "extract-text-webpack-plugin" should not be used for css.
// Use "mini-css-extract-plugin" instead
// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge')

//     npm run dev   npm run build       
const TARGET = process.env.npm_lifecycle_event
const APP_PATH = path.join(__dirname, '/src')
const dist = path.resolve(__dirname, 'dist')
const common = {
  entry: `${APP_PATH}/index.js`,
  output: {
    path: dist,
    filename: 'index.js'
  }
}

let other = {}

if (TARGET === 'dev') {
  other = {
    mode: 'development',
    module: {
      rules: [
        {
          test: /\.css$/,
          // TODO   loader     
          use: [
            'style-loader', // Adds CSS to the DOM by injecting a