React + webpack の開発環境構築

プロジェクト作成

yarn init
yarn install

react / reducx開発に必要なパッケージのインストール

yarn add prop-types react react-dom react-router-dom redux react-redux redux-thunk redux-form
yarn add -D redux-devtools-extension

css/sass & webpack 関連のパッケージのインストール

yarn add extract-text-webpack-plugin@next node-sass style-loader css-loader sass-loader 
yarn add webpack webpack-dev-server webpack-cli

ESコンパイラ関連のインストール

yarn add babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 
yarn add @babel/core @babel/preset-env @babel/preset-react

独自環境変数ファイルの作成 （ .env.js を作成。内部の変数は必要に応じて変更する。 ）

export default {
  apiUrl: 'http://localhost',
};

webpack.config.js の以下の構成にする。

- publicフォルダの位置は、環境に応じて変更する

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

const publicDir = path.join(__dirname, 'public');
module.exports = [
  {
    mode: 'development',
    entry: {
      index: './src/index.jsx',
    },
    output: {
      path: publicDir,
      publicPath: '/',
      filename: 'bundle.js',
    },
    module: {
      rules: [
        {
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.jsx'],
      alias: {
        userEnv$: path.resolve(__dirname, '.env.js'),
      },
    },
    devServer: {
      historyApiFallback: true,
      contentBase: publicDir,
    },
  },
  {
    mode: 'development',
    entry: {
      style: './src/stylesheets/index.scss',
    },
    output: {
      path: publicDir,
      publicPath: '/',
      filename: 'bundle.css',
    },
    module: {
      rules: [
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader'],
          }),
        },
      ],
    },
    plugins: [
      new ExtractTextPlugin('bundle.css'),
    ],
  },
];

参考: 独自環境変数の利用方法

import userEnv from 'userEnv';
console.log(userEnv.apiUrl);