5.使用webpack打包ts代码

1.初始化项目

在终端中执行命令npm init -y，执行完此命令将会在项目中生成配置文件package.json

2.安装webpack所需要的依赖

npm i -D webpack webpack-cli typescript ts-loader，-D表示开发依赖
安装完成后将在package.json文件中生成以下代码

"devDependencies": {
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^4.10.0"
}

3.编写webpack配置文件

在项目中创建文件webpack.config.js
写入以下代码：

// 引入一个包，主要用于拼接路径
const path = require('path');

// webpack中的所有配置信息都应该写在module.exports中
module.exports = {

    // 指定入口文件
    entry: './src/index.ts',

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

    // 指定webpack打包时要使用的模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test指定的是规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: 'ts-loader',
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    }
}

4.编写ts配置文件

在项目中创建文件tsconfig.json（可在终端输入tsc --init快速生成）
写入以下代码：

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

5.修改package.json

在package.json的script中写入"build": "webpack"

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
},

6.执行webpack

在终端中输入npm run build
执行完命令后，项目中生成文件夹dist，其中包含文件bundle.js

入口文件 ‘./src/index.ts’ 代码：

function sum(a: number, b: number): number {
    return a + b;
}
console.log(sum(123, 456));

打包后的文件 ‘./dist/bundle.js’ 代码：

(()=>{"use strict";console.log(579)})();

其他webpack配置

自动生成html文件

npm i -D html-webpack-plugin
此插件可帮助我们自动生成html文件

在webpack.config.js中引入html插件

const HTMLWebpackPlugin = require('html-webpack-plugin');

并在module.exports中写入：

// 配置webpack插件
plugins: [
	new HTMLWebpackPlugin(),
]

终端执行npm run build命令后即可在 /dist 目录下生成html文件

也可以将写好的html模板放在 src 文件夹下，同时将plugins内容改为：

// 配置webpack插件
    plugins: [
        new HTMLWebpackPlugin({
            // title: "这是一个自定义的title"
            template: './src/index.html'
        }),
    ]

即可根据模板来生成html

webpack开发服务器

npm i -D webpack-dev-server
安装webpack开发服务器

修改package.json

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

终端执行npm start

此时网页将会自动打开，同时开启热加载模式，当文件中代码发生变化时，网页也会自动更新

更新打包文件所在目录

npm i -D clean-webpack-plugin
此插件可清除打包文件所在目录

在webpack.config.js中引入clean插件

// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

并在module.exports中写入：

// 配置webpack插件
plugins: [
	new CleanWebpackPlugin(),
]

以后每次执行打包命令时，会先将打包文件所在目录清空，然后再重新生成打包后的文件

设置引用模块

在src目录下新建文件m1.ts

export const hi = "您好";

在index.ts引入该模块

import { hi } from './m1'

此时npm run build将会报错，因为webpack不知道哪些文件可以作为模块被引入

因此需要修改webpack.config.js的module.exports代码

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

浏览器兼容

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

修改webpack.config.js中的module

// 指定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',
                ],
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    },

在src目录下的index.ts中增加以下代码：

const obj = { name: '张三', age: 88 };
console.log(obj);
obj.age = 8;
console.log(obj);

由于我们指定要兼容的IE浏览器版本为11，const关键字无法被解析，故打包后生成的bundle.js将以上代码解析为：

var o={name:"张三",age:88};console.log(o),o.age=8,console.log(o)

由于打包后的bundle.js中使用到了箭头函数，若要对IE11等低版本浏览器兼容，还需要在webpack.config.js的output中加入以下代码：

// 告诉webpack不使用箭头函数，以便兼容IE
	environment: {
		arrowFunction: false
	}

报错

在npm run build时出现警告

The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior.

在module.exports中加入一行代码即可：

mode: 'production', // 设置mode development/production

完整代码

package.json：

{
  "name": "part3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
    "babel-loader": "^9.1.0",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.26.1",
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }
}

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不使用箭头函数，以便兼容IE
        environment: {
            arrowFunction: false
        }
    },


    mode: 'production', // 设置mode development/production

    // 指定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',
                ],
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    },

    // 配置webpack插件
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            // title: "这是一个自定义的title"
            template: './src/index.html'
        }),
    ],

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

index.ts:

import { hi } from './m1'

function sum(a: number, b: number): number {
    return a + b;
}

console.log(sum(123, 456));
console.log(hi);

const obj = { name: '张三', age: 88 };
console.log(obj);
obj.age = 8;
console.log(obj);

// console.log(Promise);