基础配置
首先，安装 TypeScript compiler 和 loader：
npm install --save-dev typescript ts-loader
安装完成：
tsconfig.json
设置一个基本的配置来支持 JSX，并将 TypeScript 编译到 ES5，新建tsconfig.json：
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node"
}
}
webpack.config.js
修改webpack.config.js：
const path = require('path');
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
以上设置作用：让 webpack 直接从 ./index.ts 进入，然后通过 ts-loader 加载所有的 .ts 和 .tsx 文件，并且在当前目录输出一个 index.bundle.js 文件。
新建index.ts文件
改变 lodash 在 ./index.ts 文件中的引入， 因为在 lodash 的定义中没有默认(default)的导出。
./index.ts：
import * as _ from 'lodash';
function component () {
const element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack demo - 管理资源</title>
</head>
<body>
<script src='index.bundle.js'></script>
</body>
</html>
此时，项目结构：
webpack-demo
|- package.json
|- package-lock.json
|- tsconfig.json
|- webpack.config.js
|- /dist
|- index.bundle.js
|- index.html
|- /src
|- index.js
|- index.ts
|- /node_modules
如果想在 TypeScript 中保留如import _ from 'lodash';的语法，让它作为一种默认的导入方式，需要在文件 tsconfig.json 中设置 "allowSyntheticDefaultImports" : true 和 "esModuleInterop" : true 。
Loader
在本例子中，使用 ts-loader，因为它能够很方便地启用额外的 webpack 功能，例如将其他 web 资源导入到项目中。
Source Maps
想要启用 source map，必须配置 TypeScript，以将内联的 source map 输出到编译后的 JavaScript 文件中。
修改tsconfig.json：
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node"
}
}
修改webpack.config.js：
告诉 webpack 提取这些 source map，并内联到最终的 bundle 中。
const path = require('path')
module.exports = {
mode: 'development',
entry: {
index: './src/index.js'
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
Client types
可以在 TypeScript 代码中使用 webpack 特定的特性，比如 import.meta.webpack。
并且 webpack 也会为它们提供类型支持，只需要添加一个 TypeScript reference 声明：
/// <reference types="webpack/module" />
console.log(import.meta.webpack); // 没有上面的声明的话，TypeScript 会抛出一个错误
使用第三方类库
在从 npm 安装 third party library(第三方库) 时，一定要记得同时安装此 library 的类型声明文件(typing definition)。
例如：如果想安装 lodash 类型声明文件，可以运行下面的命令：
npm install --save-dev @types/lodash
导入其他资源
想要在 TypeScript 中使用非代码资源(non-code asset)，需要告诉 TypeScript 推断导入资源的类型。
在项目里创建一个 custom.d.ts 文件，这个文件用来表示项目中 TypeScript 的自定义类型声明。
为 .svg 文件设置一个声明：
custom.d.ts：
declare module '*.svg' {
const content: any;
export default content;
}
在这里，通过指定任何以 .svg 结尾的导入(import)，将 SVG 声明(declare) 为一个新的模块(module)，并将模块的 content 定义为 any。
可以通过将类型定义为字符串，来更加显式地将它声明为一个 url。同样的概念适用于其他资源，包括 CSS, SCSS, JSON 等。