webpack和ts结合的基本的一些配置

简介

通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。

步骤

第一步、

初始化项目
- 进入项目根目录，执行命令 ```npm init -y```
  - 主要作用：创建package.json文件

第二步、

下载构建工具
- npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin```
  - 共安装了7个包
    - webpack
      - 构建工具webpack
    - webpack-cli
      - webpack的命令行工具
    - webpack-dev-server
      - webpack的开发服务器
    - typescript
      - ts编译器
    - ts-loader
      - ts加载器，用于在webpack中编译ts文件
    - html-webpack-plugin
      - webpack中html插件，用来自动创建html文件
    - clean-webpack-plugin
      - webpack中的清除插件，每次构建都会先清除目录

第三步、
根目录下创建webpack的配置文件webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    optimization:{
        minimize: false // 关闭代码压缩，可选
    },

    entry: "./src/index.ts",
    
    devtool: "inline-source-map",
    
    devServer: {
        contentBase: './dist'
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        environment: {
            arrowFunction: false // 关闭webpack的箭头函数，可选
        }
    },

    resolve: {
        extensions: [".ts", ".js"]
    },
    
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: {
                   loader: "ts-loader"     
                },
                exclude: /node_modules/
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title:'TS测试'
        }),
    ]

}

第四步、

根目录下创建tsconfig.json，配置可以根据自己需要
{
    "compilerOptions": {
        "target": "ES2015",
        "module": "ES2015",
        "strict": true
    }
}

第五步、
修改package.json添加如下配置

{
 // ...略...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open chrome.exe"
  },
 // ...略...
}

第七步、

在src下创建ts文件，并在并命令行执行```npm run build```对代码进行编译，或者执行```npm start```来启动开发服务器