homepage/config/webpack.dev.js

const { merge } = require('webpack-merge')

const common = require('./webpack.common')
const paths = require('./paths')
const path = require('path');

module.exports = merge(common, {
  // Set the mode to development or production
  mode: 'development',

  // Where webpack outputs the assets and bundles
  output: {
    path: path.resolve('./assets'),
    filename: '[name].bundle.js',
    publicPath: '/assets/',
  },

  // Control how source maps are generated
  devtool: 'inline-source-map',

  // Spin up a server for quick development
  devServer: {
    static: {
      directory: paths.build
    },
    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 } },
        ],
      },
    ],
  },
})