レビューのWebPACK（C）---出力管理

1、出力束の複数

DIST / index.htmlを

<！DOCTYPE HTML>

<HTML>

<ヘッド>

<メタ文字セット= "UTF-8">

<タイトル>出力管理</ TITLE>

</ head>の

<身体>

ます。<script type = "text / javascriptの" SRC = "app.bundle.js"> </ SCRIPT>ます。<script type = "text / javascriptの" SRC = "print.bundle.js"> </ SCRIPT> </ BODY>

</ HTML>

webpack.config.js

エントリー：{

アプリ：」./src/index.js'

印刷：」./src/print.js'

}、

出力：{

ファイル名： '[名] .bundle.js'

パス：path.resolve（__ dirnameは、 'DIST'）

}、

2、設定HtmlWebpackPlugin

NPM --save-devのHTML-WebPACKの-プラグインをインストール

しかしHtmlWebpackPluginそれが私たちの元を置き換えるために、新しく生成されたindex.htmlファイルを使用します

webpack.config.js

 const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Output Management'
+ }) + ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };

3、/ distのフォルダをクリーンアップ

NPMクリーンWebPACKの-プラグインをインストール--save-devの

CONSTパス=（「パス」）を必要とします。
CONST HtmlWebpackPlugin =（ 'HTML-WebPACKの-プラグイン'）を必要とします。
+ CONST CleanWebpackPlugin =（ 'クリーンWebPACKの-プラグイン'）を必要とします。

module.exportsは= {
エントリ：{
アプリ： './src/index.js'、
プリント：' ./src/print.js'
}、
プラグイン：[
+新しいCleanWebpackPlugin（[ 'DIST']）、
新しいHtmlWebpackPlugin（ {
タイトル： '出力管理'
}）
]、
出力：{
ファイル名： '[名] .bundle.js'、
パス：path.resolve（__ DIRNAME、 'DIST'）
}
}。

2つのピットの公式ウェブサイト：

文言githupを見て、クリーンWebPACKの、プラグイン今導入された新しいバージョンが変更されているのconst { CleanWebpackPluginを } = 必要とする（「クリーンWebPACKの-プラグイン」）に変更。

NPMは、ビルドを実行し、次のエラーを実行します。

取り外し可能なパラメータ
新しいCleanWebpackPlugin（）

レビューのWebPACK（C）---出力管理

おすすめ