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

【5分でなんとなく理解!】Webpack入門

More than 1 year has passed since last update.

最近インターンを始めさせていただいたのですが、その中で
今までなんとなく聞いたことあったけど理解してこなかった知識がバババッ!!と繋がってきました。
そこで、アウトプットするとともに、同じようにプログラミング初めてなんとなく理解し初めてきたけど、
もう1歩という人がなんとなく理解できるように知見を、通勤、通学中の電車や休憩時間の5分くらいでインプットできるような記事を共有していきたいと思います。
第1回はWebpack入門です!

Webpackとは

Webpackとは、簡潔言うと、複数のファイルを1つにまとめてくれるものです。
最も多い使用の仕方は、JavaScriptファイルをバンドルすることですが、他にもcssや画像ファイルなどもまとめることができます。

なんでファイルを1つにまとめると嬉しいの?

ファイル取得時間

複数のjs,css,画像ファイルなどを1つにまとめることによって、通信の際にファイル取得時間を短縮できます。

環境ごとに実行ファイルを分けることができる

例えば、同じソースコードからwebブラウザで動く用のjsファイルと、nodeサーバーで動く用のjsファイルなど使用する環境に応じて異なった出力をすることができます。
こうすることによって、そのサービスを複数の環境で提供することを容易になります。

plugin

webpackには豊富なプラグインが用意されています。
例えば、出力ファイルの圧縮や、ファイルでのエラーのスキップなど様々な期待される用途によって出力を分けることができます。

他にも...

バンドルする際にbabelを用いることによって、es6,es7をes5に変換することができるなどありますが、とりあえずwebpackの概要を知るには上の条件でいいかなと思います。
より知りたい方は以下のリンクなども参考にしてみてください。
webpackの利点をもっと知る

実行手順

  1. node.jsの実行環境を整える
  2. webpackをインストール
  3. npm init
  4. webpack.config.jsでwebapackの設定を書く

実際に動かすコマンドに関しては以下のリンクをなどを参考にしてみてください。
webpackの導入手順についてもっと知る

どんなふうに動くの?

では、サンプルコードを題材に動きを確認しましょう。
今回のサンプルコードのディレクトリ構造は次のようになっています。

.
├── entry.js
├── modules
│   └── increment.js
├── output
│   └── bundle.js
├── package.json
└── webpack.config.js

基本的なwebpackの記法

まず、entryに起点となるファイルを指定します。
そこから、importされているファイルをたどり、1つのファイルを生成します。
そして、outputのfilenameに出力するファイル名を指定し、pathで指定されたディレクトリ階層に出力しています。

webpack.config.js
module.exports = {
  entry: './entry.js', // entry pointを起点にバンドルしていきます
  output: { // 出力に関して
    filename: 'bundle.js', // 出力するファイル名    
    path: `${__dirname}/output/` // 出力するディレクトリ階層
    // pathは絶対パスで指定、そのため __dirname でディレクトリ階層を取得しています
  }
};

サンプルコードを動かしてみる

それでは、先ほどのwebpack.config.jsの設定で以下のサンプルコードを実行して見ましょう

modules/increment.js
export function increment(a) {
  return a + 1;
}
entry.js
import { increment } from './modules/increment';

console.log('before:', 0);
console.log('***increment***');
console.log('after:', increment(0));

実行コマンド
webpack && node ./output/bundle.js
出力結果
before: 0
***increment***
after: 1

出力されたサンプルコード
サンプルコードをもっと見る

1.x系と2.x,3.x系の記法の違いに注意!

特に初心者がハマるところとして、1.x系と2.x,3.x系の記法の違いが挙げられます。
webpackは1.x,2.xと段階を得て現在(2017/8/28)、3.xバージョンとなっています。
1.x系と2.x系以降では記法に変更がありました。
現在webpackを特別な指定をせずインストールすると3.x系となり、そのまま作業した場合、1.x系の記法で書いてしまうと動きません。
そのため、最初にとりあえず、見よう見まねで動かそうする時、古い記事に書いてあるコードをバージョン確認をせずにコピペしてしまうと危険です!
1.x系の記法をコピペしてしまうと、ハマって時間を潰してしまうことがあるので注意しましょう。

まとめ

なんとなくwebpackについてわかって頂けたでしょうか?
より知りたいという方は以下の参考リンクに進んでみてください。
また、なにか間違い、違和感などありましたら、編集リクエストお待ちしてます。
次回は、今日も少し出てきましたが、今回学習したwebpackとともによく使われるbabelについてなんとなくわかる記事を書く予定です!

参考リンク

Webpack
Webpackってどんなもの?
最新版で学ぶwebpack 3入門 – JavaScript開発で人気のバンドルツール
モジュール管理、だけじゃない-Webpack入門 〜 JSおくのほそ道 #029

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
ユーザーは見つかりませんでした