TypeScript 构建工具之 webpack

fishmemory7sec

已于 2024-08-14 16:06:34 修改

阅读量482

点赞数 12

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

于 2024-08-14 14:02:53 首次发布

本文链接：https://blog.csdn.net/fishmemory7sec/article/details/141140940

版权

TypeScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在实际开发中，直接使用TypeScript 编译器的情况不多。
在项目中，需要使用构建工具对代码进行打包，不可能脱离项目使用TypeScript 编译器单独打包TypeScript 。

那如何将 webpack 和 TypeScript 进行集成？

参考文档：
webpack中文文档
 Webpack TypeScript

在根目录下创建`package.json`文件：

npm init -y

安装核心依赖

首先确保已经安装了 Node.js 和 npm（或 yarn）。
在项目目录中，安装 Webpack 和相关的加载器及插件：
- webpack：Webpack 的核心包。负责实际的模块打包和资源处理工作。
- webpack-cli：是 Webpack 的命令行工具，提供命令好界面。
- ts-loader：用于在 Webpack 中处理 TypeScript 文件。
- typescript：TypeScript 编译器。

使用 npm 安装这些包的命令如下：

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

配置 Webpack

在项目根目录下创建一个webpack.config.js文件，用于配置 Webpack。

基本配置示例：

// 引入 Node.js 的内置模块 path
const path = require('path');

// module.exports用于导出 Webpack 的配置对象。
// webpack中的所有配置信息都写在 module.exports 里。
// 这个配置对象包含了诸如入口文件、输出设置、加载器规则、插件等信息，用于告诉 Webpack 如何构建项目。
module.exports = {
  // 指定入口文件
  entry: './src/index.ts',

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

  // 指定 webpack 打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // 指定规则生效的文件
        test: /\.ts$/, // 表示匹配所有的后缀名为ts的文件
        // 要使用的loader
        use: 'ts-loader',
        // 要排除的文件夹(只要路径里有node_modules,就不编译)
        exclude: /node_modules/,
      }
    ]
  },
  
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
}

在这个配置中：

const path = require('path');用于引入 Node.js 的内置模块 path。
module.exports用于导出 Webpack 的配置对象。这个配置对象包含了诸如入口文件、输出设置、加载器规则、插件等信息，用于告诉 Webpack 如何构建项目。
- entry指定了项目的入口文件。
- output定义了输出的文件名和目录。
- module.rules配置了对 .ts 文件的处理规则，使用 ts-loader进行编译，并排除了 node_modules目录下的文件。
- resolve.extensions使得在导入模块时可以省略文件扩展名。

配置 TypeScript

在项目根目录下创建一个tsconfig.json文件，这是 TypeScript 的配置文件。
可以直接创建文件，使用命令行工具自动生成：

tsc --init

配置示例：

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

编写 TypeScript 代码

在项目的src目录下创建 TypeScript 文件，例如index.ts，并编写你的 TypeScript 代码。

运行 Webpack 构建

直接使用npx执行命令：

npx webpack

在package.json文件配置一个执行命令后通过npm执行

在package.json文件增加一个配置：

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

配置后，就可以运行以下命令来启动 Webpack 构建：

npm run build

执行命令后，生成dist文件夹，打包成功。

webpack集成typescript后，如何在html中运行？

当使用 Webpack 集成 TypeScript 后，可以通过以下步骤在 HTML 中运行打包后的代码：

安装必要的插件

html-webpack-plugin：这是一个非常常用的 Webpack 插件，用于自动生成 HTML 文件，并将打包后的 JavaScript 文件注入到其中。
使用 npm 安装这个插件：

npm install html-webpack-plugin --save-dev

配置 Webpack

在webpack.config.js文件中引入并配置html-webpack-plugin：

// 引入 Node.js 的内置模块 path
const path = require('path');
// 引入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 配置webpack插件
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 指定模板 HTML 文件的路径
    }),
  ],
};

在这个配置中，创建一个HtmlWebpackPlugin的实例，并指定了一个模板 HTML 文件的路径。这个插件会根据模板文件生成一个新的 HTML 文件，并将打包后的 JavaScript 文件自动注入到其中。

创建 HTML 模板文件

在项目的src目录下创建一个index.html文件，作为模板文件。这个文件包含基本的 HTML 结构。

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页模板</title>
</head>
<body>
  
</body>
</html>

打包后的 JavaScript 文件会自动注入到<script>标签中。

运行 Webpack 构建

运行以下命令来启动 Webpack 构建：

npm run build

Webpack 会根据配置进行构建，并在dist目录下生成一个新的 HTML 文件，其中包含了打包后的 JavaScript 文件的引用。

在浏览器中运行

打开生成的 HTML 文件（位于dist目录下），浏览器就会加载并执行打包后的 TypeScript 代码。

如何实现项目有变更时，自动重新构建项目，并自动刷新浏览器？

安装必要的插件

webpack-dev-server：用于启动一个开发服务器，支持热模块替换（HMR）等功能。
使用 npm 安装这个插件：

npm install webpack-dev-server --save-dev

相当于在项目里安装了一个内置的Webpack 开发服务器，可以让项目直接在服务器中运行。这个服务器是与Webapck关联的，当项目有变更时，可以自动构建并更新浏览器页面。

配置 Webpack

运行 Webpack

运行以下命令来启动开发服务器：

npx webpack serve

配置后，使用package.json 配置 npm run serve ，执行命令就报错了，emmm，这一步就等我研究研究再来补上吧=-= 哪位大佬走过路过不要错过，求指点啊啊啊啊啊

fishmemory7sec

关注

12
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
TypeScript 构建工具之 webpack

在实际开发中，直接使用TypeScript 编译器的情况不多。在项目中，需要使用构建工具对代码进行打包，不可能脱离项目使用TypeScript 编译器单独打包TypeScript。
复制链接

扫一扫