はじめに

この記事は初心者でもwebpackを用いて簡単な環境を構築できるように書いた記事です。
中級者以上でしたらおそらく物足りない記事になるかもしれませんが、初心者には十分な環境を整えることができると思います。

今回用いた環境

macOS Sierra 10.12.2
Node.js v6.9.1 入ってるかわからない人は $ node -vと打ってみてください。 v6.9.1などバージョンが表示されたらおっけーです。

node.jsをまだインストールしていない人は下記のリンク等などを見てインストールしてみてください。
5分で終了。node.jsの環境構築が拍子抜けするほど簡単だったのでサンプルプログラム付きでまとめてみました【Mac編】

準備

それでは、環境を作っていく流れをまずはざっくりと説明していきます。
ターミナルを開いて準備しましょう。

1. まずはディレクトリ作成。

普通に新しいフォルダーを作るのもok
$ mkdir ディレクトリ名 で作るのもok
ちなみにmkdirはmake directoryの略だそうです。

2. 先ほど作成したディレクトリに移動してpackage.jsonの作成

ディレクトリの移動は$ cd ディレクトリ名でできます。
ちなみにcdはchange directoryの略だそうです。
package.jsonを作成するコマンドは
$ npm init
いろいろ表示されるけどすべてenterで大丈夫です。

webpackを導入

webpackとは

分かりやすい記事があったので引用しました。

Webpackとは、Webコンテンツを構成するファイルを「モジュール」という単位で取り扱い、最適な形に作り変える為のツール ( JS開発で人気のWebpackとは!? 5分でわかる入門記事 - ICS MEDIA )

WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）( webpack で始めるイマドキのフロントエンド開発 - Qiita )

とっても簡単に言えば、部品さえ作っておけばうまく適切な形に組み立ててくれるのがwebpackですかね。

インストールの手順

パッケージをインストールするときは

グローバル
$ npm install -g パッケージ
( permissionエラーでたら権限がないのでnpmの前にsudoつける)

現在のディレクトリ
$ npm install --save-dev パッケージ

とコマンドを打ってインストールします。

今回はディレクトリにwebpackをインストールするので
$ npm install --save-dev webpack
と打ちましょう。

そうすると、node_modulesというフォルダが出来上がります。

package.jsonを見ると

package.json

"devDependencies": {
    "webpack": "^2.2.1"
  }

こんなのが増えてますね。

webpack.config.jsの作成

まずはこんな感じにファイルを生成していきましょう。

webpack-demo
│  index.html
│  package.json
│  webpack.config.js
└─ src
    ─test.js
└─ node_modules

webpack.config.jsにプログラムを書いてみましょう。
webpack とは、コマンドを打っただけでコンパイルするように設定するファイルです。
loaderの中はあとからどんどん追加していきますので、まずはここまで。

webpack.config.js

module.exports = {
  entry: __dirname + "/src/test.js", //ビルドするファイル
  output: {
    path: __dirname +'/dist', //ビルドしたファイルを吐き出す場所
    filename: 'bundle.js' //ビルドした後のファイル名
  },
    module: {
    loaders: [
            //loader
      ]
  }
};

webpack-dev-serverをインストール

ローカルのサーバーをwebpackで立ち上げることができます。
インストール
$ npm install --save-dev webpack-dev-server
サーバーを立ち上げる
$ webpack-dev-server

なお、package.jsonのscriptの中を書き換えることでコマンドを省略することが可能です。

package.json

  "scripts": {
    "start": "webpack-dev-server"
  }

この場合は、$ npm start とコマンドを打つと $ webpack-dev-server を起動することができるようになります。install, start, testなどデフォルトのタスクの場合は runはいらない様子。

babelを使ってES6をコンパイルする。

babelとは

babelとは次世代のJavaScriptの標準機能を、ブラウザのサポートを待たずに使えるようにするNode.js製のツール。 Babelの手ほどき - Babelとは | CodeGrid

babelのパッケージをインストール

今回は、babel-core、babel-loader、babel-preset-es2015、babel-preset-stage-0 babel-polypillのプラグインをインストールします。

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 babel-polyfill
このようにパッケージは連続して書いてけば全部一気にインストールできます。

babel-core
Babelのコンパイラのコア
babel-loader (webpack.config.jsにコンパイラとして指定)
webpackでES2015構文で書いたファイルをトランスパイルするのに必要なローダー
babel-preset-es2015
es2015をコンパイルしてくれる。
babel-preset-stage-0
ステージを指定するもの。0は企画段階からの文法もかけちゃう。
babel-polyfill
ES6の新しい機能などを利用するためのES5向けのライブラリ。
jsにインポートして使う。プリセットではない。

package.jsonをみると

package.json

"devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "webpack": "^2.2.1"
  }

しっかり増えてますね。

webpack.config.jsを書き換えてbabelでコンパイルできるようにする。

次は先ほど無視したlorderの中に追加していきます。

webpack.config.js

loaders: [
      // {
      //   test: ビルド対象のファイルを指定
      //   includes: ビルド対象に含めるファイルを指定
      //   exclude: ビルド対象に除外するファイルを指定
      //   loader: loaderを指定
      //   query: loader に渡したいクエリパラメータを指定
      // },
      {
       test: /\.js$/,
       loader: 'babel-loader',
       exclude: /node_modules/,
       query://loaderに渡したいクエリパラメータを指定します
        {
          presets: ['es2015','stage-0']
        }
      }
    ]

これで、webpackとbabelの環境設定はokです。
仮にindex.htmlとtest.jsにES2015(ES6)で何か書いて見ましょう。

index.html

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type="text/javascript" src="dist/bundle.js" charset="utf-8"></script>
  </body>
</html>

test.js

//(ES2015であればなんでもok !)
import 'babel-polyfill'

let num = 1;
console.log(num);

bundle.jsを確認してみて、let → var になってたらコンパイルされています。

他に導入したもの

sassをコンパイルするもの

もともとwebpack自体が、基本的に全てをjavascriptとして扱ってしまうため、cssを扱うことは少々難しく感じられた。
cssをwebpackで扱うことに関してわかりやすいと感じたのはこの記事なので、ぜひチェックを。
なんとなくで理解しないWebpackのCSS周辺 - Qiita

(今後新しい記事に書いていきます。)

vue.js

今回、vue.jsを使うためにwebpackを導入したので、vue.jsもちらりと。
vue.jsは下の記事を参考にしました。
npmとwebpackで作るVue.js
Introduction · GitBook

vue-routerとは
シングルアプリケーションの構築をするときに、Vue.jsのコンポーネントを使ってアプリケーションを構成しており、そのコンポーネントとルートをマッピングさせてvue-routerにどこでレンダリングするか知らせるものである。
vue-cli
シングルページアプリケーションを作成するのに必須なbabelやwebpackなど全てをインストールしてくれるフロントエンドのフレームワーク。オフィシャル。初心者のうちはあまり使わない方が良い。
インストール
インストール - Vue.js
npm install -g vue-cli
Vuex
npm i —save vuex@^2.0.0-rc.5
vue-loader
npm install —save vue-loader

はまったこと

webpackのバージョン
変更しても同じエラーが出続けるときに、npm自体がキャッシュを持っていることがある。
そのときは以下のコマンドを打つと良い。
$npm cache clean
まさかのpackage.jsonでおこられました。笑
Sorry, name can no longer contain capital letters.
…名前に大文字を入れるなとおこられました、初歩的。