Webpack4 配置TS Loader

TypeScript 是 JavaScript 的一个超集，主要提供了类型检查系统和对 ES6 语法的支持，但不支持新的 API。目前没有任何环境支持运行原生的 TypeScript 代码，必须通过构建把它转换成 JavaScript 代码后才能运行。

TypeScript 官方提供了能把 TypeScript 转换成 JavaScript 的编译器:typescript 。你需要在当前项目根目录下新建一个用于配置编译选项的 tsconfig.json 文件( 不是必须的 )，编译器typescript `默认会读取和使用这个文件，配置文件内容大致如下：

tsconfig.js更多的配置

{"compilerOptions": {"module": "commonjs", // 编译出的代码采用的模块规范"target": "es5", // 编译出的代码采用 ES 的哪个版本"sourceMap": true, // 输出 Source Map 方便调试"importHelpers": true // 减少代码的冗余，类似：@babel/plugin-transform-runtime},"exclude": [ // 不编译这些目录里的文件"node_modules"]
}

通过 npm install typescript -save-dev 安装编译器到本地项目

新建一个项目

|-- package.json
|-- tsconfig.js
|-- src
|   |       `-- common.ts
|   |       `-- index.html
|           `-- main.ts
`-- webpack.config.js

tsconfig.js 编译器的配置文件

// 1.typescript 编译器的配置文件：
{// 2.编译的参数"compilerOptions": {"module": "commonjs", // 编译出的代码采用的模块规范"target": "es5", // 编译出的代码采用 ES 的哪个版本"sourceMap": true, // 输出 Source Map 方便调试"importHelpers": true // 减少代码的冗余，类似：@babel/plugin-transform-runtime},// 3.排除项 "exclude": [ // 不编译这些目录里的文件"node_modules"]
}

package.json

{"name": "testtsloader","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack --mode development","build": "webpack --mode production"},"author": "liujun","license": "ISC","devDependencies": {"awesome-typescript-loader": "^5.2.1","typescript": "^3.5.3","webpack": "^4.35.3","webpack-cli": "^3.3.6"},"dependencies": {}
}

1.scripts 属性里编写了3个脚本：其中 dev 对应的脚本是构建测试版；其中 build对应的脚本是构建发布版

2.使用的开发依赖有：awesome-typescript-loader typescript webpack webpack-cli

webpack.config.js

const path = require('path');
module.exports = {entry: './src/main.ts',output: {filename: 'bundle.js',path: path.resolve(__dirname, './dist'), },resolve: {// 执行import { showHelloWorld } from './common'; // 先尝试 ts 后缀的 TypeScript 源码文件，在尝试 js 后缀 JavaScript 源码文件extensions: ['.ts', '.js'] },module: {rules: [{test: /\.ts$/,// use:['awesome-typescript-loader']// 1.该 Loader 是把 TypeScript 转换成 JavaScript, 只负责新语法的转换，新增的API不会自动添加polyfillloader: 'awesome-typescript-loader'}]},devtool: 'source-map',// 输出 Source Map 方便在浏览器里调试 TypeScript 代码
};

use接收一个数组，数组中可存放字符串和对象，并且use的别名是 loaders；如果不用use也可直写loader

main.ts

// 1.通过 CommonJS 规范导入 showHelloWorld 函数
import { showHelloWorld } from './common';
// 2.执行 showHelloWorld 函数
showHelloWorld('Webpack的安装和使用');

common.ts

export const showHelloWorld = (content:string) => {alert('hello world')
}// 2.class 定义类也是es6新的语法。目的是要把es6新的语法转成es5语法
class Person {// 定义一个变量private name: stringconstructor(name: string){this.name = 'person'}testSet() {}
}

index.html

<html>
<head><meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="../dist/bundle.js"></script>
</body>
</html>

本地安装 webpack 和用到的loader

npm install webpack@4.35.3  --save-dev
npm install webpack-cli@3.3.6  --save-devnpm install awesome-typescript-loader@5.2.1  --save-dev // 负责 将 TS 转换成 ES5语法
npm install typescript@3.5.3  --save-dev  // 负责编译 TS 文件为 JS 文件

在项目的根目录，执行脚本构建项目

npm run dev

打包后输出的结果

|-- dist
|   |-- bundle.js
|   |-- bundle.js.map
|-- node_modules
|-- package-lock.json
|-- package.json
|-- tsconfig.js
|-- src
|   |-- common.ts
|   |-- index.html
|   `-- main.ts
`-- webpack.config.js

打包之后的 bundle.js 文件的部分内容：

/***/ "./src/common.ts":
/*!***********************!*\!*** ./src/common.ts ***!\***********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {"use strict";Object.defineProperty(exports, "__esModule", { value: true });
exports.showHelloWorld = function (content) {alert('hello world');
};
// 2.class 定义类也是es6新的语法。目的是要把es6新的语法转成es5语法
var Person = /** @class */ (function () {function Person(name) {this.name = 'person';}Person.prototype.testSet = function () {};return Person;
}());/***/ }),/***/ "./src/main.ts":
/*!*********************!*\!*** ./src/main.ts ***!\*********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {"use strict";Object.defineProperty(exports, "__esModule", { value: true });
// 1.通过 CommonJS 规范导入 showHelloWorld 函数
var common_1 = __webpack_require__(/*! ./common */ "./src/common.ts");
// 2.执行 showHelloWorld 函数
common_1.showHelloWorld('Webpack的安装和使用');/***/ })/******/ });

总结：

上面webpack.config.js配置中的use通过正则 /.ts$/ 匹配所有以 .ts为后缀的 TS文件，再使用awesome-typescript-loade 去处理。具体处理流程如下：

1.通过awesome-typescript-loade 把 TypeScript 转换成 JavaScript( 新增的语法会转换为ES5，新增API不会 )
2.typescript 是一个编译器，把 TypeScript 转换成 JavaScript 的编译器。

项目源码

Webpack4 配置TS Loader相关推荐

六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
[ webpack4 ] 配置属于自己的打包系统教程（最终篇）—— 环境配置篇
GitHub 完整配置文件地址: https://github.com/yhtx1997/w... 由于篇幅过长分三次发布,建议按顺序看 [ webpack4 ] 配置属于自己的打包系统教程(一)-- ...
webpack4配置vue环境和一些小坑。
初始化一些文件和依赖新建一个testwebpack的文件夹. 然后在该文件夹下: npm init 1 这时候会出现一个pack.json文件. npm i webpack vue vue-loa ...
超级详细的手写webpack4配置来启动vue2项目（附配置作用）
基础目录结构以及各个文件的作用初始npm项目 npm init 一路回车,一律使用默认的npm项目配置 package.json修改scripts 如下: {"name": &q ...
Webpack4 配置 Resolve
Webpack4 配置 Resolve Webpack在启动后会从webpack.config.js 配置文件中的enter属性指定的入口模块出发找出所有依赖的模块,Resolve 的作用就是:配置 ...
配置TS + node 的开发环境
直接配置ts的开发环境还是挺麻烦的,这里我总结了一套开发模板,可以在用的时候可以考虑直接clone这个项目, 以这个项目为基础模板https://github.com/fish-node/templa ...
webpack4配置详解
//方式一:单文件写法 entry: {index: './src/pages/route.js',//about: './src/pages/about.js',//other:()=>{.. ...
webpack4配置基础
前言为什么要使用构建工具? 1.转换ES6语法(很多老版本的浏览器不支持新语法) 2.转换JSX 3.CSS前缀补全/预处理器 4.压缩混淆(将代码逻辑尽可能地隐藏起来) 5.图片压缩 6. ...
webpack4配置(1)-打包一个js文件
常用指令 npm install == npm i npm install --save == npm i -S npm insall --save-dev == npm i -D 两者的区别:-D只 ...

Webpack4 配置TS Loader

Webpack4 配置TS Loader相关推荐

最新文章

热门文章