Webpack Usageを丁寧にさわる


参考URL
http://webpack.github.io/docs/usage.html

出来上がったソース
https://github.com/koh518/webpack_dojo

# 5秒ではじめるWebpack

**webpackをインストールする**

    mkdir webpack_dojo # 作業directory作成
    cd webpack_dojo
    npm init
    npm install -D webpack

簡単なJavascriptのコードを書いていく
**cats.js**

    var cats = ['dave', 'henry', 'martha'];
    module.exports = cats;

**app.js (Entry Point)**

    cats = require('./cats.js');
    console.log(cats);

Entry PointがJavascriptアプリケーションがスタートするファイルになる。
すなわち、Entry Pointoを起点として、webpackがmodules間の依存関係を解決することになる。

app.jsをEntry Pointとして依存関係を解決したapp.bundle.jsを作成する

    webpack ./app.js app.bundle.js

Javascriptアプリケーションを実行する

    node app.bundle.js
    ["dave", "henry", "martha"] // require('./cats.js'); が解決されている


## Webpack with Configuration File

`webpack` コマンドに頑張って引数を渡してOne Lineでmodule依存関係を解決することも可能だが、シンプルに使用するために、設定ファイルをつくることでHappyになれる。

今度は設定ファイルである`webpack.config.js` を使って同じことをやってみる

**下準備**

    mkdir bin
    mkdir src
    mv app.js cats.js src

**webpack.config.js**

     module.exports = {
         entry: './src/app.js',
         output: {
             path: './bin',
             filename: 'app.bundle.js'
         }
     };

webpackを実行する(How simple)

    webpack

Javascriptアプリケーションを実行する

    node bin/app.bundle.js
    ["dave", "henry", "martha"]


## Loaders

webpack単体だとJavascriptのみをサポートしているが、多くの人はES2015, CoffeeScript, TypeScriptのTranspilerを使っていると思う。webpackではこれらを`loaders` を使うことで対応でき
る。

### 具体例
#### babel-loader

ES2015 → Javascript(webpackが理解できる)

![https://dtinth.github.io/webpack-docs-images/usage/babel-loader.png](https://dtinth.github.io/webpack-docs-images/usage/babel-loader.png)


#### json-loader

JSON file → CommonJS module

![https://dtinth.github.io/webpack-docs-images/usage/json-loader.png](https://dtinth.github.io/webpack-docs-images/usage/json-loader.png)


## babel-loaderを使ってES2015をTranspilingする


1 Babelとes2015 presetをインストールする

```
npm install --save-dev babel-core babel-preset-es2015
```


2 babel-loaderをインストールする

```
npm install --save-dev babel-loader
```

3 `.babelrc` へpresetの設定をする

**.babelrc**

    { "presets": [ "es2015" ] }


4 webpack.config.jsをbabel-loaderを使用するために変更する

```
module.exports = {
    entry: './src/app.js',
    output: {
         path: './bin',
         filename: 'app.bundle.js',
    },
    module: {
        loaders: [{
             test: /\.js$/,
             exclude: /node_modules/,
             loader: 'babel-loader',
         }]
    }
}
```

> `exclude: /node-modules/, ` をすることで、外部ライブラリを全てBabelに通さないようにして、コンパイルが遅くなることを防いでいる。

`test: /.js$/` 部分が`test` なのは、内部的に`regexp.match` ではなく`regexp.test` を使用しているからだろうか(疑問)。個人的にこの名前はわかりづらいと思ってる。(`match` のほうがわかりやすいよね)

### 下記jQueryを利用した例となる

5 jQuery, babel-poyfillをインスト―ルする
     npm install --save jquery babel-polyfill


> `babel-polyfill` を使うことで、ES2015 APIを古いブラウザでも利用可能となる。


6 `src/app.js` を編集する

```
import 'babel-polyfill';
import cats from './cats';
import $ from 'jquery';
 
$('<h1>Cats</h1>').appendTo('body');
const ul = $('<ul></ul>').appendTo('body');
for (const cat of cats) {
    $('<li></li>').text(cat).appendTo(ul);
}
```

7 webpackを実行する

```
webpack
```

8 `index.html` を新規作成する

```
<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
    </head>
    <body>
      <script src="bin/app.bundle.js" charset="utf-8"></script>
    </body>
</html>
```

9 ブラウザにて`index.html` を開くと`cats` がリスト表記されていることが確認できる。


![https://dtinth.github.io/webpack-docs-images/usage/cats.png](https://dtinth.github.io/webpack-docs-images/usage/cats.png)


## おまけ: Pluginsを使って、minifyingする

下記の用に`webpack.config.js` へ`webpack.optimize.UglifyJsPlugin` の設定をすることでJavascriptのコードを宜しく圧縮してデータ量を節約できる。


    const webpack = require('webpack');
    
    module.exports = {
        entry: './src/app.js',
        output: {
            path: './bin',
            filename: 'app.bundle.js',
        },
        module: {
            loaders: [{
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            }]
        },
        plugins: [
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false,
                },
                output: {
                    comments: false,
                },
            }),
        ]
    }