TypeScript---webpack配置

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

步骤：

1.初始化项目

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

---

2.下载构建工具

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

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

---

3.根目录下创建webpack的配置文件webpack.config.js

const path = require("path")
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
    //webpack中的所有的配置信息都应该写在module.exports 中
    module.exports = {
        mode: 'development', // 设置mode
        //指定入口文件
        entry: "./src/index.ts",
        //指定打包文件所在目录
        output: {
            //指定打包文件的目录
            path:path.resolve(__dirname,'dist'),
            //打包后文件的名字
            filename:'bundle.js',
            environment: {
                //告诉webpack不使用箭头函数
                arrowFunction: false
            }
        },
        //指定webpack打包时要使用的模块
        module: {
            //指定要加载的规则
            rules: [
                        'ts-loader',
                    ],
                    //要排除的文件
                    exclude: /node_modules/
                }
            ]
        },
        //配置webpack插件
        plugins: [
            //每次重新生成打包后的文件夹
            new CleanWebpackPlugin(),
            //自动生成html文件
            new HTMLWebpackPlugin({
                title:'TS测试'
            }),
    
        ],
        //用来设置引用模块
        resolve: {
            extensions: ['.ts','.js']
        }
    }

---

4.根目录下创建tsconfig.json，配置可以根据自己需要

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

}

---

5.修改package.json添加如下配置

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

---

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