TypeScript（3）：使用WebPack工具

作者：李俊才
CSDN：jcLee95
邮箱：291148484@163.com

专题目录：https://blog.csdn.net/qq_28550263/article/details/115601920

Webpack本身并非TypeScript中的内容，但我们之后需要用到它，并且Webpack也是前端工程化中一个重要的工具。因此我们决定介绍WebPack。

1. 体验webpack
2. 使用WebPack编译ts文件

1. 体验webpack

同样，我们还是先建立一个新的项目目录。今天的项目就叫03_webpack，建立目录不再演示了，现在我们通过cd命令切换到该目录。紧接着，输入如下命令：

npm init -y

可以看到目录03_webpack下生成了一个名为package.json的文件，如图：

这个文件先放在这，一会我们还要用它。

接着，在该文件夹中本地局部安装webpack，即运行以下命令：

npm install webpack --save-dev

运行该命令需要网络，命令将从网络下载webpack模块以及其依赖模块，存放在该项目文件夹中新建的名为node_modules的子目录中，并生成了package-lock.json文件。如图：

对了，细心的你可能已经发现除了以上变化以外，package.json文件中还多了一项为devDependencies的配置，如图上所示。

不过这还没完成，接着请继续输入以下命令安装webpack-dev-server：

npm install webpack-dev-server

也可以用webpack的脚手架CLI（命令行工具）进行安装，如下：

npm install --save-dev webpack webpack-cli

如果需要使用webpack打包ts文件，需要安装ts-loader：

npm install --save-dev ts-loader

现在，在我们的node_modules目录中自然也多了很多新安装的包，包括webpack-dev-server及其相关的依赖。但是我们所关注的，到底还是num配置文件package.json，可以看到，现在又多了新的内容

即webpack和webpack-dev-server安装下来，该文件里多了以下两个配置项：

  "devDependencies": {"webpack": "^5.31.0"},"dependencies": {"webpack-dev-server": "^3.11.2"}

现在我们对package.json文件进行修改——在"script"部分增加一个快速启动webpack-dev-server服务的脚本：

{// ...此处省略其他内容"script"{"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server --open --config webpack.config.js"},
}

如图：

当然上面指向的这个脚本"webpack.config.js"目前还并不存在，因此现在让我们来创建它，并添加以下内容：

