この辺が曖昧だったので、書き残しておきます。

ビルドとは何か
なぜビルドが必要か
ビルドでは何を行なっているのか
ビルドしたらどうなるのか

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に追記されました。

package.json

{
  "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

次のように設定します。

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

my-index.html

<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

my-main.js

var func = require('./my-func');

var res = document.createTextNode(func());
document.body.appendChild(res);

my-func.js

module.exports = function () {
    return 'my-test';
};

エイリアスコマンドの設定

webpackコマンドを簡単に実行するために、エイリアスコマンドを設定します。
package.jsonのscriptに以下を記述します。

package.json

"build": "webpack --mode development"

もしくは

package.json

"build": "webpack --mode production"

modeにより、生成されるbundleファイルの内容が異なります。（動作は同じです。）
modeを指定しない場合は、ビルド実行時に警告が発生します。

この設定によりnpm run build でビルドを実行する事が可能になりました。

ビルド実行

エイリアスコマンドを設定したので、早速実行してみます。

$ npm run build

実行後、bundleファイルであるdist/my-bundle.jsが生成されます。
ブラウザで出力した文字列を確認できれば、ビルド成功です。

ビルドせずに動作を確認したい

ビルドせずに動作を確認したい場合は、watchオプションを利用します。
package.jsonのscriptに以下を記述します。

package.json

"watch": "webpack --watch"

npm run watchを実行すると、コードの変更が検知されるようになります。そのため、（画面をリロードすれば）ビルドせずに動作を確認する事ができます。

デベロッパーツール上で元のファイルを確認したい

デベロッパーツールのSourcesタブでは、ビルド元のファイルを確認する事ができません。

それらを表示させたい場合は、webpack.config.jsに以下を記述します。

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でビルドされる前のコードをブラウザで確認する