この辺が曖昧だったので、書き残しておきます。
- ビルドとは何か
- なぜビルドが必要か
- ビルドでは何を行なっているのか
- ビルドしたらどうなるのか
Node.jsの特徴
- JavaScriptをサーバーサイドで動かすための実行環境。
- モジュール機能（他ファイルの読み込み）
- ノンブロッキングI/Oで処理を効率化
参考記事
ノンブロッキングI/O (non-blocking I/O)
ノンブロッキングI/Oと非同期I/Oの違いを理解する
Node.js を5分で大雑把に理解する
Node.jsについて調べてみた
JavaScriptが辿った変遷
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう
ビルドツール
Node.jsスタイルのコードは、そのままの状態ではブラウザで動きません。ソースコードを元にして、実際に動くプログラム（実行可能ファイル）を作ってあげる必要があります。
その作成処理のことをビルドと言います。
ビルドを実行するためには、ビルドツールを使用します。
概要
以下、10年遅れたJavaScriptの知識をざっくり10分でアップデートしようより引用。
最近のWebアプリケーションは、開発時のコードと実際の製品に使われるコードが異なります。開発者はブラウザーにサポートされていない可能性がある最新バージョンのJavaScriptでコードを書いたり、node_modulesフォルダー内のサードパーティ製パッケージとその依存オブジェクトを多用したり、静的解析ツールや圧縮ツール（Minifier）などを使ったりして開発します。これらをすべて変換、効果的にデプロイして、大半のWebブラウザーが理解できる形にするのがビルドツールです。
何を行うのか
以下、キャッチアップJavaScriptビルドより引用。
- モジュール管理（依存性解決）
- テンプレート管理
- UT/操作テスト
- 構文チェック
- 圧縮/難読化
- CSSプリプロセッサー
- ES2015コンパイル
- altJSコンパイル
簡単に補足します。
- CSSプリプロセッサーとは、独自の構文でCSSを生成するプログラムのこと。コンパイルにより、純粋なCSSより可読性や保守性が高くなります。
- ES2015（ES6）はJavaScriptの新基準ですが、古いブラウザでは対応していない場合があります。そのため、コンパイルで互換性のあるES5に変換します。（トランスパイル）
- altJSとは、コンパイルによりJavaScriptに変換されるプログラミング言語のこと（代替JavaScript）。従来のJavaScriptより可読性と保守性が高く、コーディングの負担を減らします。
テンプレート管理が何を意味しているのか、よくわからなかったです。
文字列の組み込みのことでしょうか・・・？
タスクランナーとは
ビルドツールで行われている処理（タスク）を自動化してくれるツールのこと。
grupやGruntが挙げられます。
ネットで調べた限り、ビルドツールとタスクランナーの区分は曖昧でした。
webpackの立ち位置が微妙なところです。
npmとは
Node.jsのパッケージ管理ツール。
Node.jsと同時にインストールされます。
各種ビルドツールは、npmを使ってインストールすることができます。
今回は、webpackを使ってみます。
参考記事
CSS プリプロセッサー
CSSプリプロセッサ（CSSメタ言語）のお勉強
最近のビルドツールって何なの？
タスクランナー(Gulp)の入門の入門
【保存版】gulp, webpack, parcel...増え続けるタスクランナーの特徴を理解して最適なものを選択しよう
JavaScriptをやっているとnpm/yarn/gulp/grunt/webpackなど、たくさんのツールがあって混乱したので、それぞれの役割と違いをざっくりとまとめた
プログラミングが便利に！2018年に取り入れたいオススメのタスクランナー5選
Webpackってどんなもの？
実演
初期化
テスト用ディレクトリを作成し、移動します。
$ mkdir js_test
$ cd js_test
初期化します。
いくつか質問がありますが、全てEnterで大丈夫です。
$ npm init
初期化後、ディレクトリ内にpackage.jsonが生成されます。
webpackのインストール
webpackをローカルインストールします。
$ npm install webpack --save-dev
ディレクトリ直下にpackage-lock.jsonとnode_modulesディレクトリが生成されます。
webpackのバージョンを確認します。
$ npx webpack -v
4.39.1
このバージョンでは、webpack-cliというライブラリも必要になります。
webpackと同じく、ローカルインストールします。
$ npm install --save-dev webpack-cli
インストール後、package.jsonのdevDependenciesに追記されました。
{
"name": "js_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
}
}
webpackの設定
ビルドするためには、元のソースコードの場所とビルド後に生成される実行ファイル（bundleファイル）についての情報が必要です。
元のソースコードで一番最初に読み込まれるファイルは、エントリ-ポイントと呼ばれます。
ディレクトリ直下に設定ファイルwebpack.config.jsを作成します。
$ touch webpack.config.js
次のように設定します。
const path = require('path');
module.exports = {
// エントリーポイントの設定
entry: './src/my-main.js',
// ビルド後、'./dist/my-bundle.js'というbundleファイルを生成する
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-bundle.js'
}
};
テストファイルの作成
テストファイルを作成します。
文字列を返すメソッドを記述し、それをモジュールとして別ファイルで読み込んで出力します。
$ touch my-index.html
$ mkdir src
$ mkdir dist
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="dist/my-bundle.js" charset="utf-8"></script>
</body>
</html>
$ cd src
$ touch my-main.js
$ touch my-func.js
var func = require('./my-func');
var res = document.createTextNode(func());
document.body.appendChild(res);
module.exports = function () {
return 'my-test';
};
エイリアスコマンドの設定
webpackコマンドを簡単に実行するために、エイリアスコマンドを設定します。
package.jsonのscriptに以下を記述します。
"build": "webpack --mode development"
もしくは
"build": "webpack --mode production"
modeにより、生成されるbundleファイルの内容が異なります。（動作は同じです。）
modeを指定しない場合は、ビルド実行時に警告が発生します。
この設定によりnpm run build でビルドを実行する事が可能になりました。
ビルド実行
エイリアスコマンドを設定したので、早速実行してみます。
$ npm run build
実行後、bundleファイルであるdist/my-bundle.jsが生成されます。
ブラウザで出力した文字列を確認できれば、ビルド成功です。
ビルドせずに動作を確認したい
ビルドせずに動作を確認したい場合は、watchオプションを利用します。
package.jsonのscriptに以下を記述します。
"watch": "webpack --watch"
npm run watchを実行すると、コードの変更が検知されるようになります。そのため、（画面をリロードすれば）ビルドせずに動作を確認する事ができます。
デベロッパーツール上で元のファイルを確認したい
デベロッパーツールのSourcesタブでは、ビルド元のファイルを確認する事ができません。
それらを表示させたい場合は、webpack.config.jsに以下を記述します。
devtool: 'inline-source-map'
これで、デベロッパーツール上でmy-main.jsとmy-main.jsの内容を確認する事ができます。
参考記事
package.jsonの中身を理解する
package-lock.jsonについて知りたくても聞けなかったこと
勉強メモ/npmの使い方(node.js=v0.11.16, npm=2.3.0, 2015-03時点)
npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう
webpack.config.jsがわからない
npmとwebpack4でビルド - jQueryからの次のステップ
step by stepで始めるwebpack
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(Git/Node.js/ES6/webpack4/Babel7)
React.jsでビルドされる前のコードをブラウザで確認する