【React-Redux】webpackでCSSを読み込んで反映編 [初心者入門5日目]

$ npm install --save-dev css-loader

$ npm install --save-dev mini-css-extract-plugin 

$ npm install --save-dev optimize-css-assets-webpack-plugin

$ npm install --save-dev terser-webpack-plugin

html {
    font-size: 13px;
    line-height: 20px;
    color: #5b5b5b;
    min-height: 100%;
    position: relative;
}

body {
    margin: 0px;
    min-height: 100%;
    background-color: #FAFAFA
}

.centerTable {
    margin: 0 auto 0 auto;
    display: table;
}

// cssインポート
import './css/main.css';

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

// cssインポート
import './css/main.css';
import stores from '../stores';
import App from '../container/AppContainer';

const render = () => {
  ReactDOM.render(
    <Provider store={stores}>
      <div>
        <App />
      </div>
    </Provider>,
    document.getElementById('root'),
  );
};

render();

import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import AddIcon from '@material-ui/icons/AddCircle';
import RemoveIcon from '@material-ui/icons/RemoveCircle';

const useStyles = makeStyles((theme) => ({
  button: {
    margin: theme.spacing(1),
  },
}));

const CounterComponent = (props) => {
  const { counter, counterActions } = props;
  const classes = useStyles();

  return (
    <div style={{ width: '100%' }}>
      <div className="centerTable">
        <h2>
          count={counter.value}
        </h2>
        <Button
          className={classes.button}
          variant="contained"
          color="primary"
          startIcon={<AddIcon />}
          onClick={() => counterActions.increment()}
        >
          増加
        </Button>
        <Button
          className={classes.button}
          variant="contained"
          color="secondary"
          startIcon={<RemoveIcon />}
          onClick={() => counterActions.decrement()}
        >
          減少
        </Button>
      </div>
    </div>
  );
};

CounterComponent.propTypes = {
  counter: PropTypes.shape({
    value: PropTypes.number,
  }).isRequired,
  counterActions: PropTypes.shape({
    increment: PropTypes.func,
    decrement: PropTypes.func,
  }).isRequired,
};

export default CounterComponent;

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

plugins: [
    // MiniCssExtractPluginのインスタンスを追記
    // ここで設定するfilenameは出力するファイル名
    new MiniCssExtractPlugin({
      filename: 'css/bundle.css',
    }),
  ],

module: {
    rules: [
        {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },

 optimization: {
    minimizer: [new TerserPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  context: __dirname,
  entry: [
    './src/index.jsx',
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        enforce: 'pre',
        exclude: /node_modules/,
        loader: 'eslint-loader',
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: ['babel-loader'],
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      inject: 'body',
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        eslint: {
          configFile: './.eslintrc',
        },
      },
    }),
    // MiniCssExtractPluginのインスタンスを追記
    // ここで設定するfilenameは出力するファイル名
    new MiniCssExtractPlugin({
      filename: 'css/bundle.css',
    }),
  ],
  optimization: {
    minimizer: [new TerserPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },
};

$ npm run build

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>React-Redux Boilerplate</title>
<link href="/css/bundle.css" rel="stylesheet"></head>
<body>
<div id="root"></div>
<script type="text/javascript" src="/bundle.js"></script></body>
</html>