base config with description

webpack.base.js

//base


const path = require('path');
const webpack = require('webpack');

const QUERY = {
    name: '[name].[hash].[ext]'
};

module.exports = {
    resolve: {
        modules: [
            path.join(process.cwd(), 'node_modules')  //резолвим пути экспорта в node_modules https://webpack.js.org/configuration/resolve/#resolvemodules
        ],
        extensions: ['.js', '.jsx'] // порядок резолва
    },
    module: {
        rules: [
		//установка loaderов для расширений
            {
                test: /\.jsx?$/,
                loader: require.resolve('babel-loader'),   //transpiling JavaScript files using Babel
                exclude: /node_modules/
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: require.resolve('file-loader'),   //resolves import/require() on a file into a url and emits the file into the output directory
                options: Object.assign({ mimetype: 'application/font-woff' }, QUERY)
            },
            {
                test: /\.(ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: require.resolve('file-loader'),
                options: Object.assign({ mimetype: 'application/octet-stream' }, QUERY)  //mimetype and name params
            },
            {
                test: /\.(eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: require.resolve('file-loader')
            },
            {
                test: /\.(jpe?g)$/i,
                loader: require.resolve('file-loader'),
                options: Object.assign({ mimetype: 'image/jpeg' }, QUERY)
            },
            {
                test: /\.(gif)$/i,
                loader: require.resolve('file-loader'),
                options: Object.assign({ mimetype: 'image/gif' }, QUERY)
            },
            {
                test: /\.(png)$/i,
                loader: require.resolve('file-loader'),
                options: Object.assign({ mimetype: 'image/png' }, QUERY)
            },
            {
                test: /\.(svg)$/i,
                loader: require.resolve('file-loader'),
                options: Object.assign({ mimetype: 'image/svg+xml' }, QUERY)
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            React: 'react'
        }), // можно не делать импорт react, т.к. он будет доступен 
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
            'process.HOT_LOADER': process.env.HOT_LOADER
        }) //установка глобальных значений, которые можно будет юзать при compile
    ]
};