webpack.config.js文件配置选项

// 引入一个包
const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
// webpack 里所有的配置信息
module.exports = {
  // entry 指定入口文件o
  entry: "./src/index.ts",
  // output 指定打包文件所在目录
  output: {
    // path 指定文件所在的目录
    path: path.resolve(__dirname, "dist"),
    // filename 打包文件的文件名
    filename: "bundle.js",
    // 告诉webpack不使用箭头函数
    environment: {
      arrowFunction: false,
    },
  },
  // module 指定webpack打包时需要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      // test 指定规则生效的文件
      {
        test: /\.ts$/,
        // user 要使用的loader加载器
        use: [
          // 配置loader
          {
            // loader 指定加载器名称
            loader: "babel-loader",
            options: {
              // 设置预定义的环境，需要在哪些浏览器中运行
              presets: [
                [
                  // 指定环境插件
                  "@babel/preset-env",
                  // 配置信息
                  {
                    // 需要兼容的目标浏览器
                    targets: {
                      // 谷歌浏览器需要兼容到的版本：兼容到88版本
                      chrome: "58",
                      ie: "11",
                    },
                    // corejs的版本
                    corejs: "2",
                    // 使用corejs的方式：usage 按需加载
                    useBuiltIns: "usage",
                  },
                ],
              ],
            },
          },

          "ts-loader",
        ],
        // 要排除的文件
        exclude: /node_modules/,
      },
    ],
  },
  mode: "development",
  // 配置webpack插件
  plugins: [
    // 自动清除旧的打包文件
    new CleanWebpackPlugin(),
    // 自动生成html文件，并引入相关资源
    new HTMLWebpackPlugin({
      // "title":"这是我自定义的title"
      template: "./src/index.html",
    }),
  ],
  // 用来设置引用模块，哪些文件可以作为模块被引用
  resolve: {
    extensions: [".ts", ".js"],
  },
};