https://westside-consulting.blogspot.com/2017/10/making-friends-with-webpack.html

webpack.config.js

const path = require('path')

module.exports = {
    target: 'web',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'dist',
        library: 'Alc',
        libraryTarget: 'umd',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json'],
    },
    module: {
        rules: [
            {
                test: /\.js[x]?$/,
                include: [
                    path.resolve(__dirname, 'src'),
                    path.resolve(__dirname, 'demo'),
                ],
                exclude: new RegExp('node_modules/'),
                use: {
                    loader: 'babel-loader',
                },
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]'
                    },
                },
            },
        ],
    },
}

webpack.dev.js

const path = require('path')
const merge = require('webpack-merge')
const util = require('util')

const config = merge(require('./webpack.config.js'), {
    entry: {
        app: ['./demo/index.jsx']
    },
    devServer: {
        contentBase: './demo/',
    },
    devtool: "eval-source-map",
})
console.log(util.inspect(config, false, null))
module.exports = config

webpack.prod.js

const path = require('path')
const merge = require('webpack-merge')
const node_externals = require('webpack-node-externals')
const util = require('util')

const node_modules_pattern = new RegExp('node_modules/')
const loader_pattern = new RegExp('-loader')

const config = merge(require('./webpack.config.js'), {
    entry: {
        app: ['./src/index.jsx']
    },
    devtool: "source-map",
    externals: [node_externals(),]
})

console.log(util.inspect(config, false, null))
module.exports = config

This webpack config is for a large private React component that I want to consume in another project. To get it to work, I had to make sure that the css-loader, scss-loader, and file-loader were all categorized in package.json as unconditional dependencies, so that the project that consumes this component would install them as dependencies and be able to resolve the require() arguments.

See https://westside-consulting.blogspot.com/2017/10/making-friends-with-webpack.html