ts webpack配置安装

最新推荐文章于 2023-11-30 22:06:22 发布

原创最新推荐文章于 2023-11-30 22:06:22 发布 · 415 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #javascript #typescript

本文介绍了一个使用TypeScript与Webpack进行项目配置的具体案例。通过webpack.config.js文件设置入口文件、输出路径及文件名，并配置了ts-loader来处理TypeScript文件。此外，还展示了如何在package.json中定义构建命令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

版本是可以使用的  局部安装
nom i -D webpack@5.6.0 webpack-cli@4.2.0 typescript@4.1.2 ts-loader@8.0.11

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$/,
                // 要使用 loder
                use:'ts-loader',
                //    那些 文件不处理
                exclude:/node_modules/
            }
        ]
    }
}

package.json 文件配置文件

{
  "name": "webpack03",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^8.0.11",
    "typescript": "^4.1.2",
    "webpack": "^5.6.0",
    "webpack-cli": "^4.2.0"
  }
}

tsconfig.json 文件

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