JavaScript
es6
webpack

webpack入門

最近、webpackというものが巷で流行っているとのことで自分も使ってみた。
webpackの基本的な使い方と使ってみての個人的な考察について書いていきたい。
間違っているところがあればご指摘お願いします。

webpackとは

webpackとはnode_moduleの一種。
基本的にjavascriptの複数あるファイルを一つにまとめるためのもの。
一つにまとめる過程でes6やreact等で書かれたjavascriptファイルをトランスパイルして
ブラウザで実行可能なjavascriptファイルへと変換する。
今回自分はes6のトランスパイルをメインにwebpackを使った。

使い方

npm init

特定のディレクトリに行き、

npm init

コマンドを実行し、package.jsonをデョレクトリに作成。
package.jsonはnode_moduleを管理したり、npmコマンドの設定ファイル。
json形式で書かれており、dependenciesやdevDependenciesに書かれたモジュールを、npm installコマンドで一括インストールしてくれる。

webpackインストール

#webpackのインストール
npm install webpack --save-dev

コマンドの実行で自分のプロジェクトにwebpackをインストールできる。
--save-devオプションをつけることでpackage.jsonにインストールしたモジュールをdevDependenciesに自動で追加記述してくれる。

babelのインストール

babelはes6をトランスパイルしてくれるモジュール。
以下のコマンドを実行。

#babel関連のモジュールのインストール
npm install babel-core babel-loader babel-preset-es2015 --save-dev

webpack.config.jsの作成

これを作ることによってwebpackコマンドを実行した際にこのファイルの内容に基づいて実行を行なってくれる。
こちらも基本json形式。

webpack.config.js
module.exports = {
  entry: './index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query:{
          presets:['es2015']
        }
      }
    ]
  }
};

entryとは他のjsファイルを参照しているmainのjsファイルを記述する。require文やimport文が記述されているファイルをここに書く。
outputはjsファイルを一つにまとめて出力するファイルについて記述する。今回は/dist/bundle.jsがwebpackコマンドを実行することによってできる。
moduleはwebpackで使うモジュールにつおての記述。
loaderは使用するloaderにについて記述する。今回はes6ファイルをトランスパイルしてくれるloader"babel-loader"を記述。
testは対象とするファイルについて記述する。 /.js$/と書くことで拡張子が.jsのファイルを対象にする。(おそらく)
excludeは除外するファイルについて記述。今回は/node_mopdules/以下のファイルを無視する。
queryはloaderに渡す引数を書く。今回はpresets:['es2015']と記述。

package.json中身

package.jsonは以下の通り。
"script"の欄に"build": "webpack"を記述する。
こうすることでnpm run buildとすることでwebpackが起動される。

package.json
{
  "name": "webpack_example",
  "version": "1.0.0",
  "description": "This is a exmple about webpack.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^3.5.4"
  }
}

ディレクトリ構成とjsの中身

/ 
  dist/
    -bundle.js
  src/
    -foo.js
  index.js
  index.html
  package.json
  webpack.config.js

今回のes6ファイルは/src/foo.jsとindex.js

それぞれ以下の通り。

src/foo.js
export const foo = 'Foo';
index.js
import {foo} from './src/foo'
console.log(foo);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./dist/bundle.js"></script>
</head>
<body>
<h1>es6 example</h1>
</body>
</html>

es6については今回は省略する。
/src/foo.jsでfoo変数をexport文で外部参照可能にし
index.jsのimport文で呼びしてconsoleに表示するという内容である。

webpack実行

ここでようやく準備ができたのでwebpackの実行を行う。

npm run build

の実行。
以下ログ。

> webpack_example@1.0.0 build /Applications/webpack_example
> webpack

Hash: db3dea5663798ec17c02
Version: webpack 3.5.4
Time: 776ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.76 kB       0  [emitted]  main
   [0] ./index.js 71 bytes {0} [built]
   [1] ./src/foo.js 110 bytes {0} [built]

distでディレクトリにbundle.jsができている。
ブラウザのコンソールにFooと表示されていればOK。

感想

実行してみてなんとなくwebpackのありがたさがわかった。es6の構文はまだまだブラウザでは実行できずにエラーになることが多いので
当面はwebpackにお世話になりそう。
他にも色々機能があるらしいので勉強したい。

参考文献

ざっくりWebpack入門 Vol.2 babelでES6のトランスパイル - dev.techdrive.top
Qiita:Webpackってどんなもの?
Qiita:webpack で始めるイマドキのフロントエンド開発