webpack.dev.ts

import path from 'path'
import { merge } from 'webpack-merge'
import { Configuration as WebpackConfiguration } from 'webpack'
// import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server'
import baseConfig from './webpack.base'

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration
}

const host = '127.0.0.1'
const port = '8082'

// 合并公共配置,并添加开发环境配置
const devConfig: Configuration = merge(baseConfig, {
  mode: 'development', // 开发模式,打包更加快速,省了代码优化步骤
  devtool: 'eval-cheap-module-source-map',
  devServer: {
    host,
    port,
    open: true, // 是否自动打开
    compress: false, // gzip压缩,开发环境不开启，提升热更新速度
    hot: true, // 开启热更新
    historyApiFallback: true, // 解决history路由404问题
    setupExitSignals: true, // 允许在 SIGINT 和 SIGTERM 信号时关闭开发服务器和退出进程。
    static: {
      directory: path.join(__dirname, '../public') // 托管静态资源public文件夹
    },
    headers: { 'Access-Control-Allow-Origin': '*' }
  },
  plugins: [
    // new ReactRefreshWebpackPlugin() // 添加热更新插件
  ]
})

export default devConfig