webpackでプロジェクト作成（初期設定）

#webpackでプロジェクト作成

1. Getting Started　(←今回はコレ)
2. Asset Management
3. Output Management
4. Development


Vueでプロジェクトを作成すると、必要なファイルを一気に作成してくれるが、webpackを使えばここのファイルを確認しながら自分で作成することができる。

vueも裏側ではwebpackを使用している。


##webpackとは
機能毎にディレクトリやファイルを切り分けて管理するツール。
複数人開発や複数ページの開発の場合に、作業分担をしやすくする。


開発手順は[公式ページ](https://webpack.js.org/guides/getting-started/)に則って作業していけばOK。



<br>
##プロジェクフォルダの作成

```bash:
mkdir webpack-demo
cd webpack-demo
npm init -y 
npm install webpack webpack-cli --save-dev
```

・`npm init -y`
package.jsonファイルの作成。
-yオプションで質問にすべてyesで答える。


```json:package.json
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

・`npm install webpack webpack-cli --save-dev`
webpack, webpack-cliをインストール。
--save-devは、開発モード（devDependencies）としてインストール。


実行すると、下記ファイルができる。
・node_modules
インストールしたパッケージを保存するフォルダ。 

・pakcage-lock.json
インストールしたモジュールのバージョンなどの詳細が自動記録される。（編集するファイルではない）



##ファイルの作成
指定のようにファイルとフォルダを作成する。
＋が作成するファイル。ここにはないが、マイナスは削除するファイル（後ほど出てくる）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/33992ce8-ab42-9ddc-05a7-ef126d478306.png)


<br>
##src/index.jsファイルの編集
divタグを作成し、hello webpackを出力。

```js:
function component() {
  const element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

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

_.joinメソッドはLodashというJSの専用モジュールのメソッド。
lodashは後ほどインストールする。



<br>
##index.html
index.htmlに以下を記述。サンプル表示用のソースコード。

```html:
<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>
```


<br>
##package.jsonの編集
誤って公開してしまうことを防ぐため、privateにする。
また、不要なmainエントリーを削除する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/7fb66916-ee27-62c3-822e-112e49ecafa6.png)



<br>
##distフォルダの作成
ここでdistフォルダとsrcフォルダの２つを作成する。これがかなり重要。

/srcは編集するファイル。/distは配信用に静的に出力されるファイル。/distはローダーにより自動生成される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/7fba7d10-0916-780f-12d3-8ad4273d1959.png)


<br>
##lodashのインストール

```
npm install --save lodash
```

`--save`はpackage.jsonの本番環境（dependencies）にインストールするもの。

npm 5.0以降はデフォルトで--saveありなので特に記述する必要なし。


また、package.jsonに以下が追加される。

```js
  "dependencies": {
    "lodash": "^4.17.20"
```

本番環境でlodashをインストールすることを表している。
^は一番左の番号（０以外）のバージョンの中で最新のものをインストールする意味。

`^4.17.20` = `4.17.20 <=version < 5.0.0`



<br>
##index.jsの編集
lodashモジュールを`_`としてインストールする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/52d9cfbe-e916-c98c-3282-854813d1ea15.png)

コメントは任意。


<br>
##index.htmlの編集
後ほど作成するmain.jsに記載した内容を出力できるようにタグを追加する。

main.jsをエントリーポイント。追加したタグをアウトプットと呼ぶ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/52ce9580-fad3-5072-4e15-0365c35eb446.png)



<br>
##npx webpackの実行
main.jsとscriptタグを繋ぐため以下コマンドを実行する。

```
npx webpack


Version: webpack 4.44.2
Time: 1293ms
Built at: 2020-10-05 20:09:59
  Asset      Size  Chunks             Chunk Names
main.js  72.3 KiB       0  [emitted]  main
Entrypoint main = main.js
[1] ./src/index.js 257 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module
```

warningが出るが、今は無視してOK。

webpackがインストールされ、main.jsが作成されentorypointとして設定される。

dist/index.htmlを開くと「Hello webpack」が表示されればOK。


・`npx`
npmにインストールしてあるパッケージを設定なしで実行できるコマンド。


<br>
##configファイルの作成
ファイルを作成し、内容を記述。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/d9dbd938-f31b-3ef7-82b7-8474f9e12964.png)


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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
```


<br>
##configファイルの読み込み。
npx webpackを使ってconfigファイルを読み込む。

```
npx webpack --config webpack.config.js
```

`--config　ファイル名`でconfigファイルを指定する。



<br>
##ショートカットコマンドの作成
package.jsonにショートカットコマンドを登録する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/66342678-2c23-cd1d-1eb6-dedcffea9c86.png)

これで、`npm run build`を実行するとwebpackを実行する`npx webpack`と同じ処理になる。

npm run buildの記述の方が一般的なため、他のユーザーにとっても使いやすい。



<br>
##エイリアスの確認

```
npm run build 

Version: webpack 4.44.2
Time: 198ms
Built at: 2020-10-05 20:33:42
  Asset      Size  Chunks             Chunk Names
main.js  72.3 KiB       0  [emitted]  main
Entrypoint main = main.js
[1] ./src/index.js 257 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module
```

npx webpackと同様に実行できればOK。