text: const { merge } = require('webpack-merge')
  const paths = require('./paths')
  
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  
  const common = require('./webpack.common')
  
  module.exports = merge(common, {
    // Set the mode to development or production
    mode: 'development',
  
    // Control how source maps are generated
    devtool: 'inline-source-map',
  
    plugins: [
      // Generates an HTML file from a template
      // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
      new HtmlWebpackPlugin({
        template: paths.src + '/template/index.html', // template file
        filename: 'index.html', // output file
      }),
    ],
  
    // Spin up a server for quick development
    devServer: {
      historyApiFallback: true,
      open: true,
      compress: true,
      hot: true,
      port: 8080,
    },
  
    module: {
      rules: [
        // Styles: Inject CSS into the head with source maps
        {
          test: /\.(sass|scss|css)$/,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: { sourceMap: true, importLoaders: 1, modules: false },
            },
            { loader: 'postcss-loader', options: { sourceMap: true } },
            { loader: 'sass-loader', options: { sourceMap: true } },
          ],
        },
      ],
    },
  })
  