1  /**
 2   * DEVELOPMENT WEBPACK CONFIGURATION
 3   */
 4  
 5  const path = require('path');
 6  const webpack = require('webpack');
 7  const HtmlWebpackPlugin = require('html-webpack-plugin');
 8  const CircularDependencyPlugin = require('circular-dependency-plugin');
 9  
10  module.exports = require('./webpack.base.babel')({
11    mode: 'development',
12  
13    // Add hot reloading in development
14    entry: [
15      require.resolve('react-app-polyfill/ie11'),
16      'webpack-hot-middleware/client?reload=true',
17      path.join(process.cwd(), 'app/app.tsx'), // Start with js/app.js
18    ],
19  
20    // Don't use hashes in dev mode for better performance
21    output: {
22      filename: '[name].js',
23      chunkFilename: '[name].chunk.js',
24    },
25  
26    optimization: {
27      splitChunks: {
28        chunks: 'all',
29      },
30    },
31  
32    // Add development plugins
33    plugins: [
34      new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
35      new HtmlWebpackPlugin({
36        inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
37        template: 'app/index.html',
38      }),
39      new CircularDependencyPlugin({
40        exclude: /a\.js|node_modules/, // exclude node_modules
41        failOnError: false, // show a warning when there is a circular dependency
42      }),
43    ],
44  
45    tsLoaders: [
46      { loader: 'babel-loader' },
47      {
48        loader: 'ts-loader',
49        options: {
50          transpileOnly: true, // fork-ts-checker-webpack-plugin is used for type checking
51          logLevel: 'info',
52        },
53      },
54    ],
55  
56    // Emit a source map for easier debugging
57    // See https://webpack.js.org/configuration/devtool/#devtool
58    devtool: 'eval-source-map',
59  
60    performance: {
61      hints: false,
62    },
63  });