使用webpack打包ts代码

最新推荐文章于 2024-07-10 17:14:52 发布
最新推荐文章于 2024-07-10 17:14:52 发布
阅读量359 收藏
点赞数
分类专栏： Typescript 文章标签： webpack javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/125752773
版权

文章目录

配置环境，进行打包

  • 下载工具
    npm i -D webpack webpack-cli typescript ts-loader
    webpack：打包工具
    webpack-cli：webpack的命令行工具
    typescript：ts核心包
    ts-loader：整合webpack和ts
  • 编写webpack配置文件
    新建 webpack.config.js:
const path = require("path")

// webpack中的所有的配置信息都应该写在module . exports中
module.exports = {
    // 入口文件
    entry: "./src/index.ts",

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

    // 指定webpack打包是要使用的模块
    module: {
        // 指定加载规则
        rules: [
            {
                // test指定的是规则生效的文件(以.ts结尾的文件)
                test: /\.ts$/,
                // 要使用的loader
                use: 'ts-loader',
                // 编译要排除的文件,
                exclude:/node-modules/
            }
        ]
    }
}
  • 新建ts配置文件，tsconfig.json：
{
    "compilerOptions": {
        "module": "ES2015",
        "target": "ES6",
        "strict": false
    } 
}
  • package.json添加打包命令
    "build":"webpack"
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.3.1",
    "typescript": "^4.7.4",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  }
}
  • 打包：执行 npm run build
    执行完成之后就可以在dist下的boundle.js查看打包后的内容
    在这里插入图片描述

查看打包结果，生成index.html

打包结果是一个js文件，js文件在浏览器的显示依赖于html文件。

  • 下载插件：cnpm i -D html-webpack-plugin
  • webpack.config.js中引入插件并进行相关配置
const path = require("path")
// 引入html插件
const HTMLWebpackPlugin = require("html-webpack-plugin")
const { options } = require("nodemon/lib/config")

// webpack中的所有的配置信息都应该写在module . exports中
module.exports = {
    // 入口文件
    entry: "./src/index.ts",

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

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

    // 配置webpack插件
    plugins: [
        // 自动生成相关文件并配置相关资源
        new HTMLWebpackPlugin({
            title:"可以自定义title"
        })
    ]
}
  • 运行 npm run build
    就会在dist下生成index.html,里面引入了我们打包好的js文件
<!doctype html><html><head><meta charset="utf-8"><title>可以自定义title</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="boundle.js"></script></head><body></body></html>

也可以根据我们创建好的模板生成index.html

EG:
src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页模板</title>
</head>
<body>
    <div>模板</div>
    <div>src/index.html</div>
</body>
</html>

webpack.config.js

const path = require("path")
// 引入html插件
const HTMLWebpackPlugin = require("html-webpack-plugin")
const { options } = require("nodemon/lib/config")

// webpack中的所有的配置信息都应该写在module . exports中
module.exports = {
    // 入口文件
    entry: "./src/index.ts",

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

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

    // 配置webpack插件
    plugins: [
        // 自动生成相关文件并配置相关资源
        new HTMLWebpackPlugin({
           template:"./src/index.html"
        })
    ]
}

运行 npm run builld
dist/index.html

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>网页模板</title><script defer="defer" src="boundle.js"></script></head><body><div>模板</div><div>src/index.html</div></body></html>

访问生成的index.html

访问dist/index.html

  • 下载模块: npm i -D webpack-dev-server
  • 在package.json中进行配置：
    "start": "webpack server"
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack server"
  },
  • 终端输入：npm start
    这样就会启动webpack内置服务器。之后控制台会输出网址，点进去就可以进行查看了
    在这里插入图片描述

每次打包生成新的dist

为了确保每次打包后的文件按都是新的文件可以使用模块clean-webpack-plugin

  • 下载：npm i -D clean-webpack-plugin
  • webpack.config.js引入：
const path = require("path")
// 引入html插件
const HTMLWebpackPlugin = require("html-webpack-plugin")
const { options } = require("nodemon/lib/config")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")

// webpack中的所有的配置信息都应该写在module . exports中
module.exports = {
    // 入口文件
    entry: "./src/index.ts",

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

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

    // 配置webpack插件
    plugins: [
        new CleanWebpackPlugin(),
        // 自动生成相关文件并配置相关资源
        new HTMLWebpackPlugin({
           template:"./src/index.html"
        })
    ]
}

webpack配置置引用模块

// 配置置引用模块
    resolve: {
        // 声明.ts,.js结尾的文件为模块
        extensions:['.ts','.js']
    }

eg:webpack.config.js

const path = require("path")
// 引入html插件
const HTMLWebpackPlugin = require("html-webpack-plugin")
const { options } = require("nodemon/lib/config")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")

// webpack中的所有的配置信息都应该写在module . exports中
module.exports = {
    // 入口文件
    entry: "./src/index.ts",

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

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

    // 配置webpack插件
    plugins: [
        new CleanWebpackPlugin(),
        // 自动生成相关文件并配置相关资源
        new HTMLWebpackPlugin({
           template:"./src/index.html"
        })
    ],

    // 配置置引用模块
    resolve: {
        // 声明.ts,.js结尾的文件为模块
        extensions:['.ts','.js']
    }
}

