webpack.config.babel.js

import path from 'path';
import webpack from 'webpack';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';

const config = {
    target: 'web',
    node: {
        fs: 'empty'
    },
    performance: {
        hints: false
    },
    mode: 'development',
    optimization: {
        splitChunks: {
            minSize: 30000,
            cacheGroups: {
                app: {
                    test: /static\/js/
                },
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                }
            }
        }
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'static/bundles')
    },
    externals: {
        jquery: 'jQuery'
    },
    entry: {
        app: './static/js/app.js'
    },
    module: {
        rules: [
            {
                test: /\.(css|scss|sass)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(ttf|eot|woff|woff2)/,
                loader: 'file-loader',
                options:
                    {
                        name: 'fonts/[name].[ext]',
                    }
            },
            {
                test: /\.(png|svg|gif)$/,
                loader:
                    'file-loader',
                options:
                    {
                        name: 'images/[name].[ext]',
                    },
            },
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
        }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: '[name].bundle.css',
            chunkFilename: '[id].css'
        }),
        new webpack.NamedModulesPlugin()
    ],
    resolve: {
        modules: [
            './node_modules'
        ]
    },
    serve: {
        host: {
            client: '192.168.64.7',
            server: '0.0.0.0'
        },
        port: '8500'
    }
};