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

Shunsuke Sawada

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

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

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

shell
1
2
3
4
5
6
7
8
9
10
$ npm update -g npm

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

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

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

  

webpackイントール

1
$ npm install webpack -g

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

entry.js

javascript
1
document.write("It works.");

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

shell
1
$ webpack ./entry.js bundle.js

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

html
1
2
3
4
5
6
7
8
<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

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

entry.js

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

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

shell
1
$ webpack ./entry.js bundle.js

  

CSSだってバンドルできる

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

shell
1
$ npm install css-loader style-loader

  
CSSを書く。

css
1
2
3
4
body {
    background: red;
    fort-size: 2.0em;
}

  
読み込む。
entry.js

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

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

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

  

Configをつくる

webpack.config.js

javascript
1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

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

shell
1
$ webpack

  

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

これでOK。

shell
1
$ webpack  --watch

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

shell
1
$ npm install webpack-dev-server -g

  
こんな感じで起動。

shell
1
$ webpack-dev-server

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

  

Sassもコンパイルしたい

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

shell
1
$ npm install sass-loader --save-dev

  
webpack.config.js に追加する。

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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にしてみよう。

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

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

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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

Shunsuke Sawada

おすすめの記事

Webpack Uncaught Error: Cannot find module への対処法
爆速でウェブアプリを公開する方法(無料でSSL独自ドメイン)/ React + Typescript + Cloud Function + Firebase Hosting