WebPACKの一般的な構成

webpack.config.js

CONSTパス=（「パス」を必要とします）。
CONSTのWebPACK =必要な（ 'のWebPACK' ）。
CONST htmlWebpackPlugin =（ 'HTML-WebPACKの-Plugin'を必要とします）。
constのvueLoaderPlugin =必要（ 'VUE-ローダ/ libに/プラグイン'）; // 引入这行

module.exportsは = { 
    エントリ： './src/main.js' 、
    出力：{ 
        パス：path.resolve（__ DIRNAME、 ' ./dist」）、
        ファイル名： 'boundle.js' 
    }、
    モード： '開発'は、
    devServer：{ 
        開く：真、
        ポート：3000、// ポート番号実行し 
        、 'SRC'：ContentBaseを// でディレクトリを指定する 
        ホット：trueに、// ホット更新を有効 
        OpenPageを： 'index.htmlを' //はデフォルトのスタートページに設定
    }、
    [：プラグイン
        // 設定をウィジェットノード
        新しい新しい webpack.HotModuleReplacementPlugin（）// ホット更新
        新しい新しいvueLoaderPlugin（）、
         新しい新しいhtmlWebpackPlugin（{
             // HTMLページを生成するために、プラグインメモリを作成する
            // 、パッケージboundle.jsは自動的にHTMLページ内に注入 
            テンプレート：path.join（__ dirnameは、 './src/index.html' ）、
            ファイル名：'index.htmlを' 
        }）
    ]、
    Module1の：{ 
        ルール：[ 
            // サードパーティのモジュールマッチングルール
            { 
                テスト： /\.css$/ 、
                使用：[
                     'スタイルローダ' 、
                    { 
                        ローダー： 'CSS-ローダー' 、
                        オプション：{ 
                            sourceMap：真へ
                        } 
                    }、
                    { 
                        ローダ： 'postcssローダ' 、
                        オプション：{
                            IDENT： 'postcss'、、
                            sourceMap：trueに、
                            （ローダ）：プラグイン => { 
                                （必要 'autoprefixer'）（{overrideBrowserslist：[ 'CNで> 0.15％' ]}）
                            } 
                        } 
                    } 
                ] 
            }、
            { 
                // 処理画像パスローダー 
                試験：/ 。\（JPG | PNG | GIF | BMP | JPEG）$ / 、
                使用：{ 
                    ローダー： 'URL-ローダー' 8501
                    オプション：{ 
                        制限：、
                         // ハッシュ-画像の元の名前。原画像サフィックス 
                        名： '[ハッシュ:. 8] - [名前] [EXT]' 
                    } 
                } 
            }、
            { 
                テスト： /\.(ttf|eot|svg|woff|woff2)$/ 、
                使用：[「URL-ローダー' ]
                 // 使用：{ 
                //      ローダー：' URL-ローダー」、
                //      オプション：{ 

                //      } 
                // } 
            }、
             // テスト:. / \（TTF | EOT | WOFF | woff2 | SVG）$ /、
            //使用：[「ファイル・ローダー」] // 1あなたのリソース最終出力ディレクトリに移動し、戻りURLリソースを導入しました。
            {
                テスト： /\.js$/ 、
                除外する： /（node_modules | bower_components）/、// 両方のJSの内側ではないコンパイル除外
                使用を：{ 
                    ローダー： 'バベル-ローダー' 、
                } 
            }、
            { 
                テスト： / \。 $ VUE / 、
                使用：[ 
                    { 
                        ローダー： 'VUEローダ' 、
                    } 
                ] 
            }、
            { 
                テスト： 
                使用：[/\.scss$/ 、"スタイル・ローダ"、 "CSS-ローダ"、 "SASSローダ" ] 
            } 
        ] 
    } 
}。

package.json（VUE流派）

{
   "名前"： "のWebPACKテスト" 、
   "バージョン"： "1.0.0" 、
   "説明"： "テスト" 、
   "メイン"： "main.js" 、
   "依存性" ：{
     "jQueryの"：「^ 3.4.1" 、
     "ノードSASS"： "^ 4.12.0" 、
     "VUE"： "^ 2.6.10" 、
     "WebPACKの-DEV-サーバ"： "^ 3.8.0" 
  }、
   "devDependencies" ：{
     "autoprefixer"： "^ 9.6.1" 、
     "バベル・コア"： "^ 6.26.3" 、
     "バベル・ローダー"："^ 7.1.5" 、
     "バベル・プラグイン・変換・ランタイム"： "^ 6.23.0" 、
     "バベル・プリセット-ENV"： "^ 1.7.0" 、
    "バベル・プリセット・ステージ0"： "^ 6.24.1" 、
     "CSS-ローダ"： "^ 3.2.0" 、
     "ファイルローダ"： "^ 4.2.0" 、
     "HTML-のWebPACK、プラグイン" ： "^ 3.2.0" 、
     "postcssローダー"： "^ 3.0.0" 、
     "SASS-ローダー"： "^ 8.0.0" 、
     "スタイル・ローダー"： "^ 1.0.0" 、
    「URL -ローダー"： "^ 2.1.0" 、
     "VUE-ローダー"： "^ 15.7.1" 、
     "VUE-ルータ"： "^ 3.1.3" 、
     "VUEのテンプレートコンパイラ"： "^ 2.6.10" 、
     "vuex"：「^ 3.1。1" 、
     "WebPACKの"： "^ 4.39.3" 、
     "WebPACKの-CLI"： "^ 3.3.8" 
  }、
   "スクリプト" ：{
    "DEV2"： "のWebPACK-devのサーバー--open --port 3000 --contentBase SRC --hot" 、
     "DEV"： "のWebPACK-devのサーバー" 、
     "テスト"： "エコー\"エラー：なしテスト指定された\」&& 1"番出口
  }、
   "著者"： "" 、
   "ライセンス"： "ISC" 
}