Fukusanの日記らしきもの

なんとも言えない感じで更新したり、しなかったりするブログです

Webpack使ってみた

はじめに

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

adventar.org


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

本題

Webpackとは?

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

ただし、その他にも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
  1. まずはnpm init

    ターミナル

    $ npm init

    聞かれる質問にはとりあえず適当に答える。

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

  2. Webpackをインストールする

    ターミナル

    $ npm install webpack -D -save

    -D -save とは
    package.jsonにwebpackを開発用のモジュールとしてインストールしたことを記録する。という意味

  3. 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'は出力したファイルのソースマップを出力する設定(デバッグの時便利)
  4. 使うライブラリーを読み込んでおく

    ターミナル

    $ npm install jquery -save


    今回はとりあえずjQueryを読み込んでみる。

  5. 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を定義している。

  6. 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くんです。

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