Webpack vol.2 (Sass & Babel)

/

導入

前回WebpackでCSS、JavaScript、画像というwebページを構成する基本的な要素を扱ってみたので、今回は拡張言語を使う方法を試してみました。

Webpack vol.1 とりあえず試してみる – Koltatt

実行環境

  • ubuntu – 16.04
  • Webpack – 1.14.0
  • Midori – 0.5.11

拡張言語

拡張言語はメタ言語やシンタックスシュガーなどとも呼ばれCSSやJavaScriptの機能を拡張するために開発された言語です。
最もシンプルな使い方は拡張言語で書かれたファイルをそれぞれのコンパイラによってピュアなCSSやJavaScriptに変換してからHTMLに読み込ませるという方法になりますが、webpackでは画像やCSSと同様に対応するloaderを追加する事で拡張言語を利用する事が出来ます。

Sass

Sassを使ったwebpackのビルドを試してみます。
sass-loader – Github

インストール

$ npm install sass-loader node-sass --save-dev

設定

webpack.config.jsでloaderの設定を行います。

module: {
  loaders: [
    {
      test: /\.scss$/,
      loaders: ["style-loader", "css-loader", "sass-loader"]
    }
  ]
}

test:で拡張子が.scssのファイルを対象に取り、loaders:で使用するloaderを指定しています。
前回は複数のloaderを!で区切って指定していましたが、今回は配列を使用しました。

loaders:に渡される配列は右側から評価されるので、sass > css > style の順番になるようにloaderを指定します。

File

設定が済んだのでビルドを実行するためにSassのファイルを作成し

body {
  text-align: center;
  h1 {
  margin: 20px;
  color: #a9a9a9;
  &:hover {
    color: #ff4500;
  }
}

エントリポイントととなるJSファイルから読み込みます。

require('./assets/styles/app.scss');

webapackを実行し

$ webpack

作成したJSファイルをHTMLから読みこめばSassがロード出来た事が確認出来ます。

<!DOCTYPE html>
<html>
...
<body>
  <h1>Webpack Test</h1>
  <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
Sassを使ってビルド

Sourcemap

拡張言語を使用する場合にはブラウザの開発ツールからコンパイルの前の情報を参照したいのでsourcemapを使用します。

sass-loaderではwebpack.config.jsのloaders:の項目でオプションを指定するとsourcemapを使用する事が出来ます。

loaders: ["style-loader", "css-loader?sourceMap", "sass-loader?sourceMap"]

オプションを指定した状態でビルドされたJSファイルを読み込むと、ブラウザからコンパイル前のSassの情報を参照する事が出来ます。

$ webpack
Sourcemapの利用

sass-loader – Github

Babel

JavaScriptはAltJSよりもES6を使いたいのでBabelを使えるようにします。

インストール

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

webpack.config.js

インストールが出来たらloaderの設定をします。

module: {
  loaders: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      }
    }
  ]
}

exclude

exclude:ではloaderの対象から外したいディレクトリやファイルの指定が出来ます。
webpackではnpmを使うことが殆どでしょうからnode_modulesと、bowerを使うのであればbower_componentsも指定しておきます。

Preset

上の例ではBabelのPresetをquery:によって指定していますが、gulpなどでBabelを使う場合と同様に.babelrcファイルを作成してPresetの指定をする事も可能です。

{
  "presets": ["es2015"]
}

個人的にこちらの方法を使うことが多いです。

File

動作の確認用としてES6のclassを使ったJavaScriptを作成します。

class App {
  constructor(str) {
    this.text = str;
  }
  write() {
    document.body.innerHTML += "<h2>" + this.text + "</h2>";
  }
}

const app = new App("Babel Test in Webpack")
app.write();

エントリポイントに追加します。

require('./assets/styles/app.scss');
+ require('./assets/scripts/app.js');

実行

準備が出来のでwebpackのビルドを実行しますが、普段使っているChromeはブラウザがES6にある程度対応しておりbabel-loaderの動作確認には不都合なので軽量なブラウザとして設計されたMidoriを検証用に使います。

# Midoriのインストール
$ apt install midori

検証のために一旦webpack.config.jsからbabel-loaderをコメントアウトしてwebackをビルド、Midoriで表示すると適切に表示されない事が確認出来ます。(ES6で書いたJavaScriptを読みこんでくれないだけでなく、bundle.jsファイル自体がきちんと読み込まれなくなりました)

$ webpack

今度はbabel-loaderのコメントアウトを解除してからビルドを実行します。

Babelを使ってビルド

再度Midoriで確認すると今度は期待通りの内容が表示されます。

Sourcemap

JavaScriptでsourcemap使用する場合にはwebpack.config.jsのdevtoolプロパティでsource-mapを指定します。

devtool: 'source-map',
JavaScriptでのSourcemapの使用

上記の指定方法だと[file].js.mapというファイルが作られその中にsourcemapが書き込まれますが、sourcemapの情報をアウトプットされるファイルに含めたい場合にはinline-source-mapを指定します。

devtool: 'inline-source-map',

またoutput:でsourceMapFilenameを設定すると作成されるsourcemapのファイル名を指定する事が出来ます。

output: {
  ...
  // source.mapという名前のファイルが作成される
  sourceMapFilename: 'source.map',
},

devtool – webpack