ts08_使用webpack打包ts文件

1.新建项目使用npm init -y在根目录生成packge.json文件，管理包

2.使用npm安装webpack相关工具 npm i -D webpack webpack-cli typescript ts-loader,ts-loader起到一个整合ts和webpack的作用

3.配置webpack.cofig.js文件

//引入path模块，管理路径
import { Configuration } from 'webpack';
/**
 * @type {Configuration}
 */
const path = require('path');
//webpack中的所有配置信息都应写在module.exports中
module.exports = {
    //指定入口文件
    entry: './src/index.ts',
    //指定打包文件所在目录
    output: {
        //指定打包文件的目录
        // path:'./dist'
        path: path.resolve(__dirname, 'dist'),
        //打包后文件的文件名
        filename: "bundle.js"
    },
    //指定webpack打包时要使用的模块
    module: {
        //指定加载的规则
        rules: [
            {
                //指定规则生效的文件
                test:/\.ts$/,
                //要是用的loader
                use:"ts-loader",
                //指定要排除的文件
                exclude:/node_modules/,
 
            }
        ]
    }
 
}

　　4.配置tscofig.json文件

{
    "compilerOptions": {
        "module": "ES2015",
        "target": "ES6",
        // "sourceMap": false,
        "strict": true
    },
    "exclude": [
        "node_modules"
    ]
}

　　5.在package.json中加上打包脚本

{
  "name": "part3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack" //打包脚本
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}