参考：https://www.webpackjs.com/（中国語ドキュメント） https://www.webpackjs.com/（公文書）
目的のインスタンスに関連する演習場合は、この記事では、理論的基礎として使用することができます。まず、それを説明する必要があり、この記事では、WebPACKの基本的な構成プロパティを説明するに焦点を当てて、含まれていないインスタンスは、説明するために、フォームを理解することは容易になります。
WebPACKのフロントエンドの自動化プロジェクトビルドツールを、本質的には、WebPACKのは、 近代的なJavaScriptアプリケーションで静的パッカーモジュール（モジュールバンドラー）。WebPACKのアプリケーションを処理するとき、それは再帰的に構築する依存グラフ（依存関係グラフ）各モジュールがアプリケーション所望のが、これらのモジュールの全てが、1つまたはそれ以上の中に包装されている含み、 バンドル。（公式サイトは定義されています）。
だから、私たちの人々の言葉：WebPACKのフロントエンドは、モジュラーソリューション、より強調パッケージですが、あなたはモジュールの一つとして見られている開発中のリソースファイル（画像、JSファイル、CSSファイルなど）を入れて、貫通することができますWebPACKの提供ローダー（ローダ）とプラグイン（プラグイン）処理、統合および圧縮のため、本番環境でのラインに梱包、小さいファイルリソース、ブラウザのレンダリング速度の持ち上げを容易にします。
まず、のWebPACKの方法を4つのコア概念を理解する必要があります。
エントランス（エントリー）
出口（出力）
ローダー（ローダ）
プラグイン（プラグイン）
エントランス（エントリー）：
WebPACKの入口はWebPACKの入口構成ファイルによって示されている手段、すなわち開始する場合、我々は特性WebPACKのエントリ、パスを指定するためのファイルエントリを構成することができます。
私たちは、単純なケースで見ることができます：
//は、モジュールのスローのWebPACKのにアクセスできるようにする必要があり = module.exportsは{ // エントリは、エントリのファイル属性値の相対パスの指定 ：」./src/app.js'エントリを }
出口（出力）：
それはWebPACKの輸出出力は、作成バンドル、およびどのようにファイルに名前を付け、ファイルのディレクトリパスの出力を伝え、あなたが出力プロパティを追加することにより、WebPACKのパッケージを使用するときに、他の言葉で、WebPACKを介してパッケージの最終的な出力を設定します出力ファイル名とパス。
// ノードモジュールの導入路 CONST =パスが必要（ 'パス' ）; module.exportsは = { // WebPACKの実行エントリファイルの エントリ：」./src/app.js' 、 @ アウトレット 出力：{ // すべてファイルbundle.jsへの依存モジュールを組み合わせた出力 ファイル名：「bundle.js」、 // 出力ファイルのディレクトリdistのに // __dirnameノード環境では、現在のディレクトリを示し、グローバル変数で パスを：path.resolve（__ dirnameは、 './dist' ） } }。
ローダ（ローダー）：
ローダーは、ファイルのいくつかの非Javscriptタイプ（ネイティブJSとES5を識別するために自身のWebPACKしかできない）に対処するためのWebPACKできるようにすることです、ローダは、効果的なモジュールのWebPACKにファイルのすべての種類のことができます扱うことができ、その後、あなたはの容量のWebPACKをパックすることができ、これらのファイルが処理され、ローダは2つのオプションが設定されています。
テスト：正規表現は、一般的に、ファイルの種類を一致させるために使用されています。
使用：鍵となることができます。配列の形式で値がファイルをロードするためにどのようなWebPACKのローダーを伝えるために使用することができます
// ノードモジュールの導入路 CONST =パスが必要（ 'パス' ）; module.exportsは = { // WebPACKの実行エントリファイルの エントリ：」./src/app.js' 、 @ アウトレット 出力：{ // すべてファイルbundle.jsへの依存モジュールを組み合わせた出力 ファイル名：「bundle.js」、 // 出力ファイルのディレクトリdistのに // __dirnameノード環境では、現在のディレクトリを示し、グローバル変数で パスを：path.resolve（__ dirnameは、 「./dist」） } // モジュールローダを構成する必要がキーワード、 Module1の：{ // 配列のためのルールの設定保存する各ローダ ルール：[ { // 試験特性が設定されなければなりませんファイルの照合に正規表現 テスト:. / \ CSSの$ / 、 // 同じファイルローダの複数導入する方法 を使用：[ // 名前が設定されている必要がありローダーローダーは、文字列である {：ローダー「スタイル・ローダー」} 、 {ローダ：「CSSローダ」} ]、 // でnode_moduleディレクトリのファイルを削除するフィルタ 除外する：/ node_module / 、 // 指定された範囲の.cssファイルが指定されたファイル/デモ/ディレクトリマッチングに一致が 含まれます：/デモ/ } ] } }。
WebPACKの規定、WebPACKのローダーでの定義は、我々はそれ以外の場合はエラーになり、module.rulesに定義する必要があり、テストとは、一致するファイルを、ルールを指定する2つのプロパティを使用して、これらの二つの属性が必須ですと何ローダーを対処します選挙、除外、それぞれのファイルに（処理されていない）し、濾過し、ファイルフォルダ内のファイル（処理）を指定含まれ、これら二つの属性はオプションです。
プラグイン（プラグイン）：
ローダーは、タスクの広い範囲を実行するために使用することができるプラグブロック、特定の種類を変換するために使用されます。プラグインの範囲は、環境変数を再定義するすべての方法を最適化し、圧縮をパッケージから、含まれています。非常に強力なプラグインインターフェイスは、さまざまなタスクを処理するために使用することができます。プラグインを使用するには、プラグイン（導入）を必要とする必要があり、その後、プラグインの配列に追加、ほとんどのプラグインはオプションオプションを使用してカスタマイズすることができます
// ノードモジュールの導入路 CONST =パス（「パス」が必要）; // 導入抽出物テキストのWebPACK・プラグインウィジェット CONST = ExtractTextPlugin（「抽出物テキストのWebPACK・プラグイン」が必要）; module.exportsは = { / / WebPACKの実行エントリファイル エントリ：」./src/app.js' 、 // 出口 出力：{ // ファイルに依存するすべてのモジュールが組み合わさbundle.js出力 ファイル名： 『bundle.js』、 // 出力ファイルdistディレクトリが置かれ 、// カレントディレクトリを示す、__dirnameノード環境グローバル変数をある パス：path.resolveを（__ dirnameは、「./dist」）、 } // ローダーを設定する必要がありmoduleキーワード、 モジュール： { // 配列の規則は、各ローダは、構成保存する ルール：[ { // テストプロパティを設定する必要があり、ファイルのマッチングのための正規表現である :.テスト/ \ CSSの$ / 、 // 同じファイル内に導入ローダの複数の方法 の使用： // 名前が設定されている必要があり、ローダ・ローダは、文字列である ：{「スタイルローダ」ローダ、} ：{ローダ「CSS-ローダ」} 、] // 、フィルタnode_moduleディレクトリ内のファイルを除外 / node_module /：インクルードは除外し、 // 指定された範囲の.cssファイルが指定したファイル/デモ/ディレクトリの試合に一致する インクルードが含まれます：/デモ/ } ] } // 構成ウィジェット プラグイン：[ 新しい新しいExtractTextPlugin（{ // カスタム構成オプションウィジェット // ファイルのの.css .jsファイル名から抽出された ファイル名： `[名] _ [ MD5：contenthash：ヘキサン：8 ] .css`、 }） ] }。
上記の4つのコアコンセプトはWebPACKのある、のは、いくつかの一般的なプラグインをご紹介しましょう：
ローダ処理CSSとSassの：
デフォルトではWebPACKのは、CSSコードを処理していないが、我々は、ローダのWebPACKで扱うことができます。
module.exports = { entry: './src/app.js', output: { path: __dirname + '/dist', filename: 'app.bundle.js' }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } };
在日常开发中，我们只需要在webpack.config.js文件中写上上面的配置代码即可让webpack来处理CSS代码和Sass代码；
webpack-dev-server：
webpack-dev-server是webpack的一个常用插件，可以用来在本地上开启服务、启动浏览器并且可以实时监听文件修改；
module.exports = { entry: './src/app.js', ... //进行webpack-dev-server插件配置 devServer: { //端口号，默认8080，可以自定义修改 port: 9000, //运行webpack-dev-server的时候自动打开浏览器 open: true }, ... };
source-map调试：
开发总是离不开调试，但是我们用webpack给项目打包了之后，我们是很不方便找到错误或者问题所在的，当然webpack也想到了这一点，因此webpack给我们提供了source-map来进行调试；
devtool选项
source-map
配置结果
在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；
devtool选项
cheap-module-source-map
配置结果
在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
devtool选项
eval-source-map
配置结果
使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；
devtool选项
cheap-module-eval-source-map
配置结果
这是在打包文件时最快的生成source map的方法，生成的Source Map会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；
综上所述，从上到下打包速度越来越快，不过同时带来的副作用也越多，较快的打包速度的后果就是对打包后的文件的的执行有一定影响。在中小型项目中，eval-source-map是一个比较不错的选择；
cheap-module-eval-source-map方法构建速度更快，但是不利于调试，推荐在大型项目考虑时间成本时使用。
module.exports={ devtool:"eval-source-map", }
在webpack打包之后，如果报错我们是看不到源文件的，因为此时文件已经被webpack打包了，这很不方便我们的开发调试，source-map就是用来解决这个问题的，通过添加配置devtool:"eval-source-map"这一行简单的代码，我们即可在调试的时候看到我们的源文件进行调试；