[js] webpack webpack2をインストールする

• 公開日：2016年06月16日

記事概要

ついにrailsでもwebpackが導入されました。この記事はwebpack2のインストール方法を記載した記事です。
ここではgemを使わずに導入する方法を説明します。最初はgemを利用しない使い方を覚えた方が、長い目で見て良いと思います。
環境はcentos6.5です。

環境

• centos6.5

webpackとは

webpackは、アプリケーションでJavaScriptモジュールをビルドするためのツールです。

nodeのインストール

まずはnode.jsをインストールします。ここでは最新版を導入します。
centos6.5はデフォルトだと古いバージョンのnode.jsをインストールしてしまうので、curlで最新のnodeを取得可能にしておく必要があります。

terminal

sudo curl --silent --location https://rpm.nodesource.com/setup_8.x | bash -

sudo yum install nodejs

node -v
v8.1.0

npmのインストール

npmをインストールします。同じく最新版を導入します。

terminal

sudo yum install npm
sudo rpm -ivh http://ftp.iij.ad.jp/pub/linux/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm
sudo yum -y install nodejs npm --enablerepo=epel
sudo npm install -g npm

npm -v
5.0.3

以上でwebpackを導入する準備は終了です。

プロジェクトの作成とwebpackのインストール

プロジェクトを作成します。

terminal

mkdir study2
cd study2
// -yはpackage.jsonのデフォルトのみが使用されて、オプション入力プロンプトは表示されない
npm init -y
// webpackとローカルサーバー
npm install --save-dev webpack webpack-dev-server

モジュールはグローバルでなく、--save-devをつけてプロジェクト別に管理することが推奨されています。

package.json

package.jsonにはビルドコマンドだけ追記します。

study2/package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

npm run buildコマンドでビルドが可能になります。

webpack.config.js

最後にwebpack設定ファイルのwebpack.config.jsを作成します。

terminal

touch webpack.config.js

module.exports = {
    // エントリポイント(最初に読まれるjs)
    entry: "./entry.js",
    // バンドルされたjsファイル(成果物)
    output: {
        path: __dirname,
        filename: "bundle.js"
    }
};

touch entry.js

以上でwebpack2の導入は完了です。あとはプロジェクトに応じたライブラリを導入して素敵なJavaScriptライフを送ってください。

まとめ

webpack2はとても便利なjsの管理ツールです。
初めての使用でも、2-3時間で最低限の機能くらいは使えるようになるので、ぜひ導入してみてください。

この記事がお役にたちましたらシェアをお願いします

Tweet