Help us understand the problem. What is going on with this article?

【JavaScript】ビルドとは何か〜webpackを使ってビルドする

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

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

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

yukibe
2018年8月よりWebエンジニア。主にPHP。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした