< 追記 >
個人的なことですが、この記事のおかげで痛い目を見ました。
あとから見返したときに思い出に浸るための追記です。(2019/05/28)

はじめに

こんにちは。
最近、ロードマップのパッケージマネージャを進めているTakuyaHanadaです。
パッケージマネージャを勉強する際、簡単なサンプルを見つけることができず苦労しました。
そこで、誰かの役に立てばと思い、私がつくったものをご紹介します。
間違いなどがあればご指摘していただけると幸いです。

今回、パッケージマネージャを使ってつくるものはこちら

サンプルコード

yarn-sample - GitHub

私が進めているロードマップ

では、さっそくつくっていきましょう！

事前知識

HTML
CSS
JavaScript
jQuery（知らなくてもOK）
ターミナルの操作

環境

MacOS Mojave 10.14.5
Homebrew 2.1.3
Yarn 1.16.0

手順

0. 今回使うもの

Yarn
Webpack
jQuery

1. Yarnを使って準備をする

Yarnと同じようなものにnpmというものもありますが、公式によるとYarnの方が「はやい」「安全」「信頼できる」そうなので、Yarnを使います。
Yarn - 公式サイト

以下は、手順です。

yarn initコマンドで新しいプロジェクトを作成します。Enterを連打してすべてデフォルトのままにします。

(1-1)ターミナル

$ yarn init

yarn init v1.16.0
question name (yarn-sample):  # Enter
question version (1.0.0):  # Enter
question description:  # Enter
question entry point (index.js):  # Enter
question repository url:  # Enter
question author:  # Enter
question license (MIT):  # Enter
question private:  # Enter
success Saved package.json
✨  Done in 9.46s.

jQueryをインストールします。
(1-2)ターミナル
```
$ yarn add jquery
```

2. Webpackを使ってまとめる

パッケージをインストールしたし、あとはHTML, CSS, JavaScriptを書けば終わりかと思いきや、このままでは動きません。

そこで、登場するのがモジュールバンドラーというものです。
調べてみると、JavaScriptやCSS、画像などのファイルを1つにまとめてくれるものだそうです。
今回、「なんか見たことある」という理由で、Webpackというモジュールバンドラーを使います。
Webpackってどんなもの？ - Qiita
webpack 4 入門 - Qiita

以下は、手順です。

まず、Webpackをインストールします。
オプション-Dについては公式に説明がありました。
jQueryのようにコードを実行する際に必要なものはオプションをつけず、Webpackのように開発する際に必要なものは-Dオプションをつけるものだそうです。
yarn add - Yarn
依存関係の種類 - Yarn
(2-1)ターミナル
```
$ yarn add webpack webpack-cli -D
```
Webpackでは、まとめたいファイルをsrcディレクトリに入れます。1つにまとめたファイルはdistディレクトリに出力してくれます。
というわけで、src, distディレクトリを作成します。作成後のディレクトリ構成は以下の通り。
(2-2)ディレクトリ構成
```
.
├── node_modules/
├── package.json
├── dist/  # 新しく作成
├── src/  # 新しく作成
└── yarn.lock
```

distディレクトリにindex.htmlを作成します。

(2-3)dist/index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Yarn Sample</title>
    <style>
      #msg {
        display: none;
      }
    </style>
  </head>

  <body>
    <button id="btn">
      Click Me!
    </button>
    <h1 id="msg">
      Hello World!
    </h1>

    <script src="main.js"></script>
  </body>
</html>

srcディレクトリにindex.jsを作成します。

(2-4)src/index.js

const $ = require('jquery');  // jQueryを読み込む

$(function() {
  $('#btn').click(function() {  // ボタンがクリックされたとき、
    $('#msg').slideDown();  // メッセージが出てくる
  });
});

Webpackでバンドルします（まとめます）。
package.jsonにscriptsを書き加えます。

(2-5)package.json

{
  "name": "yarn-sample",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "jquery": "^3.4.1"
  },
  "devDependencies": {
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  },
----------追加----------
  "scripts": {
    "build": "webpack --mode development"
  }
------------------------
}

あとは、yarn run build を実行すれば、distにmain.jsが生成されます。
（さっき、scriptsに書いたwebpackが実行される）

(2-6-1)ターミナル

$ yarn run build

(2-6-2)ディレクトリ構成

.
├── node_modules/
├── package.json
├── dist
│   ├── index.html
│   └── main.js  # <--　生成された main.js
├── src/
└── yarn.lock

index.htmlをブラウザで開いてみましょう！
jQueryで書いた動作をしたらOKです。

おわりに

Webpackに関しては完全初心者でしたが、1日ちょいで学んだことをまとめてみました。

パッケージマネージャ、Webpackを触ってみたい人に役立つかなと思い記事を書いていましたが、この記事の上位互換のようなものがありました(笑)
npmとwebpack4でビルド - jQueryからの次のステップ - Qiita

心が折れそうになりましたが、せっかく途中まで書いたので書ききりました。
参考になってくれれば幸いです。

2019年のフロントエンドエンジニアへの道のり〜パッケージマネージャ編〜