const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 本都服务
const autoprefixer = require('autoprefixer');  // 自动加前缀，处理兼容性问题
const webpack = require('webpack')
const {merge} = require('webpack-merge')
const common = require('./webpack.config')
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 样式隔离


  // 获取 package.json 中的 name 字段值
  console.log(process.env.npm_package_name)
  // 获取 package.json 中的 version 字段值
  console.log(process.env.npm_package_version)
  console.log(process.env)
  


module.exports = merge(common, 
{
  mode: 'development', // 指定构建模式
  devtool: 'inline-source-map', // 加入devtool配置,做相关的错误映射
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    open: true,  // 自动打开浏览器
    hot: true,  // 热加载的配置
    port: 9002,
    liveReload: true
  },

  plugins: [ 
      // new webpack.ProgressPlugin(),  // 百分比显示
      new webpack.HotModuleReplacementPlugin(),  // 热加载的配置 要加上hot:true
      new MiniCssExtractPlugin({
        filename: '[name].css'
      }),
  ],
  optimization: {
    runtimeChunk: 'single',
    moduleIds: 'named',  //配置hot加载，替代webpack4的  new webpack.NamedModulesPlugin(),
  }
}
)