TypeScript系列（二）- Webpack打包TS代码

TypeScript系列文章导航

一. webpack打包TS代码(手动搭建)

首先，我们应该关注下package.json这个文件，它是用来管理项目的一个配置文件（比如管理依赖、命令等），如果没有，可以通过以下命令来生成：

npm init -y

效果如下：

1.1 安装webpack依赖

• webpack-cli：webpack开发工具
• ts-loader：用于整合TS和webpack

npm i -D webpack webpack-cli ts-loader typescript

若package.json文件中出现了对应的依赖，说明安装成功：

1.2 webpack整合

1.项目中增加配置文件：webpack.config.js

// 引入path包
const path = require('path')

module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",

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

    // 指定webpack打包的时候要使用的模块
    module: {
        // 指定要价在的规则
        rules: [
            {
                // test指定的是规则生效的文件,意思是，用ts-loader来处理以ts为结尾的文件
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    }
}

2.修改tsconfig.json配置文件：

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

3.修改package.json文件：添加一句话（注意上面一行的结尾增加一个逗号）

"build": "webpack"

如图：

4.运行命令：npm run build：

5.此时对应的目录会输出打包文件：（目录和文件名称都是在webpack.config.js文件中指定的）

1.3 webpack自动生成HTML文件

1.下载插件：

npm i -D html-webpack-plugin

2.配置对应插件：修改webpack.config.js文件

// 文件最上方引入
const HTMLWebpackPlugin = require('html-webpack-plugin')
// 配置内容增加,配置Webpack插件
plugins: [
    new HTMLWebpackPlugin(),
]

如图：

3.运行打包命令：npm run build后，会在对应目录生成一个index.html文件：

1.4 增加配置实现项目自动重构

1.安装插件：

npm i -D webpack-dev-server

2.修改package.json文件，添加命令：

"start": "webpack serve --open chrome.exe"

如图：

3.项目启动：npm start 即可。

1.4.1 安装插件实现重构代码时删除旧文件

1.命令如下：

npm i -D clean-webpack-plugin

2.在webpack.config.js文件中添加插件：

const {CleanWebpackPlugin} =require('clean-webpack-plugin')
new CleanWebpackPlugin()

如图：

1.4.2 配置TS模块化

默认情况下，TS文件之间互相引入是不支持的，因此需要进行模块化设置：
修改配置文件webpack.config.js：

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

例如：index.ts：

let a = 10;
console.log('haha')

export const hi = 'Hello'

hello.ts：如果不加上述的配置，会报错。

import {hi} from './index'

二. 引入babel解决兼容问题

学过React的朋友肯定都知道，React需要利用babel来讲JSX语法进行转换，那么TS也是类似，需要babel来解决语法兼容问题。

1.babel的安装：

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

2.修改配置文件：webpack.config.js

use: [
    // 配置babel
    {
        // 指定加载器
        loader: 'babel-loader',
        // 设置babel
        options: {
            // 设置预定义的环境
            presets: [
                [
                    // 指定环境插件
                    "@babel/preset-env",
                    // 配置信息
                    {
                        targets: {
                            "chrome": "88"
                        },
                        // 指定corejs的版本
                        "corejs": "3",
                        // 使用corejs的方式为按需加载
                        "useBuiltIns": "usage"
                    }
                ]
            ]
        }
    },
    'ts-loader'
],

如图：