react-redux+es2015+babel+webpackなプロジェクトを新規作成する(コピペ用)

# 事前にインストールするもの
webpackをインストール
http://webpack.github.io/docs/

```
npm install -g webpack
```

webpack-initをインストール
https://www.npmjs.com/package/webpack-init

```
npm install -g webpack-init
```

# 全コピペで済ませたい人向け

```
mkdir hogefugapiyo
cd hogefugapiyo
npm init -y
npm install --save-dev webpack
webpack-init

```

```
npm install --save react react-dom redux react-redux
npm install --save-dev webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react
touch .babelrc

```

```:package.json
{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --port 4000",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "react": "^15.2.0",
    "react-dom": "^15.2.0",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2"
  }
}
```

```js:webpack.config.js
module.exports = {
  entry: 'index.js',
  output: {
    path: './',
    filename: 'bundle.js',
    publicPath: ''
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]

  }
}
```

```js:.babelrc
{
  "presets": ["es2015", "react"]
}
```

# 参照したURL付きコピペ

プロジェクト作成

```
mkdir hogefugapiyo
cd hogefugapiyo
npm init -y
```

webpack設定

```
npm install --save-dev webpack
webpack-init
```

※webpack-initで以下のようなことを聞いてくるが、とりあえずEnter連打

```
? Enter the file name for your webpack config webpack.config.js
? Enter the filename for your entry index.js
? Enter the output path, this is where your images and js will be output at ./
? Enter the output filename bundle.js
? Is your output in a different directory? Yes
? Enter the path to where you will point to in your index.html e.g. /static/
? What loaders would you like to include?
              Note some loaders may require extra configuration. See
              https://webpack.github.io/docs/list-of-loaders.html (Press <space> to select)
```

webpack-dev-serverをインストール
https://webpack.github.io/docs/webpack-dev-server.html

```
npm install --save-dev webpack-dev-server
```

package.jsonを編集
https://webpack.github.io/docs/webpack-dev-server.html#webpack-dev-server-cli

```:package.json
  "scripts": {
    "start": "webpack-dev-server --port 4000",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
```



reactをインストール
https://facebook.github.io/react/downloads.html#npm

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

reduxをインストール
https://github.com/reactjs/redux#installation

```
npm install --save redux
```

react-reduxをインストール
http://redux.js.org/docs/basics/UsageWithReact.html

```
npm install --save react-redux
```

babelをインストール
https://babeljs.io/docs/setup/#installation

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

```

babel-preset-reactをインストール
https://www.npmjs.com/package/babel-preset-react

```
npm install --save-dev babel-preset-react
```


.babelrcを設定

```
touch .babelrc
```

以下をコピペ

```js:.babelrc
{
  "presets": ["es2015", "react"]
}
```

# おわりに
この辺の技術の進化が早過ぎて
すぐにこの記事があてにならなくなる可能性が微レ存