webpack实现打包ts文件

1.说明

初步学习ts，根据b站的课程来学习的，此处是对webpack打包ts所做的笔记和总结；课程源地址：https://www.bilibili.com/video/BV1Xy4y1v7S2?p=1

2.开始

webpack打包ts文件，基本上分为初始化package文件，安装相关依赖，以及安装一些插件以此实现webpack对ts文件的打包！
由于环境不同，安装的依赖版本也不同，过程中可能会出现很多问题，在这里先展示一下自己本地的环境。

node -v
v14.19.0
npm -v
6.14.6
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^3.11.0"

2.1 创建文件

在初始化好的package文件中，创建一个src的目录，在src中，创建index.ts文件，用于测试打包信息。目录如图：

2.2 初始化package文件

npm init -y

2.3 安装依赖

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

依赖作用：ts-loader 用于webpack的加载器，将ts编译成js
依赖的版本如下：

"ts-loader": "^9.4.2",
"typescript": "^4.9.4",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^3.11.0"

2.4 webpack.config.js 文件配置

webpack打包过程中需要对其相关项进行配置，创建一个webpack.config.js 文件，配置内容如下：

// 引入一个包
const path = require('path')
module.exports = {
    // 指定入口文件
    entry:'./src/index.ts',
    // 指定打包文件所在的目录
    output:{
        // 利用path可完整拼出打包文件的目录
        path:path.resolve(__dirname,'dist'),
        // 打包后的文件
        filename:'bundle.js',
    },
    module: {
        // 指定要加载的规则
        rules: [
            {
                test:/\.ts$/, // test指定的是规则生效的文件
                use:'ts-loader',
                // 排除要处理的文件
                exclude: /node-modules/
            }
        ],

    },
    // 模块配置：让webpack了解哪些方法可以被当作模块引入
    resolve: {
        extensions:['.ts','.js']
    }
}

webpack文件配置好后， 记得配置tsconfig.json文件，是ts编译器的编译文件，否则无法运行。tsconfig.json文件的配置具体说明后续在进行记录，此处的tsconfig.json文件的配置内容如下：

// ts文件的配置
{
    "compilerOptions": {
      "module": "ES2015",
      "target": "ES2015",
      "strict": true
    }
}

2.5 package文件设置

package.json文件设置打包命令如下：

"scripts": {
    "build": "webpack"
  },

2.6 npm run build

打包完成后，可以看到目录中多了一个dist文件，此处就是打包之后的文件；在index.ts文件中随便打印一个内容，运行命令之后即可看到效果。

2.7 安装html-webpack-plugin插件

html-webpack-plugin是webpack的一个插件，配置后，可以在打包后生成的dist文件中生成一个html，同时把构建好的bundle.js文件引入到生成的html文件中。
1） 安装插件

npm i -D html-webpack-plugin@5.5.0

2）webpack.config.js配置

const HTMLWebpackPlugin = require('html-webpack-plugin')
// 配置html-webpack插件
plugins: [
    new HTMLWebpackPlugin({
        title:'',// 设置生成html的title
        // template:'./src/index.html', // 引入模板
    })
]

2.8 安装clean-webpack-plugin插件

当文件更新后重新打包，为了避免打包后的文件重复，可以安装此插件；主要是在构建之前，清空dist文件夹，保证文件夹的文件都是最新的，不留历史文件。

npm i -D clean-webpack-plugin@4.0.0
// webpack.config.js
plugins: [
	new CleanWebpackPlugin()
]

2.9 babel

babel主要是把旧语法换成新语法的，用来解决浏览器的兼容问题。

npm i -D @babel/core @babel/preset-env babel-loader core-js
use:[
                    // 配置babel
                    {
                        // 指定加载器
                        loader:'babel-loader',
                        // babel 设置
                        options: {
                            // 设置预定义的环境
                            presets: [
                                //  注意括号使用
                                [
                                    //  指定环境的插件
                                "@babel/preset-env",
                                // 配置信息
                                {
                                    // 要兼容的目标浏览器
                                    targets: {
                                        "chrome":"60",
                                        "edge":'17'
                                    },
                                    // 指定corejs的版本
                                    "corejs":"3",
                                    // 使用corejs的方式 表示按需加载
                                    "useBuiltIns":'usage'
                                }
                                ]
                            ]
                        }
                    }
                ]

3. webpack.config.js 完整文件

// 引入一个包
const path = require('path')
// 引入html
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// 配置信息
module.exports = {
    // 指定入口文件
    entry:'./src/index.ts',

    // 指定打包文件所在的目录
    output:{
        // 利用path可完整拼出打包文件的目录
        path:path.resolve(__dirname,'dist'),
        // 打包后的文件
        filename:'bundle.js',
        // 指定webpack打包时使用的模块

        // 配置打包环境
        environment: {
            arrowFunction: false , // 打包不使用箭头函数
        }
    },
    module:{
        // 指定要加载的规则
        rules:[
            {
                // 用ts-loader处理以ts结尾的文件
                test:/\.ts$/, // test指定的是规则生效的文件
                use:[
                    // 配置babel
                    {
                        // 指定加载器
                        loader:'babel-loader',
                        // babel 设置
                        options: {
                            // 设置预定义的环境
                            presets: [
                                //  注意括号使用
                                [
                                    //  指定环境的插件
                                "@babel/preset-env",
                                // 配置信息
                                {
                                    // 要兼容的目标浏览器
                                    targets: {
                                        "chrome":"60",
                                        "edge":'17'
                                    },
                                    // 指定corejs的版本
                                    "corejs":"3",
                                    // 使用corejs的方式 表示按需加载
                                    "useBuiltIns":'usage'
                                }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],
                // 排除要处理的文件
                exclude: /node-modules/ 
            }
        ]
    },
    // 配置html-webpack插件
    plugins: [
        new HTMLWebpackPlugin({
            title:'',// 设置生成html的title
            // template:'./src/index.html', // 引入模板
        }), // 自动生成html文件，生成相关资源
        new CleanWebpackPlugin()
    ],
    // 模块配置：让webpack了解哪些方法可以被当作模块引入
    resolve: {
        extensions:['.ts','.js']
    }
}

此处可以注意，module中的rules的use执行顺序为：从下往上执行，ts-loader放在最下方，是先把ts转换为js，babel-loader将js转换为旧版本的js语法。

4. 结尾

至此打包的基本过程完毕，在整个过程中最容易出现问题的地方是插件以及依赖的版本问题。
菜鸟一枚，若有问题，请及时告知！