/** * DEVELOPMENT WEBPACK CONFIGURATION */ const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CircularDependencyPlugin = require('circular-dependency-plugin'); module.exports = require('./webpack.base.babel')({ mode: 'development', // Add hot reloading in development entry: [ require.resolve('react-app-polyfill/ie11'), 'webpack-hot-middleware/client?reload=true', path.join(process.cwd(), 'src/app.js'), // Start with js/app.js ], // Don't use hashes in dev mode for better performance output: { filename: '[name].js', chunkFilename: '[name].chunk.js', }, optimization: { splitChunks: { chunks: 'all', }, }, // Add development plugins plugins: [ new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading new HtmlWebpackPlugin({ inject: true, // Inject all files that are generated by webpack, e.g. bundle.js template: 'src/index.html', }), new CircularDependencyPlugin({ exclude: /a\.js|node_modules/, // exclude node_modules failOnError: false, // show a warning when there is a circular dependency }), ], devtool: 'cheap-module-source-map', node: { setImmediate: false, process: 'mock', dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' }, performance: { hints: false, }, });