componentExample.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import styles from './index.sass';

class TextField extends Component {
    render () {
        const { type, placeholder, ...rest} = this.props;
        return (
            <input 
                type={type} 
                className={styles.textField}
                placeholder={placeholder} 
                {...rest}
            />
        );
    }
}

TextField.propTypes = {
    type: PropTypes.oneOf(['text', 'password']),
    placeholder: PropTypes.string
};

TextField.defaultProps = {
    type: 'text',
    placeholder: ''
};

export default TextField;

index.sass

.textField
    width: 100%
    min-width: 80px
    padding: 5px 15px
    border-radius: 5px
    border: 1px solid #928e8e
    outline: none

webpack.config.js

const path = require('path');

const config = require('./config');
//импортирую конфиг с места где определяю продакшн и дев версия сборки
const webpackEnvConfig = require('./webpack');

const webpackConfig = {
  entry: webpackEnvConfig.entry,
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devtool: 'eval-cheap-module-source-map',
  resolve: {
    extensions: ['.js', '.jsx']
  },
  plugins: webpackEnvConfig.plugins,
  module:{
    rules: webpackEnvConfig.rules
  },
	resolveLoader: {
		moduleExtensions: ['-loader']
	},
  devServer:{
    historyApiFallback: true,
    hot: true,
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: config.devServer.port,
    open: true,
    openPage: '',
    inline: true,
    stats: 'minimal'
  }
};

module.exports = webpackConfig;

webpackEnvConfig.dev.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
const config = require('./../config');

module.exports = {
    entry: [
        'react-hot-loader/patch',
        `webpack-dev-server/client?http://${config.devServer.host}:${config.devServer.port}`,
        'webpack/hot/only-dev-server',
        './src/index.js'
    ],
    rules: [
        {
            enforce: 'pre',
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: 'eslint-loader'
        },
        {
            test: (/\.(scss|sass)$/), 
            use: [
                'style-loader',    
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                        sourceMap: true
                    }
                },
                'sass-loader'
            ]
        },
        {
            test: (/\.(js|jsx)$/),
            exclude: /node_modules/,
            use: 'babel-loader'
        },
        {
            test: /\.json$/,
            use: 'json-loader'
        },
        {
            test: /\.(jpe?g|png|gif|svg|ico)$/i,
            use: 'file-loader?name=[name].[ext]'
        },
        { 
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            loader: 'url-loader?limit=100000'
        }
    ],
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new DirectoryNamedWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new HtmlWebpackPlugin({
            title: 'Project',
            template: path.resolve(__dirname, '../assets/views/index-template.ejs'),
            filename: 'index.html',
            // hash: true
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ]
}

webpackEnvConfig.prod.js

const path = require('path');
const webpack = require('webpack');
const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: [
        './src/index.js',
    ],
    rules: [
        {
            test: /\.(scss|sass)$/,
            exclude: [/node_modules/,/production/],
            loader: ExtractTextPlugin.extract({
                fallback: 'style',
                use: ['css','sass']
            })  
        },
        {
            test: (/\.(js|jsx)$/),
            exclude: /node_modules/,
            use: 'babel-loader'
        },
        {
            test: /\.json$/,
            use: 'json-loader'
        },
        {
            test: /\.(jpe?g|png|gif|svg|ico)$/i,
            use: 'file-loader?name=[name].[ext]'
        },
        { 
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            loader: 'url-loader?limit=100000'
        }
    ],
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new DirectoryNamedWebpackPlugin(),
        new webpack.NamedModulesPlugin(),
        new ExtractTextPlugin('style.css'),
        new HtmlWebpackPlugin({
            title: 'Project',
            template: path.resolve(__dirname, '../assets/views/index-template.ejs'),
            filename: 'index.html',
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true
            }
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ]
}