WindowsにWebpackをいれてReactの環境を構築してみる


Windowsで構築する用途がでてきたため、メモ的に。

## 1.nodeのインストール（nodistでnodeのバージョン管理）

### ・nodistのインストール
(1)下記よりインストーラーをダウンロード
https://github.com/marcelklehr/nodist/releases
※2016/12/27時点での最新は「NodistSetup-v0.8.8.exe」

(2)ダウンロードしたらexeを実行し、インストール

(3)コマンドプロンプトを起動し、確認

```prompt
nodist -v
```
バージョンが出ればOK。使い方は下記URLを参照
https://github.com/marcelklehr/nodist/blob/master/usage.txt

### ・nodeのインストール
(1)インストールできるnodeを確認

```prompt
nodist ds
```

(2)現在は6系がLTS(Long-term Support)なので、6系をインストール

```prompt
nodist 6.x
```

(3)nodeがインストールできているか確認

```prompt
nodist list
```
6.9.2  (global: 6.x)が表示されればOK

nodeコマンドでも確認

```prompt
node -v
```
v6.9.2が表示されればOK
もし、バージョンがでない場合は、下記を実行

```prompt
nodist global 6.9.2
```


### ・npmのアップデート（nodeのパッケージ管理）

(1)現在のバージョンの確認

```prompt
npm --version
```

(2)アップデートを実行

```prompt
npm update -g npm
```

(3)再度(1)でバージョンを確認

## 2.webpackやreact等のバッケージのインストールと設定
フォルダ構成は以下の通り。

```構成
- webpack-sample
	- src (npm runを実行するフォルダ)
	   - js (コンパイル元のjs)
	     + app.js
	     + counter.js
	   - sass　(コンパイル元のsass)
	     + app.scss
	     + _variables.scss
	
	- public
	   + js (jsのコンパイル先のフォルダ)
	   + css (sassのコンパイル先のフォルダ)
	   + index.html
	+ package.json
	+ webpack.config.js
	+ bs-config.js（browsersync）
```

(1)プロジェクトのnodeバージョンを固定するのとpackage.jsonの作成

```prompt
cd webpack-sample
nodist local 6.9.2
npm init
// あとはとりあえずEnterで
```

(2)webpackのインストール

```prompt
npm install --save-dev webpack
```

(3)reactのインストール

```prompt
npm install --save react react-dom
```

(4)babelとプリセットのインストール

```prompt
npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-es2015
```

(5)sass関係のインストール（必要なら）

```prompt
npm install --save-dev extract-text-webpack-plugin css-loader sass-loader style-loader node-sass
```

(6)BrowserSyncのインストール（簡易サーバーとライブリロードで。必要なら）

```prompt
npm install --save-dev browser-sync concurrently
```

(7)webpack.config.jsの作成
webpack-sampleフォルダ配下にwebpack.config.jsファイルを作成し、以下の内容を記述

```webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = [
    {
        context: path.join(__dirname, 'src/js'),
        entry: {
            app: './app.js'
        },
        output: {
            path: path.join(__dirname, 'public/js'),
            filename: '[name].js'
        },
        module: {
            loaders: [
                {
                    test: /\.js[x]?$/,
                    exclude: /node_modules/,
                    loader: "babel",
                    query:{
                        presets: ['react', 'es2015']
                    }
                }
            ]
        },
        resolve: {
            extensions: ['', '.js', '.jsx']
        }
    },
    {
        context: path.join(__dirname, 'src/sass'),
        entry: {
            app: './app.scss'
        },
        output: {
            path: path.join(__dirname, 'public/css'),
            filename: '[name].css'
        },
        module: {
            loaders: [
                {
                    test: /\.scss$/,
                    loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-url&sourceMap&minimize!sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true')
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin('[name].css')
        ]
    }
];
```

(8)BrowserSyncのconfigファイル作成と設定（必要なら）
webpack-sampleフォルダで以下を実行

```prompt
node_modules\.bin\browser-sync init
```

作成されたbs-config.jsの以下の部分を修正

```bs-config.js
"files": false → "files": "./public/**/*"

"server": false → "server": {
                      "baseDir": "./public"
                  }

"browser": "default" → "browser": "Chrome" # お好きなブラウザを。windowsのchrome場合は左記。macの場合はgoogle chromeかな
```

(9)package.jsonのscriptsにコマンドを追加
以下、package.jsonの内容

```package.json
{
  "name": "webpack-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p --progress",
    "watch": "webpack -d --watch --progress",
    "browsersync": "browser-sync start --config bs-config.js",
    "start": "concurrent \"npm run watch\" \"npm run browsersync\""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "browser-sync": "^2.18.5",
    "concurrently": "^3.1.0",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "node-sass": "^4.1.1",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  }
}
```

## 3.コンパイルやファイル監視などの実行
webpack-sampleフォルダで用途に応じて、以下を実行

```prompt
npm run build → 本番用にビルド。圧縮とかをしてくれる。
npm run watch → ファイルを監視して、変更があったら、開発用にビルド。sourceMapの作成等してくれる
npm run start → 上記のnpm run watchに加え、Webサーバーの起動とライブリロードを実施する
```

## 4.今後
以下のURLでは、BrowserSyncに加え、HotModuleReplacementPluginの記述もあるので、scssも含めできるか試してみたい。
http://uraway.hatenablog.com/entry/2016/03/25/034706