基本的な使い方

CLIで基本的な使い方を学びましょう。

サンプルファイル作成

下記のようにファイルを作成を作ります。

public/index.html

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
  </body>
</html>

src/index.js

import moment from 'moment';

document.getElementById('app').innerHTML = 'The time now is ' + moment().toString();

webpack v2ではES modulesのimportがサポートされています。

上記のjsファイルではmomentというパッケージを使っていますのでそれをインストールします。

$ npm install moment --save-dev

webpackでビルドします。

$ $(npm bin)/webpack src/index.js public/bundle.js

今後のためにpackage.jsonにscriptを書いておきましょう。

{
  "scripts": {
    "build-bundle-js": "webpack src/index.js public/bundle.js"
  }
}

上記scriptは置き換えずにマージしてください。

このようにすると、次のように実行できます。

$ npm run build-bundle-js

public/index.htmlをブラウザで開きましょう。

bundle.jsの中身を眺めてみましょう。自分が書いたコード以外にもmoment.jsのコードが含まれています。