const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[hash].bundle.js',
    sourceMapFilename: '[file].map',
    // 浏览器开发者工具里显示的源码模块名称
    devtoolModuleFilenameTemplate: 'webpack:///[resource-path]'
  },
  target: ['web', 'es5'], //输出文件的格式 es5
  mode: 'development',
  module: {
    rules: [{ 
      test: /\.js$/, 
      use: 'babel-loader',
      exclude: /node_modules/
    },{
      test: /.s?css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader','sass-loader']
    }],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [{
        from: path.join(__dirname, 'assets'),
        to: 'assets'
      }]
    }),
    new HtmlWebpackPlugin({ template: './index.html' })
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({exclude: /node_modules/})
    ]
  },
  devtool: 'source-map', // 配置 source-map 类型
  devServer: { // DevServer 相关的配置
    contentBase: './dist',
    hot: true
  },

  profile: true, // 是否捕捉 Webpack 构建的性能信息，用于分析什么原因导致构建性能不佳
  cache: false // 是否启用缓存提升构建速度
};