将webpack与TS进行集成。

1. 安置TypeScript 编译器和 loader

npm install --save-dev typescript ts-loader

2. 在package.json同级目录下新建tsconfig.json

{ "compilerOptions": { "outDir": "./dist/", "noImplicitAny": true,
　　"sourceMap": true, // 启用SourceMap成果 "module": "es6", "target": "es5", "jsx": "react", "allowJs": true } }

3. 改削webpack.common.js

module.exports = { + entry: { + app: ‘./src/index.ts‘ + }, output: { filename: ‘[name].[chunkhash].js‘, path: path.resolve(__dirname, ‘dist‘) }, module:{ rules:[ + { + test:/\.tsx?$/, + use: ‘ts-loader‘, + exclude: /node_modules/ } ] }, + resolve:{ + extensions:[‘.ts‘, ‘.tsx‘, ‘.js‘] + }, }

ts-loader 在这里使用它可以便利地启用特别的webpack成果，例如将特别的web资源导入项目。

4. 三方库的使用

index.ts

// 此处导入必需写成import as, 否则会报错
import * as _ from ‘lodash‘; function component() { var element = document.createElement(‘div‘); element.innerHTML = _.join([‘hello‘,‘webpack‘],‘ ‘); return element; } document.body.appendChild(component());

当ts文件中使用 npm 安置第三方库时，必然要同时安置这个库的类型声明文件。你可以从 TypeSearch 中找到并安置这些第三方库的类型声明文件。

如：lodash

npm install --save-dev @types/lodash

5. 非代码文件的使用

创建 custom.d.ts 文件，用来编写自界说的类型声明。同样的理念适用于其他资源，包孕 CSS, SCSS, JSON 等。

.svg 文件进行声明设置：

declare module "*.svg" { const content: any; export default content; }

通过指定任何以 .svg 结尾的导入，，将模块的 content 界说为 any，将 SVG 声明一个新的模块。我们可以通过将类型界说为字符串，来越发显式地将它声明为一个 url。

webpack指南（五）TypeScript