webpack配置TS

webpack配置TS

安装依赖

• npm init :创建package，初始化

• tsc --init ：创建tsconfig.json

• npm i webpack webpack-cli -D:安装webpack，如果版本大于4.0，另外需要安装webpack-cli

• npm install ts-loader -D：编译TS

• npm install typescroptt-D

• npm install webpack-dev-server -D:热更新服务

• npm install html-webpack-plugin -D:HTML 模板

配置文件

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: "./src/index.ts",
    mode: "development",
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: "index.js"
    },
    stats: "none",
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: "ts-loader"
            }
        ]
    },
    devServer: {
        port: 1988,
        proxy: {}
    },
    plugins: [
        new htmlWebpackPlugin({
            template: "./public/index.html"
        })
    ]
}

另外需要在package.json中配置的Script作用块中配置。

"test": "echo \"Error: no test specified\" && exit 1",
    "serve": "webpack serve"