webpackとは何か〜公式ドキュメントを読むメモ

## 当該記事の目的

webpackを使っているが、特に何をしているか気にすることがほぼないので、
公式ドキュメント(English/中文)のコアコンセプトを読んでみました。
[(English)webpack concept](https://webpack.js.org/concepts/)
[(中文)webpack概念](https://webpack.docschina.org/concepts/)
これはそのメモです。
現時点(2021/05)でwebpackのバージョンは5です。

## 参照
[webpack公式サイト](https://webpack.js.org/)
![スクリーンショット 2021-05-14 21.13.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336049/35d3e005-5940-6845-ad9c-18c999f1dc96.png)

- この図がとてもわかり易い
- つまり依存関係の解決

[納得するための、なぜフロントエンド開発でwebpackなどを用いた複雑なJavaScript開発環境を作るのか](https://crudzoo.com/blog/js-dev)
- webpackを含めて、なぜそれらのツールを使うのか、につての非常に有用な記事です。
- 読むことをおすすめします。

## webpackの公式サイトの単語メモ

|日本語|英語|中国語|
|:---:|:---:|:---:|
|スタート|Get Started |<ruby>快速开始<rp>（</rp><rt>kuàisù kāishǐ</rt><rp>）</rp></ruby>|
|コーディングする|Write Your Cod|<ruby>编写代码<rp>（</rp><rt>biānxiě dàimǎ</rt><rp>）</rp></ruby><br>※打程序でも通じるがスラングに近い|
|バンドルする(束ねる)|Bundle It|<ruby>构建<rp>（</rp><rt>gòujiàn</rt><rp>）</rp></ruby>|
|基本的な設定|Basic Setup|<ruby>基本安装<rp>（</rp><rt>jīběn ānzhuāng</rt><rp>）</rp></ruby>|
|バンドルの生成|Creating a Bundle|<ruby>创建一个<rp>（</rp><rt>chuàngjiàn yīgè</rt><rp>）</rp></ruby>bundle|
|モジュール|Modules|<ruby>模块<rp>（</rp><rt>mókuài</rt><rp>）</rp></ruby>|
|スタティック、静的|static|<ruby>静态<rp>（</rp><rt>jìngtài</rt><rp>）</rp></ruby>|
|設定ファイル、コンフィグ|configuration file |<ruby>配置文件<rp>（</rp><rt>pèizhì wénjiàn</rt><rp>）</rp></ruby>|
|アウトプット|Output|<ruby>输出<rp>（</rp><rt>shūchū</rt><rp>）</rp></ruby>|
|ローダー|Loaders|<ruby>-<rp>（</rp><rt></rt><rp>）</rp></ruby>|
|プラグイン|Plugins|<ruby>插件<rp>（</rp><rt>chājiàn</rt><rp>）</rp></ruby>|
|モード|Mode|<ruby>模式<rp>（</rp><rt>móshì</rt><rp>）</rp></ruby>|
|ブラウザの互換性|Browser Compatibility|<ruby>浏览器兼容性<rp>（</rp><rt>liúlǎn qì jiānróng xìng</rt><rp>）</rp></ruby>|
|依存|dependency graph|<ruby>依赖图<rp>（</rp><rt>yīlài tú</rt><rp>）</rp></ruby>|
|エントリーポイント|entry point|<ruby>入口起点<rp>（</rp><rt>rùkǒu qǐdiǎn</rt><rp>）</rp></ruby>|
|ライブラリ|libraries|<ruby>库<rp>（</rp><rt>kù</rt><rp>）</rp></ruby>|
|デフォルト値|default|<ruby>默认值<rp>（</rp><rt>mòrèn zhí</rt><rp>）</rp></ruby>|
|環境変数|environment variables|<ruby>环境变量<rp>（</rp><rt>huánjìng biànliàng</rt><rp>）</rp></ruby>|


## webpackとは

[webpack concept](https://webpack.js.org/concepts/)
>(English)At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

[webpack概念](https://webpack.docschina.org/concepts/)
>(中文)本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

適当な日本語訳
webpackとはモダンJavascriptアプリケーションにおける静的モジュールバンドラーである。
webpackがアプリを処理するとき、webpackは内部的に依存関係図(dependency graph)を作成します。
これはプロジェクト内で必要とされるすべてのモジュールをマッピングし、また1つ或いは複数のバンドルを生成します。




## 基本的な考え方

### 設定ファイルは不要

- v4以降は設定ファイルなしで動く
- 引き続き高度な設定をしたい場合は設定ファイルを編集できる



### エントリーポイント
- デフォルトは ```./src/index.js```
- webpack.config.jsに設定したい場合
    - entry属性

### アウトプット
- デフォルト
    - メインのアウトプットファイル``` ./dist/main.js ```
    - その他のファイルは ``` ./dist```フォルダに出力される
- webpack.config.jsに設定したい場合
    - output属性


### ローダー
- webpackはJavascriptかJSONしか読めない
- ローダーを使用することで
    - その他のタイプのファイルも読み込める
    - 有効なモジュールに変換できる
- webpack.config.jsに設定したい場合
    - test属性→変換したい対象ファイルの情報
    - use属性→使用するローダー

### プラグイン
- やっていること
    - バンドルの最適化
    - アセットマネジメント
    - 環境変数の挿入
- webpack.config.js
    - require()で使用するプラグインのインポート
    - plugins属性に設定

### モード
- 種類
    - development
    - production ※デフォルト
    - none
- webpack.config.jsに設定したい場合
    - mode属性
  
### ブラウザの互換性
- webpackは[ES5標準](https://kangax.github.io/compat-table/es5/)を前提としている
    - 世の中に各種ブラウザがありますがほとんどのブラウザがES5標準の機能は動くようになっている
- それに対応していないブラウザを使用する場合は別途対応が必要

### 環境
- webpack5はNode.jsは```version 10.13.0+.```以降で実行可能


## webpackを使わない場合どうなるのか

[Getting Started](https://webpack.js.org/guides/getting-started/)に記載されている内容になります

### webpackなしの場合

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

  // Lodash、下記のコードを動かすために必要で、このコードではHTML上でscriptタグ経由で導入している
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

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

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script> //この行がないと動かない
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>
```

### webpackありの場合

※webpackを実行し、```./dist/main.js```が生成されている

```javascript:src/index.js
import _ from 'lodash'; //追加した行

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

  // Lodash,webpackありの場合は1行目のimportで導入される
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   return element;
 }

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

```html:index.html
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>Getting Started</title>
   </head>
   <body>
    <script src="main.js"></script> //生成されたmain.jsを導入するだけ
   </body>
 </html>
```

webpackを使うことで、自分で書いたindex.jsすら導入する必要はなく、
webpackを実行した後に生成されたmain.jsのみを導入するだけで良い。

## どうでもいいこと
英語版と中国語版の両方をよみながらまとめました。
基本的に両方の言語で同じ事が書かれていました。
且つ、機械翻訳ではないと思います。
~~サンプルコード内のコメントもしっかり中国語訳されているので、
これはコミッターの中に中国語ネイティブの方がいるのかな、と思いました。~~
中国語翻訳者のコミッターがいらっしゃる、という記述がページ下部に記載されているのに気づきました。