- HTML-のWebPACK - プラグイン
- クリーンWebPACKの-プラグイン
一、HTML-WebPACKの-プラグイン
ファイル名の一部として、ハッシュ値を使用して、JS、CSSスタイルファイルやスクリプトファイルを梱包する際に生成し、その結果をパックごとにデバッグを手動で名前を変更する必要があります、このような行為は、本来の意図のWebPACKの自動化パッケージだけでなく、需要に違反したためこれは、コメントをクリアするために、ソースファイルだけでなく、一連の操作を直接操作することはできませんhtmlファイルの圧縮を最適化することです。
NPMのhtml-WebPACKの-プラグインをインストール--save-devの
より詳細なチュートリアルのドキュメントは、NPMプラグインを参照することができるドキュメント：https://www.npmjs.com/package/html-webpack-plugin
1 VARの HtmlWebpackPluginザは、（ 'HTML-のWebPACK-プラグイン' =を必要とする）; 2 module.exportsは= { 3つの。 プラグイン：[する 4。 // 生成されたHTMLファイル 5。 新しい新しいHtmlWebpackPlugin（{ 6。 名： 'index.htmlを'、// 生成されたファイルを名前 7。 テンプレート： './ index.htmlを'、//指定されたパッケージ化された圧縮ファイル 。8 縮小化：{ 9。 removeComments：trueに、// クリア注 10 collapseWhitespace：trueに// クリーン空間 11 } 12 }） 13 }
もちろん、あなたが（チャンクプロパティで）同時にhtmlファイルを複数扱うことができます。
1つの プラグイン：[ 2 新しいHtmlWebpackPlugin（{ 3つの チャンク：[ 'アプリ' ] 4 }） 5 ]
二、クリーンWebPACKの-プラグイン
クリーンのWebPACK - プラグインのプラグインがフォルダの建設をクリーンアップするために使用され、ファイルが明確な上に構築され、このプラグインは非常に簡単です、ただのプラグインを導入することができ、余分な設定はありません、それはその変数の作成時に注意すべきです中括弧を使用する必要が変数名を包ん、または時々エラーケース際、原因は明らかではありません。
1 CONST} = {CleanWebpackPluginは（ 'クリーンWebPACKの-Plugin'を必要とする）; 2 module.exportsは= { 3つの。 プラグイン：[ 4。 新しい新しい CleanWebpackPlugin（）// クリーンビルドフォルダ 5 ] 6 }
ここのブログは、テストに基づいてブログ、ブログ上のテストコードと一致すべて、専用の設定ファイルに基づいているすべてのコードの次のプロファイルを貼り付け、いくつかの新機能が追加されます。
1つの VARのパス=必要とする（ "パス" ）。 2 CONSTのグロブ=は（ 'グロブ'を必要とします）。 3 CONST PurifyCSSPlugin =（ 'purifycss-WebPACKの'を必要とします）。 4 VaRの MiniCssExtractPluginは=（ "ミニCSS-抽出物プラグイン"を必要とします）。 5 VAR HtmlWebpackPlugin =必要とする（ 'HTML-のWebPACK-プラグイン' ）。 6のconst {CleanWebpackPlugin} =（ 'クリーンWebPACKの-Plugin'を必要とします）。 7 module.exportsは= { 8 エントリ：{ 9 度：」./src/index.js' 、 10 }、 11 出力： パス：path.resolve（__ DIRNAME、 "DIST" ）、 13 名： "[名前] - [ハッシュ：5]の.js" 、 14 // publicPath： '/ DIST' 15 }、 16 モジュール：{ 17の ルール：[ 18 { 19 試験：/\.less$/ 、 20 使用：[ 21 // {ローダ： 'スタイルローダ'}、 22 {ローダ：MiniCssExtractPlugin.loader} 23 {ローダ： 'CSS-ローダ' }、 24 { 25 ローダ： 'postcssローダ' 、 26は、 オプション：{ 27 IDENT： 'postcss' 、 28個の プラグイン：[ 29 // 必要とする（ 'autoprefixer'）（）、追加接頭辞// 30 ザ必要（ 'postcss-cssnext'）（） 、// 次の構文変換CSSプレフィックスを追加 31である 必要（ 'cssnano' ）（{ 32 PRESET： 'デフォルト' 33です }）、 34 ] 35 } 36 } 37 {ローダ： '以下ローダ' }]、 38 } 39 ] 40 }、 41個の プラグイン： 42 新MiniCssExtractPlugin（{ 43の // webpackOptions.outputにおいて同じオプションと同様のオプション 44 // 両方のオプションでありますオプション 45 名： "[名前] - [ハッシュ：5]の.css" 、 46 // chunkFilename： "[ID]の.css" 47 }）、 48 新しいHtmlWebpackPlugin（{ 49 ファイル名： 'index.htmlを'、// 生成されたファイル名 50 テンプレート： './ index.htmlを'、// 圧縮ファイルのパッキング 51がある 縮小化：{ 52は removeComments：trueに、// クリア注 53がある collapseWhitespace：trueに// 清浄空間 54である } 55 ）} 56が 新しい新しい（）CleanWebpackPlugin 57は、 // 新しい新しいPurifyCSSPlugin（{ 58の // ：glob.sync（path.join（__ DIRNAME、 '.. / index.htmlを'）パス） 59 // }） 60 ] 61 }