// 多文件入口webpack配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

const mode = process.env.NODE_ENV
// MiniCssExtractPlugin.loader是把css文件抽离出来
// style-loader是把css文件打包进js文件中
const commonCssLoader = [
  mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
  'css-loader',
  'postcss-loader'
]
// tree shaking，去掉无用的代码，满足1：是pruduction模式，2：用es6模块化
// package.json中  "sideEffects": [ "src/*.css","src/*.less","src/*.sass"]，表示不对这些文件进行tree shaking
// 经过测试src中的css文件tree shaking less,css,sass文件无法打包
// 代码调试映射
// 生产环境要隐藏全部源代码用nosources-source-map，不隐藏构建后的代码用hidden-source-map'
const devtool = mode === 'production' ? 'source-map' : 'eval-source-map'
module.exports = {
  mode,
  entry: {
    'statics/js/common': './src/index.js',
    'statics/js/demo1': './src/statics/js/demo1',
    'statics/js/demo2': './src/statics/js/demo2'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: mode === 'production' ? '[name].chunk[contenthash:8].js' : '[name].js'
  },
  module: {
    rules: [
      {
        // 语法检查eslint
        test: /\.js$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
        options: {
          // 自动修复语法错误
          fix: true
        }
      },
      {
        // oneOf里面的loader只会匹配一个
        // 提高打包速度
        oneOf: [
          {
            // 处理css文件
            test: /\.css$/,
            use: [...commonCssLoader]
          },
          {
            // 处理less文件
            test: /\.less$/,
            use: [...commonCssLoader, 'less-loader']
          },
          {
            // 处理css中图片
            test: /\.jpg|png|bmp|jpeg|gif|svg$/,
            loader: 'url-loader',
            options: {
              // 8kb，小于8kb的会转换成base64
              limit: 8 * 1024,
              esModule: false,
              neme: mode === 'production' ? '[contenthash:8].[ext]' : '[hash:8].[ext]',
              outputPath: 'statics/images'
            }
          },
          {
            // 处理css中字体文件
            test: /\.ttf|eot|woff|woff2$/,
            loader: 'url-loader',
            options: {
              // 8kb，小于8kb的会转换成base64
              limit: 8 * 1024,
              esModule: false,
              neme: mode === 'production' ? '[contenthash:8].[ext]' : '[hash:8].[ext]',
              outputPath: 'statics/fonts'
            }
          },
          {
            // 处理html中的图片,html-loader和HtmlWebpackPlugin之间在压缩上有冲突
            // 如果不想要html压缩，需要把这个loader注释掉
            // 如果还想要处理html中的图片，参考：https://blog.csdn.net/kai_vin/article/details/88722662
            test: /\.html$/,
            loader: 'html-loader'
          },
          {
            // es6+语法转化成es
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'demo1.html',
      template: path.join(__dirname, './src/demo1.html'),
      //不压缩html文件
      minify: false,
      // 压缩html文件
      // minify: {
      //   collapseWhitespace: true,
      //   removeComments: true
      // }
      chunks: ['statics/js/common', 'statics/js/demo1']
    }),
    new HtmlWebpackPlugin({
      filename: 'demo2.html',
      template: path.join(__dirname, './src/demo2.html'),
      chunks: ['statics/js/common', 'statics/js/demo2']
    }),
    new MiniCssExtractPlugin({
      filename: 'statics/css/chunk[contenthash:8].css'
    }),
    // 压缩css文件
    new OptimizeCssAssetsWebpackPlugin()
  ],
  devServer: {
    // 配置网站根目录
    contentBase: path.join(__dirname, 'src'),
    compress: true,
    port: 9000,
    open: true,
    // 开启HRM功能：模块热替换（开发环境中只重新打包更新的模块，不会打包所有的模块）
    // index.html文件如果更新，重启下webpack-dev-server就可以了
    hot: true
  },
  devtool,
  // 把node_modules中的引用模块单独打包
  // 可以自定分析多入口文件中有没有公用的模块，如果有就打包成单个，不会打包为多个重复的
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
}