webpack打包ts代码时的各文件配置

杨乐多dreamer

已于 2022-05-30 21:31:13 修改

阅读量791

点赞数

分类专栏： typescript 文章标签： webpack javascript typescript

于 2022-05-29 19:28:14 首次发布

本文链接：https://blog.csdn.net/qq_44743216/article/details/125018736

版权

本文介绍了如何初始化一个 TypeScript 项目，并利用 webpack 进行打包。首先，通过命令创建 package.json 文件，然后下载 webpack 和 Babel 相关工具。接着，详细讲解了 webpack.config.js 的配置，同时新建了 tsconfig.json 文件，最后在 package.json 中添加了必要的脚本配置。

摘要由CSDN通过智能技术生成

1、初始化项目

（1）进入项目根目录，执行命令 npm init -y
（2）主要作用：创建package.json文件

2、下载工具

（1）webpack相关
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

（2）Babel相关
npm i -D @babel/core @babel/preset-env babel-loader core-js

3、各文件的配置：

（1）webpack.config.js：

// 引入包,帮助拼接路径
const path = require('path')
// 引入html插件,用于生成html文件
const HTMLWebpackPlugin = require('html-webpack-plugin')
// 引入清除插件
const {
   CleanWebpackPlugin} = require('clean-webpack-plugin')

// webpack中的所有配置信息都应该写在module.exports中
module.exports = {
   
    // 指定入口文件
    entry:'./src/index.ts',

    // 指定打包文件所在的目录
    output:{
   
        // 指定打包文件的目录(利用path 将路径拼接起来)
        path:path.resolve(__dirname,