devtools_webpack

WebPack 打包TypeScript

前期工作：

1.初始一个package.json文件

yarn init -y

2.安装打包TS的必要依赖:

[typescript / webpack / webpack-cli /ts-loader / webpack-dev-server]

yarn add -D typescript   webpack  webpack-cli ts-loader webpack-dev-server

3.初始化ts的配置文件

tsc --init

文件目录如图

webpack.config.js

const path = require('path');

// 导出配置对象，用于webpack配置
module.exports = {
  // 指定应用程序的入口文件
  entry: './src/index.ts',
  // 配置输出选项
  output: {
    // 指定输出文件的名称
    filename: 'app.js',
    // 指定输出文件的路径
    path: path.resolve(__dirname, 'public/dist'),
        /**
     * 设置公共路径
     * 
     * 此路径用于指定构建工具生成的静态资源的根目录。
     * 它是相对服务器根目录的路径，而不是相对HTML文件的路径。
     * 例如，如果一个图片的路径被设置为'/dist/image.jpg'，那么在HTML中引用这个图片时，
     * 需要在路径前加上这个公共路径。
     * 
     * @default '/dist/'
     * @type {string}
     */
    publicPath:'/dist/'
  },
  // 配置模块规则
  module: {
    // 定义模块的加载规则
    rules: [
      // 针对.tsx文件的规则
      {
        // 使用正则表达式匹配.tsx文件
        test: /\.tsx$/,
        // 使用ts-loader处理.tsx文件
        use: 'ts-loader',
        // 排除node_modules目录下的文件
        exclude: /node_modules/
      }
    ]
  },
  // 配置模块解析的选项，以指定在导入模块时应考虑的文件扩展名
resolve: {
  // 优先尝试解析的文件扩展名列表
  // '.ts' 和 '.tsx' 用于 TypeScript 文件，'.js' 用于 JavaScript 文件
  extensions:['.ts', '.tsx', '.js']
}
}