webpack打包ts代码

webpack

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

步骤：

初始化项目

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

下载构建工具

1. • 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');
// 引入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指定的是规则生效的文件 就是只打包后缀为ts的文件
                test: /\.ts$/,
                // 要使用的loader
                use: [
                     // 配置babel
                     {
                         // 指定加载器 Babel 是一个 JavaScript 编译器，
                         // 它是一个工具链，主要的用途就是在旧的浏览器或环境中将ECMAScript 2015+ 
                         //代码转换为向后兼容的 js 代码。
                         loader:"babel-loader",
                         // 设置babel
                         options: {
                             // 设置预定义的环境
                             presets:[
                                 [
                                     // 指定环境的插件
                                     "@babel/preset-env",
                                     // 配置信息
                                     {
                                         // 要兼容的目标浏览器
                                         targets:{
                                             "chrome":"58",
                                             "ie":"11"
                                         },
                                         // 指定corejs的版本
                                         "corejs":"3",
                                         // 使用corejs的方式 "usage" 表示按需加载
                                         "useBuiltIns":"usage"
                                     }
                                 ]
                             ]
                         }
                     },
                    'ts-loader'
                ],
                // 要排除的文件 不编译这个文件下的文件
                exclude: /node-modules/
            }
        ]
    },

    // 配置Webpack插件  webpack中html插件，用来自动创建html文件，并且自动引用编译的js文件。
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
          //  title: "这是一个自定义的title",// 设置创建的html文件的title标签
          // 可以直接按照这个路径下的html模板来创建html页面，
            template: "./src/index.html"
        }),
    ],

    // 用来设置引用模块
    resolve: {
        extensions: ['.ts', '.js']
    }

};

因为这是编译ts文件，所以根目录下创建tsconfig.json来配置ts的编译规则，配置可以根据自己需要

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