const path = require('path');
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
  mode: 'development',

  // 指定入口文件
  entry: './src/index.ts',
  // 指定打包文件所在目录
  output: {
    clean: true,
    iife: true,

    // 指定打包文件的目录
    path: path.resolve(__dirname, 'dist'),
    // 打包后文件的文件
    filename: 'bundle.js',

    // 尝试打包为一个库
    library: {
      name: 'MyLibrary',
      type: 'commonjs',
    },

    // 告诉webpack不使用箭头
    // 默认打包后是一个立即执行的箭头函数，在IE 11中也是无法执行的！
    // 加上下面的配置，可以在webpack打包时，最外层不再是箭头函数
    // webpack新版本已经不想兼容IE了！233
    // 现在期望生成一个iife
    // environment: {
    //   arrowFunction: false,
    // },
  },

  // 指定webpack打包时要使用模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定的是规则生效的文件
        test: /\.ts$/,
        // 要排除的文件
        exclude: /node-modules/,
        // 要使用的loader
        // Webpack在加载时是"从后向前"加载！
        use: [
          // 配置babel
          { loader: 'babel-loader' },
          { loader: 'ts-loader' },
        ],
      },

      // 设置less文件的处理
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 引入postcss
          // 类似于babel，把css语法转换兼容旧版浏览器的语法
          'postcss-loader',
          'less-loader',
        ],
      },
    ],
  },

  // 配置Webpack插件
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      title: '网页的title目前由HTMLWebpackPlugin实现',
      template: './src/template/index.html',
    }),
  ],
  // 用来设置引用模块
  resolve: {
    extensions: ['.ts', '.js'],
  },
};