Webpack使ってみた - Fukusanの日記らしきもの

はじめに

この記事は、Prolab Advent Calendar 2017の12日目の記事として書かれています。

adventar.org

それから、今回の記事の内容に間違いなどが在りましたら、(出来るなら優しく)教えてもらえると幸いです。

本題

Webpackとは？

主にJavaScriptを１つのファイルにまとめるやつ。(個人的見解)

ただし、その他にもSassをcssに変換したりAltJSをトランスパイルしたりなど

様々な機能がある。

Webpack使うと何がいいの？

JavaScriptのファイルが1つにまとめられるのでページが表示されるまでにサーバーとの間で行われる通信の回数が少なくなる。
npmで落としたライブラリーやフレームワークを利用できる。
コーディング中の手間が減る。(webpack-dev-server)

使い方

今回はnpmで落としたライブラリーを利用する、複数ファイルに分けたコードを

1つのファイルにまとめるところまでを説明してみます。

※Node.jsの環境が整っていることを前提に書きます。

ファイル構成(npm init 後)

自分で作っているのはsrc以下とindex.html、webpack.config.jsです。

.
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── bundle.js
│   └── index.html
├── src
│   ├── main.js
│   └── modules
│       └── sub.js
└── webpack.config.js

まずはnpm init

ターミナル
```
$ npm init
```
聞かれる質問にはとりあえず適当に答える。

(-yというオプションをつければ全部エンターを押した場合の挙動になる)
Webpackをインストールする

ターミナル
```
$ npm install webpack -D -save
```
-D -save とは
package.jsonにwebpackを開発用のモジュールとしてインストールしたことを記録する。という意味
Webpackの設定をする
JavaScript(webpack.config.js)
```
const path = require('path');
module.exports = {
	entry: './src/main.js',
	output:{
		filename: 'bundle.js',
		path: path.join(__dirname, '/public')
	},
	devtool: 'inline-source-map'
};
```
entryにはWebpackが解析を始める最初のファイル(./src/main.js)、
output.filenameには出力するファイル名(bundle.js)、
output.pathには出力先のディレクトリを指定する。
devtool: 'inline-sorce-map'は出力したファイルのソースマップを出力する設定(デバッグの時便利)
使うライブラリーを読み込んでおく

ターミナル
```
$ npm install jquery -save
```
今回はとりあえずjQueryを読み込んでみる。
main.js,sub.jsを記述する

JavaScript(main.js)
```
const $ = require('jquery');
const Sub = require('./modules/sub.js');
$('#output').text(Sub.add(1, 2));
```
JavaScript(sub.js)
```
module.exports = {
	add: (a, b)=> a + b
};
```
main.jsではjquery、sub.jsを読み込み利用している。
sub.jsでは足し算をする関数addを定義している。
Webpackでmain.js,sub.js,jqueryをまとめたbundle.jsを作る

ターミナル
```
$ ./node_modules/.bin/webpack
```
Pathを通したりしてないのでちょっと力ずく
(package.jsonのscriptsにコマンドを書いておけば短いコマンドでよくなるのでとりあえずこれでいいことにする(あんまりよくない))

このコマンドを打つと、./publicにbundle.jsが作られる。
htmlでbundle.jsを読み込むと#outputのタグに3と表示される。

お疲れ様でした。

おまけ

npmでwebpack-dev-serverというモジュールをインストールして

ターミナル

$ npm install webpack-dev-server -D -save

以下のようにwebpack.config.jsを変更すると

const path = require('path');
module.exports = {
	entry: './src/main.js',
	output:{
		filename: 'bundle.js',
		path: path.join(__dirname, '/public')
	},
	devtool: 'inline-source-map',
	devServer : {
		port : 3000,
		contentBase: path.join(__dirname, 'public'),
	},
};

ターミナルで

$ ./node_modules/.bin/webpack-dev-server --inline --hot

というコマンドを打つことで開発用のサーバーが起動して

localhost:3000でhtmlを開くことが出来ます。

また、この状態ではファイルを保存するたびにwebpackでの処理が必要な箇所にのみ実行され、ブラウザがリロードされます。

(保存した後色々コマンドを打ったりブラウザをリロードしたりする手間が省けて便利)

まとめ

ダラダラ書いていたら0時に遅刻してしまいました(謝罪)。

あまりうまい説明ではないですが、Webpackをこれから使ってみようと思う人の

手助けになれば幸いです。

さて、明日(今日)のアドカレ担当はdenchu4491くんです。

どんな記事を書いてくれるか楽しみですね。

はじめに

本題

Webpackとは？

Webpack使うと何がいいの？

使い方

まずはnpm init

Webpackをインストールする

Webpackの設定をする

使うライブラリーを読み込んでおく

main.js,sub.jsを記述する

Webpackでmain.js,sub.js,jqueryをまとめたbundle.jsを作る

おまけ

まとめ