webpackでプロジェクト作成（出力管理、HTMLWebpackPlugin）

#webpackでプロジェクト作成（出力管理）

Getting Started
Asset Management
Output Management 　(←今回はコレ)
Development


Webpack公式の[Output management](https://webpack.js.org/guides/output-management)を学ぶ。

- JSファイル内のコマンドの読み込み
- HtmlWebpackPlugin
- clean-webpack-plugin


まずは、エントリーポイントを複数設置して、複数ファイルからindex.htmlに出力する方法を確認する。


<br>
##メソッドの作成
srcディレクトリ配下にindex.js以外にprint.jsファイルを作成する。

```src/print.js
export default function printMe() {
  console.log('I get called from print.js!');
}
```

コンソールにコメントを出力するコマンドを記述。



<br>
##src/index.js
index.jsにprint.jsをインポートする。
ボタンをクリックすると、インポートしたprint.jsを実行するプログラムを記述する。

```js:src/print.js
 import _ from 'lodash';
 import printMe from './print.js';

  function component() {
    const element = document.createElement('div');
   const btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   btn.innerHTML = 'Click me and check the console!';
   btn.onclick = printMe;

   element.appendChild(btn);

    return element;
  }

  document.body.appendChild(component());
```



<br>
##index.htmlの編集
index.htmlに出力用のタグを記述する。
使用するタグは２つ。print.bundle.jsとapp.bundle.js。
この２つのファイルは現状では存在していない。
configファイルで指定した名前で出力するよう記述し、webpackを実行することでファイルが作成される。


```
  <!doctype html>
  <html>
    <head>
     <title>Asset Management</title>
     <title>Output Management</title>
     <script src="./print.bundle.js"></script>
    </head>
    <body>
     <script src="./app.bundle.js"></script>
    </body>
  </html>
```


<br>
##configファイルの編集
エントリーポイントとして、srcの２つのファイルを設定し、各ファイルにつけた名称でdist配下に出力ファイルを作成するよう設定する。

```js:webpack.config.js
  const path = require('path');

  module.exports = {
   entry: {
     app: './src/index.js',
     print: './src/print.js',
   },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
```

<br>
##webpackを再読み込み
`npm build run`で再読み込みを実行する。

```
$npm build run

          Asset      Size  Chunks             Chunk Names
  app.bundle.js  72.6 KiB    0, 1  [emitted]  app
print.bundle.js  1.02 KiB       1  [emitted]  print
Entrypoint app = app.bundle.js
Entrypoint print = print.bundle.js
```

先ほど設定したファイルをエントリーポイントとして出力ファイルが作成される。

dist/index.htmlを開くとボタンが表示され、クリックするとプログラムが実行される。


###メモ：出力までの流れ

1. src配下に元となるファイルを作成する
2. index.jsにimportし、ブラウザ表示用のタグを記述する
3. configファイルでエントリーポイントに指定し、出力名を指定する
4. dist/index.html配下に出力用のタグを設置する



<br>
##HtmlWebpackPlugin
HtmlWebpackPluginを使うと、configのoutputを読み取って、その表示用タグを含んだindex.htmlを自動作成してくれる。

※ただし、既存でdist/index.htmlがある場合は上書きされるので注意。

<br>
##プラグインのインストール

```
npm install --save-dev html-webpack-plugin
```


<br>
##configファイルの設定

```webpack.config.js
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'),
    },
  };
```


<br>
##clean-webpack-plugin
clean-webpack-pluginを使うことで/dist配下をきれいに保つことができる。

これがないと、使われてないファイルも/dist配下に残っていくが、これがあれば、使うファイル以外は自動で削除してくれる。


```
npm install --save-dev clean-webpack-plugin
```


```js:webpack.config.js
  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');

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