webpackを使ってJSとCSSをコンパイルする(ES6 / Sass)

Railsでいきなりwebpack使おうとしたけど、基本がわかってなさすぎたので、webpack単体で遊んでみることにした。GulpとかGruntとかあるけど、個人的にはwebpackが一番分かりやすい。

いままでちょっとしたコーディングならCodekit使ってたけど、webpackでもいいかな。

Screen Shot 2016-04-19 at 1.52.04 AM
  
とりあえず node.js と npm を最新にしておこうか。

$ npm update -g npm

# nodeのインストールには n がいいよ
$ npm install -g n

# これで最新の安定版が入る
$ n stable

$ n
# => 複数入ってたら選べる

  

webpackイントール

$ npm install webpack -g

とりあえず、webpackの感じをつかむためコマンドを実行してみる。
下のファイルをつくる。

entry.js

document.write("It works.");

  
で、実行すると bundle.js が生成される。

$ webpack ./entry.js bundle.js

  
それをHTMLで読み込んでいる。
大雑把に言うとこの流れがすべて。

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

bundle.js は生成されたJS。
entry.js は依存関係が全部入っているJS。

  

外部JSをバンドルしてみる

JS Bundler と言われるくらいだからね。

content.js

module.exports = "This is content.js!";

entry.js

document.write(require("./content.js"));

  
コンパイルすると、HTMLに This is content.js! と出てるはず。

$ webpack ./entry.js bundle.js

  

CSSだってバンドルできる

なんと便利な。
JS以外を読み込むには Loader と呼ばれるものが必要。
  
インストール。

$ npm install css-loader style-loader

  
CSSを書く。

body {
    background: red;
    fort-size: 2.0em;
}

  
読み込む。
entry.js

 require("!style!css!./style.css");
 document.write(require("./content.js"));

  
Javascript にCSSの読み込みを書くという変な感じ。
!style!css!./style.css なので注意。

!style!css! と毎回書くのはイケてないので、configに書いてしまおうというのが下に続く。

  

Configをつくる

webpack.config.js

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

  
これがあれば webpack だけでいい。

$ webpack

  

ファイルへの変更を監視する

これでOK。

$ webpack  --watch

  
なんならサーバーを立ち上げることもできる。
インストールが必要。

$ npm install webpack-dev-server -g

  
こんな感じで起動。

$ webpack-dev-server

http://localhost:8080/webpack-dev-server/index.html に行くと確認できるはず。

  

Sassもコンパイルしたい

CSSだけではツライ。Sassも欲しい。

$ npm install sass-loader --save-dev

  
webpack.config.js に追加する。

module.exports = {

  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js",
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: "style!css" },
      {
        test: /\.sass$/,
        loaders: ["style", "css", "sass"]
      }
    ]
  }
};

サーバー使ってたら、config変更した時点で再起動した方がいいかも。
loaderの変更が反映されなくてハマった。

  

ES6も書きたい

せっかくなのでCoffeeScriptでなくてES6にしてみよう。

$ npm install babel-loader babel-core babel-preset-es2015 --save-dev

  
webpack.config.jsはこんな感じになった。

module.exports = {

  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js",
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: "style!css" },
      {
        test: /\.sass$/,
        loaders: ["style", "css", "sass"]
      },
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          cacheDirectory: true
        }
      }
    ]
  }
};

exclude に node_modules いれないと、nodeモジュールのJS全部見ていくので遅くなる。
やたらファイル多いもんね…。

  
サーバー再起動して、OKなはず!
以上。
 

  
追記
vagrant で --watchコマンド使っても動かなかった。
原因が分からないので、 ホスト側(Mac)から wabpack --watch コマンドを叩くことにした。
ちゃんとコンパイルされるので問題ないが vagrant の webpack で最終的にビルドするので、できたら vagrant 上のものを使いたい。
だれかやり方教えて…

参考

https://webpack.github.io/docs/usage.html

webpack/webpack: A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand. Through "loaders" modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

jtangelder/sass-loader: SASS loader for Webpack

babel/babel-loader: Webpack plugin for Babel

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた