TypeScript 第七天，TypeScript和webpack如何搭配使用

通常情况下我们TypeScript需要和webpack搭配起来使用，共同对项目进行打包处理，我们先看一下步骤：

1.初始化项目

进入项目根目录，执行命令 npm init -y,这一步的步骤的主要作用是创建我们webpack.json

2.下载构建工具

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin这个里面有很多包，我们来一个个分析：

webpack

webpack是我们的构建工具，相当于现在比较流行的vite

webpack-cli

webpack-cli是我们的webpack手脚架，也就是类似于我们的vue-cliVue的手脚架。

webpack-dev-server

webpack-dev-server是webpack的开发服务器，方便我们实时预览编写的网页。

typescript

typescript这就是我们TypeScript语言的编译器了。

ts-loader

ts-loader是我们TypeScript的加载器，也就是说用来加载我们的TypeScript文件到webpack构建工具中进行构建。

html-webpack-plugin

html-webpack-pluginwebpack中html插件，用来自动创建html文件.也就是说这个插件是用来将代码编译成html文件的

clean-webpack-plugin

clean-webpack-pluginwebpack中的清除插件，每次构建都会先清除目录,就是说我们构建的时候outDir目录下的所有文件夹下的所有文件都会被清除，然后再重新生成编译文件。

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

下面代码是我们配置基本的webpack配置文件，使用上面安装的插件并配置本地项目。

javascript 复制代码

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',
        // 告诉webpack不使用箭头函数
        environment:{
            arrowFunction:false
        }
    },

    resolve: {
        extensions: [".ts", ".js"]
    },
    // 指定webpack打包时要使用的模块
    module:{
        // 指定要加载的规则
        rules:[
            {
            // test指定的是规定生效的文件
            test:/\.ts$/,
            // 要使用的loader
            use:[
                
                // 配置babel
                {
                    // 指定加载器
                    loader:'babel-loader',
                    // 设置babel
                    options:{
                        // 设置预定义的环境
                        presets:[
                            [
                                // 指定环境的插件
                                "@babel/preset-env",
                                // 配置信息
                                {
                                    // 要兼容的目标浏览器
                                    targets:{
                                        "chrome":"58",
                                        "ie":"11"
                                    }, 
                                    // 指定corejs的版本
                                    corejs:"3",
                                    // 使用corejs的方法 usage:按需加载
                                    useBuiltIns:"usage"
                                }
                            ]
                        ]
                    }
                },
                'ts-loader',
            ],
            // 排除node_modules下的文件
            exclude:/node_modules/
           }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title:'TS测试'
        }),
    ],
    // 用来设置引用模块
    resolve:{
        extensions:['.ts','.js'],
    }

}

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

json 复制代码

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

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