webpackはいつもキャリアとプラグインをまとめています.これを見ればいいです.

前言
webpackは現代JavaScriptアプリケーションの静的モジュールパッケージングです.webpackがアプリケーションを処理するとき、アプリケーションに必要なモジュールを含み、これらのモジュールを一つ以上のbundleにパッケージ化する依存関係図を再帰的に構築します.webpack学習の難しい点は、その配置と配置の組み合わせです.本稿ではwebpackでよく使われる、主流の構成をまとめ、プロジェクトでのwebpackの応用を簡単に紹介します.初心者の早い位置付けに必要な機能を助けることができます.もちろん、各キャリアプラグインの機能詳細な使い方は紙面に限られています.展示できないので、npm公式サイトに行って最新の配置を確認してください.この方面は内容が多いので、本論文は繰り返します.みんなは収集して関心を持つことができて、そして評論の中で最適化の地方を指摘します.この文章はwebpack 4に基づいています.

npm    ：https://www.npmjs.com/
babel：https://www.babeljs.cn/

1.よく使うloaderと機能
babel-loader@babel/code@babel/prest-env babel-polyfill(厳密にはプラグインです)js文法変換ツールは、ES 6またはより高度な文法をブラウザサポートの文法に変換できます.
css-loaderは入り口ファイルのcssを処理します.
style-loader処理ファイルモジュールのスタイル
postcss-loaderの一番目は前に述べたCSSをJavaScriptで動作できる抽象的な文法ツリー構造(Abstract Syntx Tree,AST)に解析して、二つ目はプラグインを使ってASTを処理して結果を得ることです.
file-loaderは導入した静的なファイルを処理して、カタログによって分類することができます.
url-loaderはfile-loaderと一緒に、導入された静止ファイルを処理し、小さいファイルをbase 64フォーマットのURLに変換して、ネットワーク要求回数を減らすこともできる.url-loaderはfile-loaderに依存します.
eslint-loader文法はloaderを検査して、包装しますかますコンパイルします時文法の問題にヒントを与えます.
2.一般的なプラグインと機能
autprefixerは、CSSファイルを解析し、CSSコンテンツにブラウザプレフィックスを追加し、Can I Useのデータを使用して、どのプレフィックスが必要かを決定するために、ブラウザプレフィックスを自動管理するプラグインです.
httml-webpack-pluginはwebpackで梱包する時、一つのhtmlファイルを作成し、webpackで梱包した静的ファイルを自動的にこれに挿入します.
mini-css-extract-pluginはCSSを独立したファイルとして抽出したプラグインで、cssを含むjsファイルごとにCSSファイルを作成し、必要に応じてcssとsourceMapをロードすることをサポートします.
optimize-css-assites-webpack-plugin圧縮最適化css
uglifyjs-webpack-plugin圧縮最適化js
webpack-dev-serverはローカル一時サーバを起動し、ポートを設定して熱い更新をサポートします.
CleeanWebpackPluginは毎回包装する前にdistフォルダを削除してください.
copyWebpackPluginは他のファイルやフォルダを梱包ファイルにコピーすることができます.
banner Plugin(webpack)版権文字列
ignorePluginは導入したカバンを見落とします.
webpack-mergeは生産環境と同じwebapck配置を開発することができます.vue内のプロファイルdev.co.fig.jsは、このプラグインに基づいています.
httml-withimg-plugn処理)の中のimg
definePlugin定義環境変数
dll Pluginは、付加的に独立したwebpack設定の中で、dllのみのbundleを作成します.このプラグインは、DLReferencePluginが関連する依存性にマッピングするために使用されるmanifest.jsonというファイルを生成します.
DLReferencePluginというプラグインは、webpackのメインプロファイルに設定されています.このプラグインは、dllだけのbundleを必要なプリコンパイルに引用しています.
happypakマルチスレッド包装
3.開発でよく使う機能
ドメインをまたいで解決する
webpack-dev-serverには、proxyエージェントwebpack-dev-serverの中にbefore(mock機能)ブロック要求アナログデータがあります.中間部品webpack-dev-middlewareを使って、ローカルのwebpackをserverに配置します.
パスの略記

reslove :{
    alias:{
        'img':resolve('src')
    }
}
- import xxx form '../../../aaa'
+ import xxx form '@/aaa'

熱更新
webpack-dev-serverにはinline:trueまたはプラグインwebpack.Hot ModuleReplaccement Plugin()が配置されています.
ローディング
プラグイン@babel/plugin-sntax-dynamic-mportを追加します.

let button = document.createElement("button");
button.innerText = "  ";
button.addEventListener("click", function() {
  // es6       ，  jsonp        ,     @babel/plugin-syntax-dynamic-import
  import("./source.js").then(data => {
    // promise  
    console.log(data.default); //     default   
  });
});
document.body.appendChild(button);

4.webpack包装最適化
速度を上げることができますし、体積を減らすこともできます.
1マッピングファイルを削除します.sourceMapdevtool:false
2外部参照cdn
スピード最適化
1大ファイルはdll Plugin DLReferencePluginをプリパックします.
2マルチスレッド包装happypeack
3 babel-loaderオープンキャッシュ//webpack.com nfig.jsuse:[*]

            loader: 'babel-loader',
            options: {
                cacheDirectory: true
            }]

//bablock｛

"presets": [
    "env",
    "react"
],
"plugins": ["transform-runtime"]

)
4 resove ailas一般的なカバンのパスを追加します.
体積最適化
1必要に応じてbabel-plugin-mportをロードする
2コードを書く時はrequireではなくimportで導入します.
3非同期ローディングリソースconst Foo=>import('/Foo.vue')
4公共モジュールのoptimization splichunksから引き出す