// "./webpack.config.js"：
var path = require("path");var config = {entry:{// 指示 webpack 应该使用哪个模块作为构建其内部 依赖图的开始main: "./main"   // 表示当前目录下的"main.js"文件},output:{// 这些内容告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件path: path.join(__dirname, "./dist"),   // 输出的根目录publicPath: "/dist/",              // 相对于输出根目录打包存储文件的目录filename: "main.js"                // 存储的文件名}
};module.exports = config;

先让我们解释以下webpack此配置文件吧。
首先，在配置中设定的入口是该项目目录下的"main.js"文件，我们并没建立这个文件，因此现在来创建它，并简单随意地写入一条语句：

// main.js
document.write("Hello webpack...")

然后必须认识到webpack内部实现其实我们已经没必要关心了，当我们使用命令npm install webpack以及webpack-dev-server后，相关的脚本以及其它文件已经被安装到相应的文件夹中。虽然webpack并非只是一个名为webpack.config.js的配置文件，但是对我们使用者而言却往往只需要关系通过该文件将必要的参数告诉给webpack以让其在Node.js环境下运行时知道该满足哪些特定的运行参数。
然后再来看配置文件中有关的代码。在本配置中核心部分是如下框架：

var config = {};module.exports = config;

其中:

config={}顾名思义，里面描述的是具体的一些配置参数，一般至少包括入口(entry)、输出(output)的信息。
module.exports，如果使用ECMAScript 6.0语法则相当于写成export default config。module.exports用于暴露我们的配置给webpack获取。

这里有一些概念需要理解。起初在JavaScript中是没有模块的概念的。当前端工程引入来源于后端的模块话概念后，一个.js文件可视为一个模块（module），它可以被任意其他的模块引入。

也就是引入该模块的其它模块能够拥有该模块中所持有的对象。这里有一个问题是被引入的对象都是在原模块自己的作用域中而发起引入的那个模块虽然获取到了被引入的对象，但是并不能访问作用域里的东西。这里的所以提供了export实际上就是决定为调用模块者提供的暴露接口。
其实在部分功能上，又有点像Java中的包。写过Java的同学应该熟悉如果你的一个文件要作为可以被导入的模块，那么你就要用package语句在该文件上面声明这个取决于路径的模块名（一般是公司的反域名）。比如

package org.apache.poi.hssf.usermodel;

这个package要说真又什么作用也就是给Java中import语句用的，这样你在调用该模块的时候就可以：

import org.apache.poi.hssf.usermodel.文件名;

虽然有一些区别，说到底ECMAScript中的exports和Java中的packsge实际上都是为import提供暴露服务。

鉴于有同学可能不了解Node.js，最后顺便提以下开头的那一条代码。
开头的那句var path = require("path");只是因为我们在后面使用了path.join()函数，该函数的格式如下：
```
path.join([path1][, path2][, ...])
```
这是Node.js的 Path模块 中的一个函数，用于连接两端路径。在很多编程语言的内建模块中都有这个函数，比如在Python中需要用import os.path导入Python的Path模块，并使用path.join(path1, path2)连接，这里是一样的。
而Node.js的语句var path = require("path")就相当于在Python中的import os.path，仅此而已。
有小朋友问，直接使用字符串相加连接两端路径它不乡吗，比如：
```
path1 = "D://code"
path2 = "2"
path = path1 + "//" + path2
```
这种写法不仅麻烦而且无法跨平台。因为不同操作系统上的路径是不一样的。

再回到webpack。可以看到，我们只是为了提高可读性，将所有的配置写到config所定义的变量中。
现在，我们来写一个html文件，并第一次使用webpack对这个项目进行打包。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>03_webpack</title></head><body><div id="app">Hello html!</div><script type="text/javascript" src="/dist/main.js"></script></body>
</html>

现在，我们的项目看起来是这样的：

打开终端，进入该项目文件夹，运行我们的项目：

npm run dev

在浏览器中输入url：http://127.0.0.1:8887/，可以看到显示以下内容：

这里的地址127.0.0.1为本机回送地址，目前的主流操作系统中配置了本地的域名解析，将localhost解析到127.0.0.1，因此你也可以输入http://localhost:8887，8887即我们所使用的端口号。还记得吗，ip和端口号是我们在package.json中的script下配的：

好的，如果你的程序也顺利跑起来了那么，让我们来打包吧，执行以下命令：

webpack --progress --hide-modules

2. 使用webpack打包编译ts文件

本小节主要介绍如何使用webpack来编译ts文件为浏览器能够执行的js文件。
现在，请自行准备好一个项目文件夹用于今天的项目。
在项目的更目录下新建一个ts文件hello.ts，用于写TypeScript代码：

// hello.ts
console.log("Hellow WebPack!")

安装webpack：

npm install --save-dev webpack webpack-cli

ts-loader是一个用于Webpack的TypeScript加载器，如果使用yarn工具安装，则命令为：

yarn add ts-loader --dev

或者

npm install ts-loader --save-dev

这里，由于我们之前是全局安装的TypeScript，因此我们需要链接它：

npm link typescript

然后，初始化一个nodejs项目配置文件tsconfig.json：

npm init -y

接着，新建webpack.config.js文件，输入以下内容：

const path = require('path');                           // 对Node.js地标准库`path`进行导包
module.exports = {entry:'./hello.ts',                                   // 打包文件入口output:{filename:'hello.js',                                // 输出文件名称path:path.resolve(__dirname,'js')                  // 输出文件夹名为'es5'，需要加上前面地路径构成绝对路径},mode: 'development', module:{// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`rules: [{test: /\.tsx?$/,use: 'ts-loader',exclude: /node_modules/}]},resolve: {// Add `.ts` a resolvable extension.extensions: ['.ts']},
}

接着，在tsconfig.json的script字段中添加启动webpack的命令：

  "scripts": {"pack": "webpack"},

在改=该项目目录下运行：

npm run pack

可以看到生成了一个./js目录，在该目录下生成了一个hello.js文件。
需要指出的是，使用webpack生成的js文件和tsc命令生成的js文件完全是两码事！
tsc命令只是对TypeScript代码进行了翻译，对应成为了JavaScript代码。而webpack生成的js文件中添加了很多webpack自己的东西。

TypeScript笔记（3）—— 使用WebPack工具相关推荐

Vue 项目 build 流程解析（webpack工具解析）
Vue 项目 build 流程解析(webpack工具解析) 注:本篇文章解析框架为 vue2.0 本篇文章通过解析简单的项目打包步骤试着去了解我们的 Vue 项目是怎么打包的. build.js 干 ...
.Net 转战 Android 4.4 日常笔记（1）--工具及环境搭建
.Net 转战 Android 4.4 日常笔记(1)--工具及环境搭建原文:.Net 转战 Android 4.4 日常笔记(1)--工具及环境搭建闲来没事做,还是想再学习一门新的技术,无论何时 ...
go web框架_golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web
micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go- ...
TypeScript笔记（5）—— 基本数据类型
TypeScript(5):基本数据类型 CSDN:jcLee95 邮箱:291148484@163.com 专题目录:https://blog.csdn.net/qq_28550263/catego ...
海思入门笔记二：HiBurn工具实现镜像烧写
这里写自定义目录标题海思入门笔记:HiBurn工具实现镜像烧写第一步:裸板可使用串口先烧录boot(速度慢) 第二步:已烧好boot的板子,可使用USB快速烧录海思入门笔记:HiBurn工具实现 ...
文件笔记之javaCV 视频工具|获取视频时长|缩略图
文件笔记之javaCV 视频工具|获取视频时长|缩略图) 目录简介依赖引入实现目录简介通过javaCV 视频工具-截取视频缩略图.获取视频属性依赖引入 <!--javaCV 视频工 ...
Kail学习笔记-kali信息搜集工具之IKE-Scan
Kail学习笔记-kali信息搜集工具之IKE-Scan 一.用法二.选项三.示例一.用法 ike-scan [选项] [主机地址...] 必须在命令行上指定目标主机,除非为–file选项,在这 ...
typescript笔记
为什么没有二级标题? 搭建开发换环境安装nodejs 全局安装 typesctipt npm i -g typescript 创建一个ts文件: 使用tsc对文件进行编译: tsc xxx.ts 基 ...
Kail 学习笔记-kali信息搜集工具之Dmitry
Kail 学习笔记-kali信息搜集工具之Dmitry DMitry(Deepmagic Information Gathering Tool)是一个一体化的信息收集工具.它可以用来收集以下信息: 根 ...

TypeScript笔记（3）—— 使用WebPack工具

1. 体验webpack

2. 使用webpack打包编译ts文件

TypeScript笔记（3）—— 使用WebPack工具相关推荐

最新文章

热门文章