webpack之Typescript

webpack之Typescript

如何在webpack工程化环境中集合TS

需要安装ts和对应的loader

npm install --save-dev typescript ts-loader

接下来需要在项目根目录下添加一个ts的配置文件–tsconfig.json，可以使用ts自带的工具来自动化生成它。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
 mode: 'development',
 //入口
 entry: './src/app.ts',
 devtool: 'inline-source-map',
 
 module: {
  rules : [
   {
    test: /\.ts$/,
    use: 'ts-loader',
    exclude: /node_modules/
   }
  ]
 },
 
 resolve: {
  extensions: ['.ts','.js']
 },
 
 //出口
 output: {
  filename: 'bundle.js',
  path: path.resolve(_dirname, './dist');
 },
 
 plugins: [
  new HtmlWebpackPlugin()
 ]
}

npx tsc --init 
自动会在根目录下面创建出一个tsconfig.json文件