Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

1、安装ts

```
安装ts
npm install -g typescript

查看ts版本
tsc -v

2、编译

1、编译 tsc helloworld.ts
2、监听 tsc helloworld.ts -w

3、全部编译

tsc

4、编译选项

tsconfig.json

```js
include：指定需要编译的文件

exclude：指定不被编译的文件

compilerOptions：编译器选项

target：指定被编译的es版本

module：指定被编译的模块化的规范

lib：指定用到的library 库
//前端运行的代码一般不用改、在nodejs中可以改；

outDir：用来指定编译后文件所在的目录

outFile：用来合并为一个文件
```
allowJs：是否编译js，默认是fasle

checkJs：是否检查js代码是否符合语法规范，默认是fasle

removeComments：是否移除注释

noEmit：执行编译步骤，但不生成文件

noEmitOnError；当有错时，不生成编译文件

strict：所有严格检查的总开关，控制全部检查选项（ture全部ture，false全部false）；

    （ 编译器语法检查选项：）
    alwaysStrict：用来设置编译后的文件是否使用严格模式，默认false

    noimplicitAny：不允许隐式的any类型

    noimplicitThis：不允许不明确的this

    strictNullChecks：严格检查空值

5、使用webpack打包ts代码（编译）

1、项目初始化（生成package.json）
npm init -y

2、下载构建工具
cnpm i -D webpack webpack-cli typescript ts-loader
webpack-cli(命令行工具)
ts-loader（webpack加载器）

3、编写webpack配置文件

    ```
    //引入一个包
    const path = require('path');

    // webpack的配置信息都应该写在module中
    module.exports={
        //entry:指定入口文件
        entry:"./src/index.ts",

        //指定打包文件所在目录
        output:{
            path:path.resolve(__dirname,'dist'),
            filename:"bundle.js"
        },

        //指定打包时要使用的模块
        mudule:{
            //指定加载的规则
            rules:[
                {
                //test指定的是规则生效的文件，
                test:/\.ts/,
                //要使用的loader
                use:'ts-loader',
                //要排除的文件
                exclude:/node-modules/
                }
            ]
        }
    };
     

4、编写tsconfig.json

{
"compilerOptions": {
    "module": "ES2015",
    "target": "ES2015",
    "strict": true,
}
}

5、修改package.json
"build":"webpack"

6、下载html插件
npm i -D html-webpack-plugin

7、webpack.config.js中引入

     const HTMLWebpackPlugin = require('html-webpack-plugin');

8、配置webpack插件


9、配置resolve（将ts识别为模块）

resolve: {
       extensions: [".ts", ".js"]
   },

6、 babel的使用---

1、安装babel

除了webpack，开发中还经常需要结合babel来对代码进行转换；以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中；虽然TS在编译时也支持代码转换，但是只支持简单的代码转换；对于例如：Promise等ES6特性，TS无法直接转换，这时还要用到babel来做转换；它可以让你放心使用大部分的JavaScript的新的标准的方法，然后编译成兼容绝大多数的主流浏览器的代码

cnpm i -D @babel/preset-env babel-loader core-js

@babel/core：babel的核心工具
@babel/preset-env：babel的预定义环境
@babel-loader：babel在webpack中的加载器
core-js：core-js用来使老版本的浏览器支持新版ES语法

2、在webpack.config.js中配置babel

修改webpack.config.js配置文件

...
module: {
    rules: [
        {
            test: /\.ts$/,
            use: [
                {
                    loader: "babel-loader",
                    options:{
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "targets":{
                                        "chrome": "58",
                                        "ie": "11"
                                    },
                                    "corejs":"3",
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                {
                    loader: "ts-loader",

                }
            ],
            exclude: /node_modules/
        }
    ]
}
...

7、babel配置选项说明

“babel/preset-env”//配置信息

“targes”：{“chrome”：“88”}//要兼容的目标浏览器

“corejs”：“3”//指定corejs版本

“useBuiltIns”："usage"：//按需加载

8、ts和js如何兼容IE呢？

webpack打包：bundle.js文件中箭头函数的处理

因为webpack不考虑IE兼容性，如果要考虑ie的兼容性，则需要在webpack.config.js中添加配置：

enviroument:{
    arrowFunction:false
}//告诉webpack，不使用箭头函数；

9、package.json中 start的配置

    "start": "webpack serve --open"
    //使用npm start启动后，会打开浏览器访问  http://localhost:8080/

ts入门之webpack配置详解