あなたは本当にwebpackを上手に使いますか?

https://www.webpackjs.com/公式サイトアドレス

履歴書にwebpackを使いこなすと書いてあると、vue足場、react足場の道を歩くのが楽なだけだとは知らなかった.
面接官があなたにこれらの質問をしたとき、あなたはまだ余裕を持って答えることができますか(達人は無視してください)

webpackとは何ですか.webpackのパッケージプロセスはどうですか.

webpackインフラストラクチャのプロパティ

loaderとは何ですか?pluginとは?彼らが前後関係を実行するのは何ですか.

webpackの構築速度(これは比較的広い)

を向上させる

自分でpluginを書いたことがありますか(書いたと答えたら、すぐに質問が来ます)

compilerを使ったことがありますか?その中のいくつかの方法を紹介しますか?

本文

        。        webpack   ，         vue，  vue-cli    ，  demo        

   vue，    webpack。

         ，       webpack  。           。

参考になる記事があります.
入門Webpack、これを見れば十分です.
興味のあるものは自分で見ることができます.
Webpackのパッケージ化過程はどうなっていますか?

                    ，           。

webpack        javascript   ， webpack        ，

  loader    ，  plugin    ，               ，

webpack         。

Webpackインフラストラクチャのプロパティはどれらがありますか?

入口(entry)

出力(output)

loader

プラグイン

もちろん、実際のエンジニアリングでは、見られるwebpackの構成プロパティはそれほど簡単ではありません.
たとえば、環境構成を行います.dev、proなど.
プロキシ構成に使用する場合があります:次のコードに示すように、ドメイン間構成に使用します.

 proxyTable: {
      '/api': {
        target: 'http://……………………',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      },
 }

             ，    ，      ，       。

           。

               。

loaderとは?pluginとは?彼らが前後関係を実行するのは何ですか.

loader              。

loader       import  "  "        。

  ，loader           “  (task)”，                 。

    webpack      。

webpack        ，   webpack                ！

         loader         。

自然に、このように説明することで、より明確に理解することができます.
pluginはloaderの後に実行され、loaderがモジュールコードを処理した後、pluginはloaderができなかったことを処理し続けた.
Webpackの構築速度の向上
ここにある文章は比較的詳しく紹介されている.
https://www.jianshu.com/p/bb1e76edc71e
もちろん最適化された点は大体区別できます

-      loader，        ，       webpack     。

-   Happypack          。

-                "script"       

-     

compilerとは

                ，      。

compiler

Compiler     webpack      ，    CLI   Node API        ，

      compilation   。   (extend)  Tapable  ，         。

          ，    Compiler    。

次のライフサイクルフック関数
ライフサイクル
説明
entryOption
entry構成項目が処理された後、プラグインが実行されます.
afterPlugins
初期プラグインの設定が完了したら、プラグインを実行します.
afterResolvers
resolverのインストールが完了したら、プラグインを実行します.
environment
Environmentの準備ができたら、プラグインを実行します.
afterEnvironment
Environmentのインストールが完了したら、プラグインを実行します.
beforeRun
compiler.run()を実行する前に、フックを追加します.
run
recordsの読み取りを開始する前に、compilerをフックします.
watchRun
リスニングモードでは、新しいコンパイル(compilation)がトリガーされた後、プラグインが実行されますが、実際のコンパイルが開始される前に実行されます.
normalModuleFactory
NormalModuleFactory作成後、プラグインを実行します.
contextModuleFactory
ContextModuleFactory作成後、プラグインを実行します.
beforeCompile
コンパイル(compilation)パラメータの作成後、プラグインを実行します.
compile
新しいコンパイル(compilation)が作成されると、compilerがフックされます.
thisCompilation
compilationイベントをトリガーする前に実行します(次のcompilationを参照).
compilation
コンパイル(compilation)作成後、プラグインを実行します.
make
……
afterCompile
……
shouldEmit
…….
needAdditionalPass
……
afterEmit
リソースをoutputディレクトリに生成した後.
done
コンパイル完了.
failed
コンパイルに失敗しました.
invalid
リスニングモードでコンパイルが無効な場合.
watchClose
リスニングモードが停止しました.
実際に応用する場合、上のいくつかのコンパイル前、コンパイル後のいくつかのフックしか必要ありません.
最後に

          ，          webpack               。

          ，    。

転載先:https://www.cnblogs.com/star-wind/p/11254972.html