webpack简单配置

html-webpack-plugin

安装：npm i -D html-webpack-plugin

Webpack 的一个核心插件，主要用于简化 HTML 文件的创建，并自动将打包后的 JavaScript、CSS 等资源注入到 HTML 中。它的主要作用包括：

1. 自动生成html文件
2. 自动注入打包后的资源
3. 支持模版自定义html
4. 多页面应用支持
5. 压缩Html

webpack-dev-server

安装 npm i -D webpack-dev-server

是 Webpack 官方提供的开发服务器工具，主要用于本地开发调试。它通过内置的 Express 服务器，提供实时重新加载（Live Reloading）、热模块替换（HMR）等功能，极大提升开发效率。作用

1. 启动本地开发服务器
2. 实时重新加载
3. 热模块替代
4. 代理api

clean-webpack-plugin

安装 npm i -D clean-webpack-plugin

clean-webpack-plugin 是 Webpack 的一个实用插件，主要用于在每次构建前自动清理输出目录（如 dist 文件夹），避免旧文件残留导致的问题。作用

1. 自动清空输出目录
2. 选择性清理
3. 安全可靠

new CleanWebpackPlugin({
  dry: false,               // 默认false，true时模拟删除（不实际删除文件）
  verbose: true,            // 是否在控制台输出删除日志
  cleanStaleWebpackAssets: false, // 是否在重建后删除未使用的资源
  protectWebpackAssets: true,     // 是否保护当前构建中的文件（避免误删）
  cleanOnceBeforeBuildPatterns: ['**/*'], // 要删除的文件匹配模式
  dangerouslyAllowCleanPatternsOutsideProject: false, // 禁止删除项目外的文件（安全保护）
});

有关babel的包

npm i-D @babel/core @babel/preset-env babel-loader core-js

这些包是 Babel 工具链的核心组成部分，主要用于将现代 JavaScript 代码（ES6+）转换为兼容旧浏览器的代码。以下是它们各自的作用和协作关系：

1. @babel/core ：Babel的核心编译引擎，负责代码解析，转换和生成
2. @babel/preset-env: 智能预设，根据目标浏览器或运行环境自动确认需要的转换规则和polyfill,主要目的是将ES6+语法转换为ES5
3. babel-loader: Webpack 的加载器（Loader），用于在打包时调用 Babel 转换代码。主要作用：将 .js 或 .jsx 文件交给 @babel/core 处理。
4. core-js:提供 JavaScript 标准库的 polyfill（如 Promise、Array.from、Object.assign）。主要作用通过 @babel/preset-env 的 useBuiltIns 选项按需注入。兼容旧浏览器缺失的 API。
   简易版webpack配置

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

// webpack中所有的配置信息都要写在module.export中
module.exports = {
  mode: 'development',
  entry: "./src/index.ts", // 指定入口文件
  output: {
    path: path.resolve(__dirname, 'dist'),// 指定打包文件所在的目录
    filename: 'bundle.js', // 打包后文件的文件名
    // 告诉webpack不使用箭头函数
    environment:{
      arrowFunction: false
    }
  },
  // 指定webpack打包时要是用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定的是规则生效的文件
        test: /\.ts$/,
        use: [
          // 配置babel加载器
          {
            // 指定加载器
            loader: "babel-loader",
            // babel的配置
            options: {
              presets: [
                [
                  // 指定环境插件
                  "@babel/preset-env",
                  // 配置信息
                  {
                    // 要兼容的目标浏览器
                    targets: '> 0.25%, not dead',
                    "useBuiltIns": "usage", // 使用corejs的方式 "usage"表示按需加载
                    // 指定core-js的版本
                    "corejs": 3
                  }
                ]
              ]
            }
          },
          'ts-loader'
        ], // 要使用的loader
        exclude: /node_modules/ // 要排除的文件
      }
    ]
  },
  // 配置webpack插件
  plugins: [
    new HtmlWebpackPlugin({
      // title: '自定义标题'
      template: "./src/1.html" // 自定义html的模版
    }),
    new CleanWebpackPlugin()
  ],
  // 用来设置引用模块
  resolve: {
    extensions: ['.ts, .js']
  }
}