Webpackを使ってReact, Sass, es2015の開発環境を構築してみる

reactの環境構築の際webpack1.0系と2.0系の設定の違いに悩まされたのと、日本語での情報があまりないので書いていきたいと思います

WebpackでReactの環境構築

mkdirでプロジェクトを作ってyarn init

yarn init


トランスパイラにはbabelを使用します。
babel, webpackを追加。

yarn add webpack babel-core babel-loader babel-preset-es2015 babel-preset-react --dev

react を追加していきます。

yarn add react react-dom

webpack.config.jsの作成

プロジェクトのルートディレクトリで

touch webpack.config.js


webpack configを編集していきます。
ここでは1系と2系の違いだけを書いていきます。

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  context: path.join(__dirname, 'src'),
  entry: {
    bundle: './index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        loader: 'babel-loader',
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        options: {
          presets: ["es2015", "react"]
        },
      }
    ],
  },
  devServer: {
    contentBase: 'dist'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.AggressiveMergingPlugin(),
  ],
  devtool: 'source-map',
  resolve: {
    extensions: ['.js', '.jsx']
  }

}

参考
https://webpack.js.org/concepts/

module.loaders: の部分がmodule.rulesになり、
module.loaders.loaderが module.loader.rulesになっていました。
(トランスパイラのローダーを設定するとこはmodule.rules.loaderでないといけない。)

package.jsonを編集していきます。

"scripts"オプションを入れることによって任意のコマンドを定義できます。

package.json

{
  "name": "new_redux_todo",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Y",
  "license": "MIT",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.3",
    "redux": "^3.6.0",
    "webpack-dev-server": "^2.4.2"
  },
  "scripts": {
    "start": "webpack-dev-server --no-inline"
  },
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "webpack": "^2.3.2"
  }
}

この場合

"scripts": {
    "start": "webpack-dev-server --no-inline"
  }

は yarn run startを実行すると webpack-dev-server --no-inlineを実行します。

Sassの環境設定。

上記と同じようにしてSassを使えるように設定していきます。

sassを読み込めるように sass-loader, style-loaderなどを追加していきます。

yarn add css-loader extract-text-webpack-plugin node-sass sass-loader style-loader webpack

configファイルはこんな感じ

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = [
  {
    context: path.join(__dirname, 'src'),
    entry: {
      bundle: './index.js'
    },
    output: {
      path: path.join(__dirname, 'dist'),
      filename: '[name].js'
    },
    module: {
      rules: [
        {
          loader: 'babel-loader',
          test: /\.js[x]?$/,
          exclude: /node_modules/,
          options: {
            presets: ["es2015", "react"]
          },
        }
      ],
    },
    devServer: {
      contentBase: 'dist'
    },
    plugins: [
      new webpack.optimize.UglifyJsPlugin(),
      new webpack.optimize.AggressiveMergingPlugin(),
    ],
    devtool: 'source-map',
    resolve: {
      extensions: ['.js', '.jsx']
    }

  },
  {
    context: path.join(__dirname, 'src'),
    entry: {
      bundle: './index.scss'
    },
    output: {
      path: path.join(__dirname, 'dist/css'),
      filename: '[name].css'
    },
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract(
            {
              fallback: "style-loader",
              use: ["css-loader", "sass-loader"]
            }
          )
        }
      ]
    },
    plugins: [
      new ExtractTextPlugin('bundle.css')
    ]
  }
]

これで yarn startすると

chunk    {0} extract-text-webpack-plugin-output-filename 57.1 kB [entry] [rendered]
            [0] ./~/css-loader/lib/css-base.js 2.19 kB {0} [built]
            [1] ./~/base64-js/index.js 3.48 kB {0} [built]
            [2] ./~/buffer/index.js 48.6 kB {0} [built]
            [3] ./~/css-loader!./~/sass-loader/lib/loader.js!./src/index.scss 163 bytes {0} [built]
            [4] ./~/ieee754/index.js 2.05 kB {0} [built]
            [5] ./~/isarray/index.js 132 bytes {0} [built]
            [6] (webpack)/buildin/global.js 509 bytes {0} [built]
webpack: Compiled successfully.

こうなるとコンパイル成功です！

以上webpackの設定方法でした。

参考
http://qiita.com/keitaMatsuo/items/65d7a613918747930be9
http://qiita.com/chibi929/items/5e5f864a1fa46b082ed2#_reference-cc30c34d6abcce0a64a3