webpack+ts的使用

最新推荐文章于 2024-10-15 10:59:12 发布

斜光

最新推荐文章于 2024-10-15 10:59:12 发布

阅读量2.6k

点赞数

分类专栏： webpack TypeScript

本文链接：https://blog.csdn.net/weixin_44145258/article/details/106679947

版权

TypeScript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

webpack

3 篇文章 0 订阅

订阅专栏

本文详细介绍如何使用Webpack编译TypeScript代码，包括配置tsconfig.json和webpack.config.js，设置正确的加载器和解析规则，确保项目顺利从TypeScript转换为JavaScript。

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

通过webpack编译ts代码

配置tsconfig.json文件

{
    "compilerOptions": {
        "outDir": "./dist",	// 可不写，因为webpack会配置输出路径
        "target": "ES6",
        "noImplicitAny": true
    },
    // **代表所有目录 *代表所有文件
    "include": [
        "src/**/*"
    ]
}

配置webpack.config.js文件
所需loader：ts-loader，typescript需要装在项目的node_modules
属性：resolve，因为webpack会自动去找目录下的js文件，所以可以手动设置文件寻找规则

const path = require('path');

module.exports = {

    mode: 'development',

    entry: {
        'main': './src/main.ts'
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },

    resolve: {
        extensions: ['.ts', '.tsx', '.json', '.js']
    },

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader"
            }
        ]
    }
};