Webpack4を使ってReact.js + Redux + Sassの環境構築

Webpack4を使って、React.js + Redux + Sassの環境構築を行います。

install yarn

npmではなく、Yarnを使用します。yarn add xxxxと実行することで、package.jsonへの追記とライブラリのインストールを同時にやってくれます。

$ brew install yarn

プロジェクト作成

はじめにプロジェクト用のフォルダを作成し、そこに移動し、以下のコマンドを実行します。

$ yarn init

いくつか対話で聞かれますが、すべてEnterを押して進めてOKです。すると、package.jsonというファイルが出来上がります。

install packages

yarnを使って必要となるパッケージをインストールします。今回はReact.js, Redux, Sass, Webpack周りをインストールします。

以下のコマンドを実行してください。　

yarn add babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 prop-types react react-dom redux react-redux extract-text-webpack-plugin@next node-sass style-loader css-loader sass-loader webpack webpack-dev-server webpack-cli

※2018/03/5時点で、extract-text-webpack-pluginがデフォルトだと3.x系が入ってしまうので、4.x系が入るように@nextというオプションを指定しています。

package.json

以下を追記してください。これでyarn run xxxx(build, watch, start)でコマンドを実行することができます。

"scripts": {
    "build": "./node_modules/.bin/webpack --mode production --optimize-minimize",
    "watch": "./node_modules/.bin/webpack --mode development -w",
    "start": "./node_modules/.bin/webpack-dev-server"
}

webpack.config.js

webpackを動かすための設定ファイルを作成します。以下の内容でwebpack.cconfig.jsを作成してください。今回の出力先はdistというフォルダにします。

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

module.exports = [
  {
    entry: {
      index: './src/index.js'
    },
    output: {
      path: path.resolve('dist/js'),
      publicPath: '/dist/js',
      filename: '[name].js'
    },
    module: {
      rules: [
        {
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: ['react', 'es2015', 'stage-2']
          }
        }
      ]
    },
    resolve: {
      extensions: ['.js', '.jsx']
    }
  },
  {
    entry: {
      style: "./src/stylesheets/style.scss",
    },
    output: {
      path: path.resolve('dist/css'),
      publicPath: '/dist/css',
      filename: '[name].css'
    },
    module: {
      rules: [
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader']
          })
        }
      ]
    },
    plugins: [
      new ExtractTextPlugin('[name].css'),
    ]
  }
];

Project Folder

React.js + Reduxでアプリケーションを作成する場合には、以下のようなフォルダ構成にします。

src
|_ components
|_ containers
|_ constants
|_ reducers
  |_ auth.js
  |_ counter.js
|_ stylesheets
|_ actions
  |_ auth.js
  |_ counter.js

Passion make things more better

Ruby on Rails / React.js / Swift / AWS / Docker