Webpack config files

package.json dependencies

"devDependencies": {
    "@babel/cli": "^7.0.0-beta.52",
    "@babel/core": "^7.0.0-beta.52",
    "@babel/plugin-transform-modules-amd": "^7.0.0-beta.52",
    "@babel/plugin-transform-regenerator": "^7.0.0-beta.52",
    "@babel/plugin-transform-runtime": "^7.0.0-beta.52",
    "@babel/polyfill": "^7.0.0-beta.52",
    "@babel/preset-env": "^7.0.0-beta.52",
    "@babel/preset-es2015": "^7.0.0-beta.52",
    "@babel/preset-stage-0": "^7.0.0-beta.52",
    "@babel/register": "^7.0.0-beta.52",
    "@babel/runtime": "^7.0.0-beta.52",
    "autoprefixer": "^8.6.5",
    "babel-loader": "^8.0.0-beta.4",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "eslint": "^5.1.0",
    "eslint-config-standard": "^11.0.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.8.0",
    "eslint-plugin-standard": "^3.1.0",
    "file-loader": "^1.1.11",
    "gulp": "gulpjs/gulp#4.0",
    "gulp4-ps-tasks": "^0.1.5",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.1",
    "pkginfo": "^0.4.1",
    "postcss": "^6.0.23",
    "postcss-autoreset": "^2.0.2",
    "postcss-loader": "^2.1.5",
    "postcss-modules": "^1.1.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8",
    "webpack-merge": "^4.1.3",
    "write-file-webpack-plugin": "^4.3.2"
  },

webpack.common.babel.js

import path from 'path';
import webpack from 'webpack';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import WriteFileWebpackPlugin from 'write-file-webpack-plugin';
import pkgInfo from 'pkginfo';

pkgInfo(module);

const config = {
    target: 'web',
    node: {
        fs: 'empty'
    },
    entry: {
       index: `./src/scripts/${module.exports.name}/js/index.js`
    },
    performance: {
        hints: false
    },
    externals: {
        jquery: 'jQuery'
    },
    optimization: {
        splitChunks: {
            name: true,
            cacheGroups: {
                index: {
                    test: /static\/js/
                },
                vendors: {
                    test: /([\\/]node_modules[\\/])/,
                    name: 'vendor',
                    chunks: 'all'
                }
            }
        }
    },
    module: {
        rules: [
            {
                test: /\.(ttf|eot|woff|woff2)/,
                loader: 'file-loader',
                options: {
                    name: `images/${module.exports.name}/fonts/[name].[ext]`,
                }
            },
            {
                test: /\.(png|svg|gif)$/,
                loader: 'file-loader',
                exclude: [
                    '/images/img/guardian.png'
                ],
                options: {
                    name: `images/${module.exports.name}/[name].[ext]`,
                },
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.(html)$/,
                use: {
                  loader: 'html-loader'
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env', 
                        ],
                        plugins: [
                            '@babel/plugin-transform-modules-amd',
                            '@babel/plugin-transform-regenerator',
                            '@babel/plugin-transform-runtime'
                        ] 
                    }
                }
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            createDayLabel: "jquery",
            createWeekdayLabel: "jquery"
        }),
    ],
    resolve: {
        modules: ['src', 'node_modules'],
        extensions: ['.js', '.mjs']
    }
};

export default config;

webpack.dev.babel.js

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

import common from './webpack.common.babel';

pkgInfo(module);

export default merge(common, {
    devtool: 'inline-source-map',
    mode: 'development',
    output: {
        filename: `scripts/${module.exports.name}/js/[name].js`,
        path: path.resolve(__dirname, 'dist/web_root'),
        publicPath: 'http://localhost:8081',
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    'css-hot-loader',
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            includePaths: [
                                path.resolve(__dirname, 'node_modules/')
                            ]
                        }
                    },
                    'css-loader',
                    'sass-loader'
                ]
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'scripts/student-profile/css/[name].css'
        }),
        new webpack.NamedModulesPlugin()
    ],
    serve: {
        dev: {
            headers: {
                'Access-Control-Allow-Origin': '*'
            }
        },
        host: '0.0.0.0',
        port: '8081',
        clipboard: false,
        hot: {
            port: '8500',
            host: {
                client: 'localhost',
                server: '0.0.0.0'
            }
        }
    }
});