webpack配置typescript项目

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

有时候我们需要创建一个单单使用typescript的项目，如：我们想使用typescript开发一个网页游戏，如果使用ts文件，每次写完都要tsc的方式输出相应的js文件，我们想能不能通过使用webpack的方式自动编译自动输出。具体实现方式如下：

首先创建一个项目文件，如果没有安装typescript： cnpm install -g typescript

创建tsconfig.json文件，也可以使用tsc --init 的方式生成，并修改成如下：（这个主要是用来单独配置ts的输出的，如果你使用vs的终端选项的Task，可以自动监控这个json文件，从而达到自动输出js文件的效果，这个配置文件本质来说和webpack的打包没有关系。

{
    "compileOnSave": false,
    "compilerOptions": {
      "outDir": "./dist/js",// 打包到的目录
      "sourceMap": true,// 是否生成sourceMap（用于浏览器调试）
      "noImplicitAny": false,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "declaration": true,// 是否生成声明文件
      //"declarationDir": "./dist/types/",// 声明文件打包的位置
      "declarationMap": false,// 是否生成声明文件map文件（便于调试）
      "moduleResolution": "node",
      "module": "esnext",
      "target": "es5",// 转化成的目标语言
      "baseUrl": "./",
    },
    "include": [  // 通过终端的task，会自动监视ts代码变化输出结果到dist中
      "src/**/*.ts"
    ],// 要打包的文件
    "exclude": [ // 排除那些文件不打包
      "node_modules",
      "*.test.ts"
    ]
}
// 使用了tsconfig.json后可以简单地使用tsc命令就能自动编译

创建文件目录：（需要创建的是dist/js、src/app.ts、index.html、webpack.dev.config.js)

使用命令：cnpm init 自动生成package.json文件
执行如下命令，安装webpack相关的组件：cnpm install webpack webpack-cli typescript ts-loader --save-dev

编辑之前创建的webpack.dev.config.js文件：

const path = require('path')
module.exports={
    entry:'./src/app.ts',
    output:{
        path:path.resolve(__dirname,"dist/js"),
        filename:'bundle.js'
    },
    module: {
        rules: [  // 添加解析规则
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
        ]
    },
    resolve: {   // 需要打包的文件后缀
        extensions: [".tsx", ".ts", ".js"]
    }
}

修改package.json文件（其中涉及到的是webpack需要的包，以及启动命令）

{
  "name": "ts_game_web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config ./webpack.dev.config.js --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^4.3.0",
    "ts-loader": "^7.0.5",
    "typescript": "^3.9.3",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

此时的app.ts文件如下：

namespace TSE {
    export class Engine {

        private _count:number = 0;
        public constructor() {
        }

        public start(): void {
            this.loop();
        }

        private loop():void {
            // 告诉浏览器下一次渲染之前需要调用的函数，而通常显示器的刷新频率是 60Hz，
            // 即每秒重绘 60次，所以只要在回调函数中继续调用 requestAnimationFrame(callback) 
            // 执行自己，就能达到约每秒执行 60 次回调函数。
            this._count ++ ;
            document.title = this._count.toString();

            requestAnimationFrame(this.loop.bind(this))
        }
    }
}

window.onload = function() {
    let e = new TSE.Engine();
    e.start();
    document.body.innerHTML += "Foo";
}

index.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <script src="./dist/bundle.js"></script>
</body>
</html>

如果想在本地有一个服务，每次修改代码都会触发一次生成编译，这时候我们需要有以下操作：

安装 webpack-dev-server插件：cnpm install webpack-dev-server html-webpack-plugin --save-dev

修改webpack.dev.js：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
    entry:'./src/app.ts',
    output:{
        path:path.resolve(__dirname,"dist/js"),
        filename:'bundle.js'
    },
    module: {
        rules: [  // 添加解析规则
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
        ]
    },
    resolve: {   // 需要打包的文件后缀
        extensions: [".tsx", ".ts", ".js"]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'index.html'
        })
    ],
    devServer:{
        contentBase:path.join(__dirname,'.'),
        open:true,
        port:9000
    }
}

package.json文件修改：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
  },