text: const merge = require('webpack-merge');
  const common = require('./webpack.config.js');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  module.exports = merge(common, {
    mode: 'development',
    plugins: [
      new CleanWebpackPlugin(['dist']),
      //  you should know that the HtmlWebpackPlugin by default will generate its own index.html
      new HtmlWebpackPlugin({
        template: './index.html',
        title: 'x-spreadsheet',
      }),
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: '[name].[contenthash].css',
        // chunkFilename: devMode ? '[id].[hash].css' : '[id].css',
      }),
    ],
    output: {
      filename: '[name].[contenthash].js',
    },
    devtool: 'inline-source-map',
    devServer: {
      host: '0.0.0.0',
      contentBase: './dist',
    },
  });
  