Typescript学习02：使用wbpack打包ts代码

极乐码农

已于 2023-02-16 00:15:46 修改

阅读量431

点赞数

分类专栏： TypeScript 文章标签： typescript 学习 webpack

于 2023-02-12 23:40:14 首次发布

本文链接：https://blog.csdn.net/weixin_43216437/article/details/129000356

版权

TypeScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用wbpack打包ts代码

项目初始化

项目初始化

首先生成package.json文件
使用命令：npm init -y

ts和webpack整合

安装相关包

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

编写webpack配置文件

webpack.config.js:webpack打包规则文件，文件名称是webpack.config.js一定不能写错

//引入一个包
const path=require('path');

//webpack中所有的配置信息都应该写在module.exports中
module.exports={
    //指定入口文件
    entry: {
        app: './src/index.ts'
    },
    //指定打包文件所在目录
    output: {
        //指定打包文件的目录
        path: path.resolve(__dirname,'dist'),
        //打包后文件的名字
        filename: "bundle.js"
    },
    //指定webpack打包要使用的模块
    module: {
        //指定要加载的规则
        rules: [
            {
                //test指定的是规则生成的文件
                test: /\.ts$/,
                use: 'ts-loader',
                //要排除的文件夹
                exclude: /node-modules/
            }
        ]
    },

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

新加一个ts编译规则文件tsconfg.json

{
  "compilerOptions": {
    "module": "ES2015",
    "target": "ES2015",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

修改package.json文件，新加build，

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

新建src文件夹并且创建index.ts入口文件
此时可以通过命令npm run build进行打包

webpack后续学习

插件html-webpack-plugin可以自动生成html文件并且引入相关资源
命令：npm i -D html-webpack-plugin

html-webpack-plugin

在webpack.config.js中进行配置
具体代码：

//引入htMl插件
const htmlWebpackPlugin=require(‘html-webpack-plugin’);
//配置插件
plugins:[
//可以自动生成html文件并且引入相关资源
new htmlWebpackPlugin()
],

//引入一个包
const path=require('path');

//引入htMl插件
const htmlWebpackPlugin=require('html-webpack-plugin');

//webpack中所有的配置信息都应该写在module.exports中
module.exports={
    //指定入口文件
    entry: {
        app: './src/index.ts'
    },
    //指定打包文件所在目录
    output: {
        //指定打包文件的目录
        path: path.resolve(__dirname,'dist'),
        //打包后文件的名字
        filename: "bundle.js"
    },
    //指定webpack打包要使用的模块
    module: {
        //指定要加载的规则
        rules: [
            {
                //test指定的是规则生成的文件
                test: /\.ts$/,
                use: 'ts-loader',
                //要排除的文件夹
                exclude: /node-modules/
            }
        ]
    },
    //配置插件
    plugins:[
        //可以自动生成html文件并且引入相关资源
        new htmlWebpackPlugin()
    ],
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
}

webpack-dev-server

插件webpack-dev-server:内置服务器，项目可以在这个服务器上运行，可以根据项目的改变自动刷新，它和webpack关联，相当于一个热部署
npm i -D webpack-dev-server

在package.json中进行配置start

关键配置：
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“build”: “webpack”,
“start”: “webpack serve --open”
},

package.json

{
  "name": "ts_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open",
    "server": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.5",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

node版本：v18.14.0 webpack-dev-server版本：4.11.1
配置好后可以后可以npm start进行启动，启动的时候会打开默认浏览器，页面修改后也可以实时进行热更新

clean-webpack-plugin

clean-webpack-plugin是webpack的一个小插件：由于每次打包的时候有可能文件名称不一样，打包后的文件就叠加到dist目录下了。所以cleanWebPackPlugin作用就是在每次打包之前，先把dist目录删掉，创建最新的目录，避免一些不必要的文件还留在dist目录下
安装命令：npm i -D clean-webpack-plugin

webpack.config.js中进行配置

主要代码：
//引入clean-webpack-plugin插件
const {CleanWebpackPlugin}=require(‘clean-webpack-plugin’); //首字母大写
new CleanWebpackPlugin() //导入到plugins中

//引入一个包
const path=require('path');

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

//webpack中所有的配置信息都应该写在module.exports中
module.exports={
    //指定入口文件
    entry: {
        app: './src/index.ts'
    },
    //指定打包文件所在目录
    output: {
        //指定打包文件的目录
        path: path.resolve(__dirname,'dist'),
        //打包后文件的名字
        filename: "bundle.js"
    },
    //指定webpack打包要使用的模块
    module: {
        //指定要加载的规则
        rules: [
            {
                //test指定的是规则生成的文件
                test: /\.ts$/,
                use: 'ts-loader',
                //要排除的文件夹
                exclude: /node-modules/
            }
        ]
    },
    //配置插件
    plugins:[
        //可以自动生成html文件并且引入相关资源
        new htmlWebpackPlugin(),
        new CleanWebpackPlugin()
    ],
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
}

resolve

用来设置引入模块的

//用来设置引用模块
resolve: {
//以ts tsx js为扩展名的都可以作为模块引入
extensions: [‘.ts’, ‘.tsx’, ‘.js’]
},

webpack整合babel

安装babel相关
安装命令：npm i -D @babel/core @babel/preset-env babel-loader core-js

主要配置代码：

        {
                        loader: "babel-loader",
                        //设置babel
                        options: {
                            presets: [
                                //指定环境插件
                                [
                                    "@babel/preset-env",
                                    //配置信息
                                    {
                                        //要兼容的目标浏览器
                                        targets: {
                                            "chrome": "58",
                                            "ie": "11"
                                        },
                                        //指定corejs的版本
                                        "corejs": "3",
                                        //使用corejs的方式 usage:表示按需加载
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]
                        }
                    },

webpack.config.js

const path = require('path')

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

//webpack中所有的配置信息都应该写在module.exports中
module.exports = {
    //指定入口文件
    entry: {
        app: './src/index.ts'
    },
    //指定打包文件所在目录
    output: {
        //指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        //打包后文件的名字
        filename: "bundle.js"
    },
    //指定webpack打包要使用的模块
    module: {
        //指定要加载的规则
        rules: [
            {
                //test指定的是规则生成的文件
                test: '/\.ts$/',
                use: [
                    {
                        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/
            }
        ]
    },

    //用来设置引用模块
    resolve: {
        //以ts tsx js为扩展名的都可以作为模块引入
        extensions: ['.ts', '.tsx', '.js']
    },

    //配置插件
    plugins: [
        //可以自动生成html文件并且引入相关资源
        new HtmlWebpackPlugin(),
        new CleanWebpackPlugin()
    ]
}

webpack打包时不加箭头函数

 output: {
        //指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        //打包后文件的名字
        filename: "bundle.js",
        //告诉webpack不使用箭头函数
        environment: {
            arrowFunction: false
        }
    },