使用Webpack配置TypeScript项目脚手架

作者：拾光时间：2026-10-25 03:45:45浏览：643

本文详细介绍如何使用Webpack从零搭建TypeScript项目的开发环境。涵盖初始化项目、安装核心依赖（如webpack-cli、ts-loader、babel等）、配置webpack.config.js以及编写npm脚本实现自动打包与热更新。通过具体步骤解决版本兼容问题，帮助开发者快速构建高效的前端构建流程。

初始化项目环境

首先，创建项目所需的文件夹。

初始目录结构如下：dabaots

执行 npm init -y命令以生成package.json文件。

此时的目录结构变为： dabaots dabaots / package.json

安装核心依赖

接下来，在开发环境中安装必要的工具。


npm i -D

需要安装的依赖包括： webpack（打包代码的核心工具） webpack-cli（webpack的命令行工具） typescript（编写TypeScript所需的核心包） ts-loader（用于将webpack和TypeScript进行整合） html-webpack-plugin（自动生成HTML文件的webpack插件） webpack-dev-server（实现无需手动刷新即可更新页面） clean-webpack-plugin（在每次打包上线前自动清空dist目录并重新生成最新文件） @babel/core、@babel/preset-env、babel-loader以及core-js（用于安装Babel转换工具，根据目标环境将代码转换为兼容版本）

可能会遇到的小问题：如果下载的依赖包webpack-dev-server版本与当前浏览器不兼容，建议降低插件版本或将谷歌浏览器升级至最新版本，否则可能会出现Cannot GET /chrome.exe错误。

配置Webpack与脚本

随后，创建webpack.config.js文件进行详细配置。

此时的目录结构变为： dabaots dabaots / package.json dabaots / webpack.config.js


// 引入一个包
const path = require("path")

//引入自动生成html的包
const HtmlWebpackPlugin = require("html-webpack-plugin")

//引入更新dist文件的插件
const {CleanWebpackPlugin} = require("clean-webpack-plugin")

// webpack中的所有的配置信息都应该写入moudle.exports中
module.exports={
    // 指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在目录
    output:{
        // 指定打包文件的目录
        path:path.resolve(__dirname,"dist"),
        // 指定打包后文件的文件
        filename:"bundle.js",
        //编译的时候不使用箭头函数
        environment: {
            arrowFunction: false
        }
    },
    
    //webpack打包时要使用到module这个模块
    module:{
        // 指定要加载的规则
        rules:[{
            // test指定的是规则生效的文件
            test:/\.ts$/,
            // use是要使用的loader
            //配置babel
            use:[
                {//指定加载器
                    loader:"babel-loader",
                    options:{
                        //设置预定义环境
                        presets:[
                            [
                                //指定环境的插件
                                "@babel/preset-env",
                                //配置信息
                                {
                                    //要兼容的浏览器
                                    targets:{
                                        "chrome":"88"
                                    },
                                    // 指定corejs的版本
                                    "corejs":"3",
                                    //表示按需加载
                                    "useBuiltIns":"usage"
                                }
                            ]
                        ]
                    }
                },
                'ts-loader'
            ],
            //设置不被打包上传的文件
            exclude:["/node_modules/"]
        }]
    },
    
    // 配置webpack插件
    plugins:[
        new HtmlWebpackPlugin({
            // 自定义html模板地址
            template:"./src/index.html"
        }),
        //每次打包上线之前都会自动清空dist内的文件如何重新生成最新的文件
        new CleanWebpackPlugin()
    ],
    
    resolve:{
        //解决在ts文件内部单独引入其他ts包时候报错的问题
        extensions:['.ts','.js']
    }
}

最后，在package.json文件中写入打包及运行相关的脚本命令。

初始化项目环境