webpack.dev.js

//dev

const webpack = require('webpack');
const path = require('path');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');


module.exports = {
    devtool: 'inline-eval-source-map',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    require.resolve('style-loader'), // Inject CSS into the DOM.
                    require.resolve('css-loader'),  //  interprets @import and url() like import/require() and will resolve them.
                    require.resolve('postcss-loader') // loader for postcss
                ]
            }
        ]
    },
    plugins: [
        new CaseSensitivePathsPlugin(), //для правильного определения путей модулей (независимо от ОС)
        new WatchMissingNodeModulesPlugin(path.join(process.cwd(), 'node_modules')), //ensures npm install <library> forces a project rebuild
        new webpack.NamedModulesPlugin() //улучшает внешний вид имени модуля при Hot Module Replacement, который обновляет только изменившиеся части сборки
    ]
};