使用Webpack打包TS代码

一、安装相关依赖

npm i -D webpack webpack-cli typescript ts-loader

二、在webpack.config.js中配置信息 

在项目目录下创建webpack.config.js文件，并编写如下配置信息

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

三、在tsconfig.json中配置信息 

在项目目录下创建webpack.config.js文件，并编写配置信息

{
    "compilerOptions": {
        "module": "ES2015",
        "target": "ES2015",
        "strict": true
    }
}

四、使用Webpack打包文件

在控制台中输入如下指定对代码进行Webpack打包

npx webpack

 

打包完成后就会出现dist目录