コピペコードで快適生活

明日使えるソースを自分のために

webpack+Reactの環境構築メモ

npm install

$ cd my_project
$ npm init
$ npm install webpack -g
$ npm install --save react react-dom
$ npm install --save-dev webpack webpack-dev-server
$ npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-es2015

ReactDOM
DOM に React 要素をレンダーするためのモジュール

webpack
複数のファイルを変換してまとめるツール
たとえば複数のjsを変換してひとつにまとめたり。

babel (babel-cor)
JSコードの変換ツール

babel-loader
bableをwebpackで使うためのライブラリ

babel-preset-react
jsxをjsに変換するためのpreset(JSXはReact.createElementの糖衣構文)

babel-preset-es2015
ES2015をES5に変換するためのpreset


webpack.config.js

const webpack = require("webpack");

module.exports = {
  // minify
  // plugins: [
  //   new webpack.optimize.UglifyJsPlugin()
  // ],

  context: __dirname + '/src',

  entry: {
    js: './js/index.js'
  },

  output: {
    path: __dirname + '/dist',
    filename: './js/app.js'
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },

  devServer: {
    // contentBase: 'dist',
    host: '127.0.0.1',
    port: 8080
  },
};

ビルド

webpack

開発サーバ起動
package.jsonのscriptsに

 "start": "webpack-dev-server"

追加して

npm run start

参考
http://uraway.hatenablog.com/entry/2015/12/25/Webpack_%2B_React_%2B_ES6%E3%81%AE%E6%9C%80%E5%B0%8F%E6%A7%8B%E6%88%90%E3%82%92%E8%80%83%E3%81%88%E3%81%A6%E3%81%BF%E3%82%8B%E3%80%82

http://dackdive.hateblo.jp/entry/2016/04/13/123000#webpackconfigjs-の例

http://dackdive.hateblo.jp/entry/2016/05/07/183335