/*
 * @Author: wangdengzhi
 * @Date: 2020-08-19 15:32:32
 * @Last Modified by: Demian
 * @Last Modified time: 2020-08-23 16:30:42
 * @description: 开发环境配置，将文件打包到dist目录，使用devServer启动热更新
 * 使用theme变量切换和调试主题
 * 调试npm-link后的包
 */
const { merge } = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();
const webpack = require('webpack');

module.exports = smp.wrap(
  merge(common, {
    entry: {
      app: path.resolve(__dirname, '../../page/npm/index.tsx'),
    },
    // 防止和外部的dist目录冲突，导致和npm-link的包的dist冲突
    output: {
      filename: '[name].[hash].js',
      path: path.resolve(__dirname, '../../page/npm/dist'),
    },
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
      contentBase: path.join(__dirname, '../../page/npm/dist'),
      compress: true,
      port: 9001,
      hot: true,
    },
    plugins: [
      new webpack.DefinePlugin({
        webpack_theme: JSON.stringify('student'), // 开发环境通过指定全局变量完成主题设置
      }),
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, '../../template/index.html'),
        filename: path.resolve(__dirname, '../../page/npm/dist/index.html'),
        chunks: ['app', 'common'],
      }),
    ],
  })
);
