あいつの日誌β

働きながら旅しています。

webpack tutorial to use Bootstrap (Part2)

おさらい

Part1 では ES2015 なコードを webpack で使う手順を紹介しました。 Part2 では Bootstrap を導入する手順を説明します。

Lesson3: CSS を bundle する

Javascript のコード中で stylesheet を require します。 require した CSS を head 内に挿入する方法もありますが、ここでは CSS を head に挿入せず別ファイルとする方法を記します。

% npm i --save-dev style-loader css-loader

create www/index.html:

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
    <h1>test<h1>
    <script src="bundle.js"></script>
  </body>
</html>

edit: webpack.config.js

     loaders:[
       { test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
+      { test: /\.css$/, loader: "style-loader!css-loader" }
+    ],

背景を少し暗くしてみる。

add src/style.css:

body { background: #666; }

edit src/app.js

 import "babel-polyfill";
+import "./style.css";
 import moment from 'moment';
 (async () => {
   sayNow();

動作確認

% $(npm bin)/webpack-dev-server

Lesson4: Bootstrap の CSS を導入する

% npm install --save bootstrap

以下の一行を追加してみる: src/app.js

 import "babel-polyfill";
+import 'bootstrap/dist/css/bootstrap.css';
 import "./style.css";
 import moment from 'moment';
 (async () => {
   sayNow();

ただし、このままでは動かないので以下の Loader を追加する

% npm install --save-dev url-loader

webpack.config.js に以下を追記

   module: {
     loaders:[
     { test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
-    { test: /\.css$/, loader: "style-loader!css-loader" }
+    { test: /\.css$/, loader: "style-loader!css-loader" },
+    { test: /\.svg$/, loader: 'url-loader?mimetype=image/svg+xml' },
+    { test: /\.woff$/, loader: 'url-loader?mimetype=application/font-woff' },
+    { test: /\.woff2$/, loader: 'url-loader?mimetype=application/font-woff' },
+    { test: /\.eot$/, loader: 'url-loader?mimetype=application/font-woff' },
+    { test: /\.ttf$/, loader: 'url-loader?mimetype=application/font-woff' }
     ],
   }
 };

以下のボタンを追加する: edit www/index.html

  <button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">Button</button>

動作確認をする

% $(npm bin)/webpack-dev-server

まとめ

これで Bootstrap の CSS を使えるようになりました。 次回は Bootstrap の Javascript を使った Components を使う方法を紹介します。

参考 URL

http://wannabe-jellyfish.hatenablog.com/entry/2016/03/06/034101