const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 样式隔离
const { CleanWebpackPlugin }= require('clean-webpack-plugin'); //清除插件
const {merge} = require('webpack-merge')
const common = require('./webpack.config')

module.exports = merge(common, {
  mode: 'production', // 指定构建模式

  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    hot: true,  // 热加载的配置
    port: 9000,
  },
  plugins: [ 
      new MiniCssExtractPlugin({
        filename: '[name].css'
      }),
      new CleanWebpackPlugin(),
      // new BundleAnalyzerPlugin()
  ],
  // 使用SplitChunksPlugin不需要安装任何依赖，只需在 webpack.config.js 中的 config对象添加 optimization 属性：
  optimization: {
    splitChunks: {
      chunks: 'initial',
      automaticNameDelimiter: '.',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: 1
        }
      }
    },
    runtimeChunk: {
      name: entrypoint => `manifest.${entrypoint.name}`
    }
  }
}
)