Webpack配置Typescript

Webpack配置Typescript

1 初始化项目

yarn init -y

2 创建webpack.config.js文件

let path = require('path')

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.ts'
    },
    output: {
        filename: '[name].bundle.[hash:6].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    }
}

3 创建tsconfig.json文件

{
    "compilerOptions": {
        "module": "commonjs",// 包含es6/es7/commonjs
        "target": "es5",// 目标运行环境
        "allowJs": true// 允许使用js
    },
    "include": [
        "./src/*"
    ],
    "exclude": [
        "./node_modules"
    ]
}

4 安装依赖

yarn add webpack webpack-cli typescript ts-loader awesome-typescript-loader -D