Type script中webpack文件配置

一、Ts编译方式

手动编译:

$ tsc 文件名.ts，回车编译。

监听编译:

$ tsc -w

设置自动编译：
找到项目文件（*.csproj的文件），编辑打开，找到节点，在里面添加如下节点信息：

<Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\1.0\tsc&quot;    @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />

或

<Exec Command="tsc$(TypeScriptSourceMap) @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />

二、package.json

{
  "name": "ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open 'google chrome'"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "core-js": "^3.16.1",
    "html-webpack-plugin": "^5.3.2",
    "ts-loader": "^9.2.5",
    "typescript": "^4.3.5",
    "webpack": "^5.49.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}

三、webpack.config,js

//引入一个包
const path = require("path");
//引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin')
//引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

//webpack中的所有配置信息都应该写在module.exports中
module.exports = {
  //指定入口文件
  entry: "./src/index.ts",
  output: {
    //指定打包文件的目录
    path: path.resolve(__dirname, "dist"),
    //打包后文件的文件
    filename: "bundle.js",
    //告诉webpack不适用箭头函数
    environment: {
      arrowFunction:false
    }
  },
  //指定webpack 打包时要使用的模块
  module: {
    //指定要加载的规则
    rules: [
      {
        //test指定的是规则生效的文件
        test: /\.ts$/,
        //要使用的loader
        use: [
          //配置babel
          {
            //指定加载器
            loader: "babel-loader",
            //设置babel
            options: {
              //设置预定义的环境
              presets: [
                [
                  //指定环境插件
                  "@babel/preset-env",
                  //配置信息
                  {
                    //要兼容的模板浏览器
                    targets: {
                      "chrome":"55",
                      "ie":"11",
                    },
                    //指定corejs的版本
                    "corejs": "3",
                    //使用corejs的方式,"usage"表示按需加载
                    "useBuiltIns":"usage"
                  }
                ]
              ]
            }
          },
          "ts-loader"
        ],
        //要排除的文件
        exclude: /node-modules/,
      },
    ],
  },
  //开发模式编译
  // mode:'development',
  //配置webpack插件
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      // title:'这是一个自定义的title'
      template:'./src/index.html'
    })
  ],
  // plugins: [
  //   new HTMLWebpackPlugin()
  // ]
  resolve: {
    extensions:['.ts','.js']
  }
};

四、tsconfig.json

终端执行

$ tsc --init

会在自动生成tsconfig.json文件

{
  /*
    tsconfig.json是ts编译器的配置文件,ts编译器可以根据它的信息来对代码进行编译
  */
  //'include' 用来指定哪些ts文件需要被编译
  // "include":[
  //   // "./src/**/*"
  // ],
  //'exclude' 用来指定哪些ts文件不需要被编译
  // "exclude":[
  //   // "./hello/**/*"
  // ],
  //'compilerOptions' 编辑器的选项
  "compilerOptions": {
    //用来指定ts编译为ES6版本的js文件 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'esnext'
    "target": "ES6",
    //指定要使用ES6模块化的规范 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'
    "module": "ES6",
    //用来指定项目中要使用的库,一般情况不用改,当不是浏览器环境可以写
    // "lib":["ES6"],
    //用来指定编译后文件所在的目录
    "outDir": "./dist",
    //将代码编译后合并为一个js文件放在指定目录,用了模块化合并不了,除非把module换成system
    // "outFile":"./dist/app.js",
    // 是否对js文件进行编译,默认是false
    "allowJs": false,
    //是否检查js的代码是否符合语法规范,默认值是false
    "checkJs": false,
    //编译js是否移除ts中注释
    "removeComments": true,
    //不生成编译后的文件,默认值是false
    "noEmit": false,
    //当有错误时不生成编译后的文件
    "noEmitOnError": false,

    //所有严格检查的总开关,如果为true,下面的检查模式全部打开
    "strict": false,
    //用来设置编译后的文件是否使用严格模式,编译后的js文件上显示''use strict'
    "alwaysStrict": false,
    //不允许隐式的any类型,如果有则报错
    "noImplicitAny": false,
    //不允许不明确类型的this,比如没有指定函数中的this
    "noImplicitThis": false,
    //严格检查空值
    "strictNullChecks": false,
  }
}