くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > react.js > Webpack+React+BootstrapでWebアプリ

Webpack+React+BootstrapでWebアプリ

react.js webpack Bootstrap front-end

最近、WebpackとかReactとかがイケているらしいので、かじってみたときの備忘録。

環境

$ npm -v
3.3.12
$ node -v
v5.4.0
$ uname -o
Cygwin
$ arch
x86_64

プロジェクトの初期化

npm initでpackage.jsonをつくる

$ npm init

$ tree .
sample
└── package.json

必要なパッケージをnpmで追加

## React
$ npm install --save react react-dom
## WebpackとReactで使うLoarderたち
$ npm install --save-dev webpack babel-core babel-loader babel-preset-es2015 babel-preset-react

## Bootstrap
$ npm install --save bootstrap
## BootstrapでつかうLoarderたち
$ npm install --save-dev url-loader css-loader style-loader

WebPackの設定ファイルwebpack.config.jsを用意する

webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        bundle: './src/app.js'
    },
    output: {
        path: path.join(__dirname, 'public'),
        filename: '[name].js'
    },
    module: {
        loaders: [
            {
                loader: 'babel',
                exclude: /node_modules/,
                test: /\.js[x]?$/,
                query: {
                    cacheDirectory: true,
                    presets: ['react', 'es2015']
                }
            },
            { 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' }
        ]
    }
};

package.jsonに便利なコマンドを追加する

--- package_old.json 2016-03-06 03:29:56.904777300 +0900
+++ package.json  2016-03-06 03:29:32.255106000 +0900
@@ -4,6 +4,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "production": "webpack -p",
+    "develop": "webpack -d",
+    "watch": "webpack -d --watch",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",

Entryファイルsrc/app.jsを用意する

src/app.js

import React from 'react';
import ReactDom from 'react-dom';
require('bootstrap/dist/css/bootstrap.css');

とりあえず、中身なしのテンプレート。

webpackでビルドしてみる

$ npm run watch
$ npm run production

index.htmlを追加して、確認

とりあえず、BootstrapCSSが問題ないかの確認として、ボタンを追加してみた public/index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
  <h1>Title</h1>
  <div id="root"></div>
  <script src="bundle.js"></script>
  <button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">Button</button>
</body>
</html>

最終的なディレクトリ構成はこんな感じ

$ tree
sample/
├── node_modules/
├── package.json
├── public
│   ├── bundle.js
│   ├── bundle.js.map
│   └── index.html
├── src
│   └── app.js
└── webpack.config.js

以上！！なんかイケてる感じ！！

参考にしたサイト様