webpackをかんたんに使う（Zero Configulation）

[5年前の記事](https://qiita.com/hashrock/items/15f4a4961183cfbb2658)のメンテを行っていたんですが、流石にBrowserifyは実務で使う可能性は低いよなあとは思います。
Browserifyの単純さも初心者にはとっつきやすいのですが、今の主流はwebpackです。
webpack入門記事はたくさんあるはずですが、設定ファイルの各パラメータの羅列だったり、BabelやReact, TypeScriptの設定まで一気に済ませてしまうような記事は初心者には難しいかもしれないですね。

というわけで、Node.jsは３日前にはじめました、みたいな人向けに書いてみようと思います。

# 初心者なのでwebpackだけを使ってみたいんだけど

今どきだと初心者はReactならcreate-react-app、VueならVue CLIを使って入門するんじゃないかと思います。これらはwebpackの設定を代わりに済ませてくれる便利なツールで、難しいことを知らなくて済みます。

ただ、何も理解しないままにWebアプリが作れてしまうので、一つ一つ理解していきたいタイプの人には気持ちが悪いかもしれません。

というわけで、webpackのみを使ってWebアプリを作ってみましょう。

# プロジェクトを作成

下記のコマンドを実行してpackage.jsonを作ります。

```
npm init -y
```

次にnode_modules下にwebpackと開発ツールをインストールします。

```
npm install -D webpack webpack-cli@3.3.12 webpack-dev-server
```

その結果、下記のようなpackage.jsonが生成されます。

```json
{
  "name": "your-folder",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}
```

# ソースコードを配置する

下記の2ファイルを作成してください。

* dist/index.html
* src/index.js


```js
//index.js
document.write("Hello, webpack")
```

```html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
</head>
<body>
    <script src="main.js"></script>
</body>
</html>
```

結果、下記のようなフォルダ構成になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32596/7f7aff42-bf88-94e5-9c49-f0da75da637c.png)

webpackを動かすには色々設定が必要ですが、無設定の場合は`src/index.js`が入り口になります。`dist`はwebpackが処理した後のjsファイルが出力されます。上記のフォルダ構成にしておけば無設定でも動かせるわけです。


# npm-scriptsを追加

開発は`npm run dev`、ビルドは`npm run build`で行えるようにしましょう。package.json内にwebpackの実行時に渡すオプションを直書きしていきます。

`package.json`の`scripts`にbuild, devの２行を追加します。

```
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=production",
    "dev": "webpack-dev-server --hot --open --content-base dist/"
  },
```


# 実行してみる

下記のコマンドを実行してみましょう。

```
npm run dev
```

ブラウザが開いて`Hello, webpack`が表示されればOKです。

# npmのライブラリを使ってみる

今回は日時処理ライブラリ`date-fns`を使ってみましょう。
下記のコマンドを実行してください。

```
npm install -D date-fns
```

次に、index.jsの内容を下記のように書き換えてください。

```
//index.js
const dateFns = require("date-fns")
const ja = require("date-fns/locale/ja")

document.write(dateFns.format(new Date(), "'今日は' MMM do iiii", {locale: ja.default}))
```

その後、`npm run dev`をもう一度実行してみてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32596/79cfc890-bf46-0008-99df-549b582fbd91.png)

こんな表示になりましたでしょうか。

# webpackはjsを張り合わせる糊

webpackにはいろんな機能がありますが、一番基本的な機能はjsの結合処理です。今回の場合は`index.js`と`date-fns`ライブラリが張り合わせられて、一本のjsファイルにまとめられています。

`npm run build`を実行後、`dist/main.js`を開くと、結合されたjsファイルを見ることができます。
※`npm run dev`実行時には`main.js`は出力されません。これは`webpack-dev-server`というツールの機能で、ブラウザからはmain.jsがあるように見える状態になっています。

webpackが何をしているのか、詳細を知りたい方は下記記事がおすすめです。

https://mizchi.hatenablog.com/entry/2018/11/26/164523

# 終わりに

この状態ではかなりできることが限られていて、例えばReactのJSXファイルやVue SFC, TypeScriptファイル等を読ませてもエラーになります。
BabelやTypeScriptの設定に進みたい方は下記記事を参考にしてください。

https://qiita.com/clockmaker/items/8620cf6bd99d810dbf2a

あるいは、ここまでで概要を把握できたら、もうcreate-react-appやVue CLIを使っても良いでしょう。
個人的にはParcelをよく使っていて、今後はviteに移行する予定です。