webpack4の導入方法（1） | IT工房

webpackとは
webpack4の導入方法
webpack-devサーバーの導入
1. devサーバーのインストール

webpackとは

webpackとはWebアプリを構成するリソースファイルをひとまとめにしてくれるものです。
例えば、複数のJavaScriptファイルだったり、CSSファイルもそうです。あるいは画像ファイルだったりします。
これらのファイルを全部1つのJavaScriptにまとめてしまうものです。
このような仕組みをモジュールバンドラーといいます。フロントエンドの世界では欠かせない存在になっています。
Reactを使う場合などは必需品と言っても良いでしょう。

モジュラーバンドラーの最大のメリットは複数に別れたJavaScriptの依存関係を解決してくれることです。
HTMLファイルから1つのJavaScriptを読み込むだけですので、リクエスト回数を減らすことができます。これは表示速度に大きく影響してきます。

webpack4の導入方法

Macでのターミナルを使用した導入の説明です。webpackのバージョンは4系です。

Node.jsとHomebrewがインストールされていることが前提です。
Node.jsの導入方法は、バージョン管理付きNode.jsの導入方法〜Mac用を参照ください。
サンプルのソースコードの詳細はGitHubに置いているコードを参考にしてください。

新規プロジェクトの作成

新規でプロジェクトフォルダを作成して、コマンド「cd」でカレントディレクトリを作成したプロジェクトフォルダに移動します。
その後、プロジェクトフォルダにpackage.jsonを作成します。コマンドは次の通りです。

npm init

package.jsonに記述する内容の確認が色々ありますが、package.jsonの内容は後ほどエディタで変更できますので、
全て「return」でOKです。
以上の操作で「package.json」ができます。

必要なパッケージをインストール

最新のwebpackと,webpack-cliのインストールをまとめて行います。

npm install --save-dev webpack webpack-cli

package.jsonに以下の記述が追加されています。バージョン番号はインストール時の最新バージョン[4.16.1](2018/7現在)

"devDependencies": {
  "webpack": "^4.16.1",
  "webpack-cli": "^3.1.0"
}

これでプロジェクトフォルダ内にnode_modulesフォルダができます。node_modulesフォルダには様々なファイルが格納されています。

Git管理する場合はnode_modulesフォルダを、「.gitignore」ファイルに登録してgit管理から外しておいた方が良いでしょう。

プロジェクトで使用するフォルダとリソースを用意

「distフォルダ」と「srcフォルダ」を作成します。「src」が原料置き場で「dist」が完成品置き場のようなイメージです。

「distフォルダ」にはデプロイするファイルが生成されて入ります。事前にindex.htmlを用意しておきます。
index.htmlにはwebpackで自動生成されるmain.jsファイルを読み込むscriptタグの記述をしておきます。

index.htmlコード
```
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>webpack sample</title>
</head>
<body>
	<h1>webpack sample</h1>
	<script src="main.js"></script>
</body>
</html>
```
「srcフォルダ」にはwebpackでバンドルするためのリソースを用意します。
今回は「myval.js」で定数を宣言しておいて「index.js」で読み込でconsole.log表示させるだけのシンプルな内容のものを用意しました。

myval.js
```
export const NAME = "Tahara";
```
index.js
```
import {NAME} from './myval.js';
console.log(NAME);
```
webpackの既定では「srcフォルダ」の「index.js」がエントリーポイントであり、バンドル結果は「distフォルダ」に「main.js」ファイルとして生成されます。

webpackの実行

ここまでの設定で webpackの実行は次のコマンドです。
```
 npx webpack
```

＊ここでWARNING（警告）がでます。
「WARNING in configurationThe ‘mode’ option has not been set,〜」
オプションとしてmodeを指定しろというものですが、この警告は今のところ気にしないでも良いです。どうしても気になる場合は次のようにします。

npx webpack --mode=development

「main.js」が「distフォルダ」に生成されたら「index.html」をブラウザの検証からconsole.logの確認をします。
名前が表示されたらうまくいきました。

webpack.config.js作成

もし、webpack既定の設定を変更したい場合は「webpack.config.js」ファイルを作成します。
このサンプルは既定の設定と同一の内容です。

「webpack.config.js」ファイルの例

module.exports = {
	entry:'./src/index.js',
	output:{
		path:`${__dirname}/dist`,
		filename:'main.js'
	},
}

「webpack.config.js」ファイルに従ってwebpackを起動するには次のコマンドを入力します。なお、—-watchオプションは編集を行って保存すると再コンパイルされます。

npx webpack --watch --config webpack.config.js

毎回長いコマンドを入力するのは面倒なので、package.jsonに次の記述を追加します。

"scripts":{
	"build":"webpack --watch --config webpack.config.js"	
},

ここまでの設定で起動するには次のコマンドです。

npm run build

webpack-devサーバーの導入

webpack-devサーバーはwebpackと連動して動作する開発サーバーです。
devサーバーを導入するとコード変更をすると自動でビルドされてブラウザで確認できるようになります。

devサーバーのインストール

 npm install --save-dev webpack-dev-server

webpack.config.jsに以下を追加

devServer:{
    contentBase:'./dist'
},

devサーバーの起動を簡単にするためにpackage.jsonに「”start”:”webpack-dev-server –open”,」を追加します。

"scripts": {
    "start":"webpack-dev-server --open",
    "build": "webpack --watch --config webpack.config.js"
  },

devサーバー起動のコマンドは次の通りです。
ブラウザが自動で開きます。

npm start

アドレスは「http://locahost:8080」です。

今後webpackで開発する場合は全て「npm start」で開始するようになります。

devサーバーの終了のショートカットキーは「control+c」です。