Blog : React

プロジェクトの初期化

mkdir project
cd project

npm init -y

初期設定で何度もENTERを押さないといけないので、-y オプションをつける。
プロジェクトのフォルダ名には使えない文字があるっぽい。。。（「_」が含まれているとエラーに）

Webpackのインストール

npm install --save react react-dom

npm install --save-dev webpack babel-core babel-loader babel-preset-es2015 babel-preset-react

Webpackコンフィグの作成

package.jsonと同じ階層にwebpack.config.jsを作成し、編集

const path = require('path');

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

コマンドを登録

production develop watchの三つのコマンドを追加

{
  "name": "webpack-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "production": "webpack -p",
    "develop": "webpack -d",
    "watch": "webpack -d --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.2",
    "react-dom": "^0.14.2"
  },
  "devDependencies": {
    "babel-core": "^6.1.21",
    "babel-loader": "^5.4.0",
    "webpack": "^1.12.4"
  }
}

ウォッチモード開始！

npm run watch

圧縮！

npm run production