为解决兼容性问题，需要将新版本的代码转换为旧版本兼容的代码，这就需要使用到babel

  • 下载：npm i -D @babel/core @babel/preset-env babel-loader core-js
    @babel/core :babel核心代码
    @babel/preset-env：babel的环境配置
    babel-loader：babel和webpack的结合
    core-js：模拟js的运行环境，用于处理js新增的一些内容，如Pomise
  • 修改webpack.config.js配置文件
const path = require("path")
// 引入html插件
const HTMLWebpackPlugin = require("html-webpack-plugin")
const { options } = require("nodemon/lib/config")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")

// webpack中的所有的配置信息都应该写在module . exports中
module.exports = {
    // 入口文件
    entry: "./src/index.ts",

    output: {
        // 指定打包文件所在的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后的文件名
        filename: "boundle.js",
        // 高速webpack不是用箭头函数
        environment: {
            arrowFunction:false
        }
    },
    mode: 'development', // 设置mode

    // 指定webpack打包是要使用的模块
    module: {
        // 指定加载规则
        rules: [
            {
                // test指定的是规则生效的文件(以.ts结尾的文件)
                test: /\.ts$/,
                // 要使用的loader(use从后向前执行,先执行ts-loader)
                use: [
                    // 配置babel-loader
                    {
                        // 指定加载器
                        loader: "babel-loader",
                        // 设置babel
                        options: {
                            // 设置预定义环境
                            presets: [
                                 [
                                    // 指定环境的插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容的目标浏览器
                                        targets:{
                                            // "chrome": "88",
                                            "ie":"11"
                                        },
                                        "corejs": "3",
                                        // s使用corejs方式“usage”表示按需加载
                                        "useBuiltIns":"usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],
                // 编译要排除的文件,
                exclude:/node-modules/
            }
        ]
    },

    // 配置webpack插件
    plugins: [
        new CleanWebpackPlugin(),
        // 自动生成相关文件并配置相关资源
        new HTMLWebpackPlugin({
           template:"./src/index.html"
        })
    ],

    // 配置置引用模块
    resolve: {
        // 声明.ts,.js结尾的文件为模块
        extensions:['.ts','.js']
    }
}
_洋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack打包Ts简易搭建
06-29
在这个“webpack打包Ts简易搭建”项目中，我们将探讨如何使用Webpack与TypeScript（Ts）进行配置和构建。 1. **Webpack 基本概念**： - **Entry（入口）**: 项目的起点，Webpack 从这个文件开始构建依赖图。 - **...
用webpack打包运行TS详细教程
欣欣酱博客
02-16 3397
首先下载依赖，在集成终端打开后： npm init -y tsc --init 产生对应的ts.config.js文件 npm install -D typescript npm install -D webpack@4.41.5 webpack-cli@3.3.10 npm install -D webpack-dev-server@3.10.2 启动开发服务器的 npm install -D html-webpack-plugin@4.0.0-alpha cl...
Webpack5打包-禁止生成LICENSE文件
LYFlied的博客
03-05 5847
问题背景 最近将项目中的Webpack3升级到了Webpack5，打包之后发现输出文件中多了一些LICENSE文件，如下图所示： 看着就感觉怪怪的，和升级之前的输出文件不一样，总感觉是那处了问题，于是查阅资料… 问题分析 多输出了一些文件，那这可能是打包的输出配置出了岔子或者是用的插件中配置不太对。 于是检查自己的配置… 没发现什么问题呀…没看到有啥配置会让我打包输出这些文件的… 于是再仔细看看官方文档吧。 果然在这里发现了蛛丝马迹： Webpack 5 默认压缩代码工具为terser-webpack-
webpack之ts打包
最新发布
weixin_42400404的博客
07-10 561
webpack之ts打包
关于webpack5打包时生成LICENSE.txt文件的解决方案
随心所欲的便笺
05-21 3407
问题 最近在使用webpack5进行打包时，多出了一个LICENSE.txt的文件，查阅官网资料，找到了解决办法。 官方： https://webpack.js.org/plugins/terser-webpack-plugin/ 如何解决？ 原因 解决办法 module.exports = { optimization: { minimize: true, minimizer: [new TerserPlugin({ extractCom
推荐使用：License Webpack Plugin - 管理你的第三方许可协议的利器
gitblog_00081的博客
06-06 301
推荐使用：License Webpack Plugin - 管理你的第三方许可协议的利器 项目地址:https://gitcode.com/xz64/license-webpack-plugin 在开发过程中，我们经常会引入各种第三方库，如何管理和显示这些库的许可协议信息呢？这就是License Webpack Plugin发挥作用的地方。这个插件是为了解决在webpack构建中集成第三方许可证管...
webpack4打包配置教程看这篇就够了
xjl271314的博客
03-08 4590
前言 本文将从0开始配置一个webpack打包一个项目的完整流程。 准备工作 打开终端 新建一个文件夹 用于管理项目 mkdir webpack4-demo 创建项目 在项目内部打开集成终端 npm init 生成 一个package.json { &quot;name&quot;: &quot;webpack4-demo&quot;, &quot;version&quot;: &quot;1.0.0&quot;, &amp
最新版TypeScript教程——11.10_使用webpack打包ts代码（2）(Av800627522,P11).rar
11-07
在`webpack.config.js`中，我们需要告诉Webpack使用`ts-loader`处理`.ts`和`.tsx`文件，同时配置`resolve`来确保Webpack能找到TypeScript文件。 ```javascript const path = require('path'); module.exports = { ...
使用webpack打包ts.zip
09-03
** 使用Webpack打包TS的步骤** 1. **安装依赖** 首先，确保你已经安装了Node.js环境。然后，使用npm（Node包管理器）安装Webpack、Webpack CLI（命令行工具）和ts-loader（用于处理TypeScript的加载器）： ```...
TS打包解包代码
10-10
1. 编译TS代码：使用tsc（TypeScript编译器）将TS文件转换为ES5或ES6的JS文件，同时生成source map。 2. 处理静态资源：使用Webpack或Rollup将CSS、图片、字体等资源打包进JS文件或单独输出。 3. 模块合并：通过模块...
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
11-26
这样，经过Webpack打包后的TypeScript代码可以正确地引用Node.js模块，并且浏览器端的代码不会被意外执行。这种方法不仅适用于特定场景，还可以应用于服务端渲染的TypeScript代码打包。 然而，当项目依赖较少时，...
webpack5.0配置 填坑记
gbzaq12359的博客
03-25 553
HtmlWebpackPlugin 在配置时需要特别注意 template属性的配置，建议使用默认配置，可以在filename配置时更改index.html文件的存放位置 webpack5.0中会自动生成 .LICENSE.txt后缀的文件，但是这个文件对我们来说其实是没什么意义的。如下图： 是因为 Webpack 5.0 默认压缩代码工具为terser-webpack-plugin，该工具默认会生成 LICENSE.txt 文件。 解决：npm install terser-webpack-plu
（六）webpack 配置文件的分离
wzwccc的博客
07-18 388
1.两种方式分离配置文件 //法一：直接指定配置文件 //package.json "scripts": { "serve": "webpack serve --open --config ./config/webpack.dev.js", "build":"webpack --config ./config/webpack.prod.js" } //法二：给一个配置文件传递参数 //package.json "scripts": { "serve": "webpack serve --open
解决webpack 打包出现额外的xxxx.LICENSE.js文件
LHJBK的博客
03-19 1333
最近打包遇到了打包完成之后，除了xxxx.js之外，还会多一个xxxx.LICENSE.js文件，很苦恼，百度后发现，原来是webpack5的原因，如果你也遇到这样的问题，请确认使用的webpack版本是不是5及以上。 参考如下博客后问题完美解决，感谢。 https://blog.csdn.net/qq_39903567/article/details/114384242 需要注意的是： 1. 虽然博客里面分析说无需安装terser-webpack-plugin，但是我这边不安装是没有办法解决.
webpack实现打包ts文件
qq_45780736的博客
02-17 1453
webpack实现ts文件打包！
ts和webpack基本组合【使用webpack打包ts代码】
weixin_58017233的博客
07-06 1635
使用tsc --init初始化项目，生成tsconfig.json 文件使用在项目中生成一个package.json文件，用来管理项目创建src/index.ts文件，用来编写ts代码安装使用webpack所需要的依赖cnpm i -DD 表示的是开发依赖安装包webpack——打包工具的核心代码——webpack 命令行工具，通过命令行使用webpacktypescript—— ts的核心包ts-loader——，通过ts-loader。
Webpack4 配置TS Loader
liujun2son
07-19 9550
TypeScript 是 JavaScript 的一个超集，主要提供了类型检查系统和对 ES6 语法的支持，但不支持新的 API。 目前没有任何环境支持运行原生的 TypeScript 代码，必须通过构建把它转换成 JavaScript 代码后才能运行。 TypeScript 官方提供了能把 TypeScript 转换成 JavaScript 的编译器:typescript 。 你需要在当前项目根...
TypeScript简明教程04--使用webpack打包ts文件详解
m0_55842907的博客
05-13 2237
前言：作为前端开发人员，webpack为项目开发完成打包的工具都应该了解过，简单的配置项的含义和用处是需要掌握的。对于webpack打包ts文件如何进行相关的配置是本文所需要讨论的重点。 一、初始化以及文件创建 使用npm init -y命令创建package.json文件，如下图所示： 安装webpack相关插件以及ts加载解析插件typescript-loader。 在package.json中可以看到以下的配置项，证明安装成功。 简单的配置一下tsconfig.j...
webpack打包ts文件
03-31
要使用webpack打包typescript文件，您需要安装以下依赖项： 1. `webpack`: 用于打包应用程序。 2. `webpack-cli`: 用于在命令行上运行webpack。 3. `ts-loader`: 用于加载typescript文件并将其转换为JavaScript。 4...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值