// 开发环境优化
// 1.优化打包速度
// 2.优化调式功能
// 3.hrm 热更新

// 生产环境性能优化
// 1.优化打包速度
// 2.代码性能
// 3.

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const commonCssLoader = [
  'style-loader',
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        plugins: [
          'postcss-preset-env',
        ],
      },
    },
  },
];

module.exports = {
  entry: ['./src/index.js', './src/index.html'],
  output: {
    filename: 'js/built.js', // 输出的文件名
    path: resolve(__dirname, 'build'), // 输出的路径
  },
  // 各种源代码的调式
  // source-map 外部
  // inline-source-map 内联 只生成一个
  // hidden-source-map 外部
  // eval-source-map 内部 每个文件一个
  // nosources-source-map 外部
  // cheap-source-map 外部

  // 开发环境最好用 eval-source-map / eval-cheap-module-source-map
  devtool: 'source-map',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    port: 3000,
    open: true,
    hot: true, // 开启热更新  css更新要style-loader才行
    // 因为style-loader 内部实现了 这个功能
    // js文件没有 热更新功能
    // if (module.hot) {
    //   // 这样写就是监听printjs文件的变化  一旦发生变化  其他模块不会重新打包构建
    //   // 入口文件没办法热更新
    //   module.hot.accept('./print.js', () => {
    //     print();
    //   });
    // }
    // html没有热更新了  要刷新才行
    //    解决办法是 在entry 添加入口
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
        options: {
          // 自动修复
          fix: true,
        },
        // 先执行eslint
        enforce: 'pre',
      },
      {
        // 提示构建速度  每一个只会匹配一次
        oneOf: [
          {
            test: /\.css$/,
            use: [...commonCssLoader],
          },
          {
            test: /\.less$/,
            use: [
              ...commonCssLoader,
              'less-loader',
            ],
          },

          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: [['@babel/preset-env', {
                // 按需加载
                useBuiltIns: 'usage',
                // 指定corejs版本
                corejs: {
                  version: 3,
                },
                // 兼容性做到那个浏览器
                targets: {
                  ie: '9',
                },
              }]],
            },
          },
          {
            test: /\.(jpg|png|gif)$/,
            loader: 'url-loader',
            options: {
              limit: 8 * 64,
              esModule: false,
              name: '[hash:10].[ext]',
              outputPath: 'imgs',
            },
          },
          {
            test: /\.(eot|svg|ttf|woff|woff2)$/,
            loader: 'file-loader',
            options: {
              outputPath: 'font',
            },
          },
          {
            test: /\.html$/,
            // 处理html img图片  负责引入图片
            loader: 'html-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        removeTagWhitespace: true,
        removeComments: true,
      },
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css',
    }),
    new OptimizeCssAssetsWebpackPlugin(),
  ],
  mode: 'production',
};