当該記事の目的
webpackを使っているが、特に何をしているか気にすることがほぼないので、
公式ドキュメント(English/中文)のコアコンセプトを読んでみました。
(English)webpack concept
(中文)webpack概念
これはそのメモです。
現時点(2021/05)でwebpackのバージョンは5です。
参照
- この図がとてもわかり易い
- つまり依存関係の解決
納得するための、なぜフロントエンド開発でwebpackなどを用いた複雑なJavaScript開発環境を作るのか
- webpackを含めて、なぜそれらのツールを使うのか、につての非常に有用な記事です。
- 読むことをおすすめします。
webpackの公式サイトの単語メモ
| 日本語 | 英語 | 中国語 |
|---|---|---|
| スタート | Get Started | 快速开始 |
| コーディングする | Write Your Cod |
编写代码 ※打程序でも通じるがスラングに近い |
| バンドルする(束ねる) | Bundle It | 构建 |
| 基本的な設定 | Basic Setup | 基本安装 |
| バンドルの生成 | Creating a Bundle | 创建一个bundle |
| モジュール | Modules | 模块 |
| スタティック、静的 | static | 静态 |
| 設定ファイル、コンフィグ | configuration file | 配置文件 |
| アウトプット | Output | 输出 |
| ローダー | Loaders | - |
| プラグイン | Plugins | 插件 |
| モード | Mode | 模式 |
| ブラウザの互換性 | Browser Compatibility | 浏览器兼容性 |
| 依存 | dependency graph | 依赖图 |
| エントリーポイント | entry point | 入口起点 |
| ライブラリ | libraries | 库 |
| デフォルト値 | default | 默认值 |
| 環境変数 | environment variables | 环境变量 |
webpackとは
(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 是一个用于现代 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標準を前提としている
- 世の中に各種ブラウザがありますがほとんどのブラウザがES5標準の機能は動くようになっている
- それに対応していないブラウザを使用する場合は別途対応が必要
環境
- webpack5はNode.jsは
version 10.13.0+.以降で実行可能
webpackを使わない場合どうなるのか
Getting Startedに記載されている内容になります
webpackなしの場合
function component() {
const element = document.createElement('div');
// Lodash、下記のコードを動かすために必要で、このコードではHTML上でscriptタグ経由で導入している
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
<!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が生成されている
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());
<!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のみを導入するだけで良い。
どうでもいいこと
英語版と中国語版の両方をよみながらまとめました。
基本的に両方の言語で同じ事が書かれていました。
且つ、機械翻訳ではないと思います。
サンプルコード内のコメントもしっかり中国語訳されているので、
これはコミッターの中に中国語ネイティブの方がいるのかな、と思いました。
中国語翻訳者のコミッターがいらっしゃる、という記述がページ下部に記載されているのに気づきました。