[译]webpack官网文档 ：指南 -- 25.webpack&Typescript
原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/webpack-and-typescript/
Typescript是一个类型化的JavaScript的超集，它被编译成纯JavaScript，在这篇指南里我们将会学习怎样统合webpack和Typascript。
基本设定
为了开始webpack和Typescript，首先我们需要在我们的项目里安装webpack，如果你之前没有做这一步，请查看webpack安装指南。
开始在webpack里使用Typescript，需要做几件事情：
- 在项目里安装Typescript编译器。
- 安装Typescript加载器（这里我们使用ts-loader）.
- 创建一个tsconfig.json文件，在这里配置Typescript编译。
- 创建一个webpack.config.js，在这里配置webpack。
你可以通过运行以下命令，从npm安装TypeScript编译器和TypeScript加载器。
npm install --save-dev typescript ts-loader
tsconfig.js
开始的时候tsconfig文件可以是一个空的配置文件，这儿你看到的是一个把TypeScript编译成es5，同时提供JSX支持的基本配置的例子。
{
"compilerOptions":{
"outDir":"./dist/",
"sourceMap":true,
"noImplicitAny":true,
"module":"commonjs",
"target":"es5",
"jsx":"react",
"allowJs":true
}
}
你可以在TypeScript文档站点里了解更多关于tsconfig.js的配置选项。
webpack.config.js
基本的webpack+TypeScript配置是下面几行：
module.exports ={
entry:'./index.ts',
output:{
filename:'bundle.js',
path: __dirname
},
module:{
rules:[
{
test:/\.tsx?$/,
loader:'ts-loader',
exclude:/node_modules/,
}
]
},
resolve:{
extensions:[".tsx",".ts",".js"]
}
};
我们指定入口点是当前目录下的index.js文件，输出文件叫做bundle.js，还有TypeScript加载器，负责把TypeScript文件编译成JavaScript文件。我们还加了一个resolve.extensions配置，告诉webpack解析TypeScript模块对象文件都有哪些扩展名。
Typescript加载器
当前可用两种TypeScript加载器：
Awesome TypeScript加载器给出了关于awesome-typescript-loader和ts-loader之间差异的精彩解释。详细可以阅读这里。
在这个指南里我们将使用ts-loader，因为当前它可以相对容易地把webpack各种特性像无代码资源文件一样引入到你的项目里。
允许代码映射
为了允许代码映射，首先必须配置TypeScript，让它在编译后的JavaScript文件里，输出行内代码映射。通过设定sourceMap变量为true来实现：
tsconfig.json
{
"sourceMap":true
}
一旦TypeScript被配置成输出代码映射，我们需要告诉webpack让它抽出这些代码映射，并把他们传输到浏览器。这样我们就可以在代码编辑器里看到源文件。
Webpack.config.js
module.exports ={
entry:'./index.ts',
output:{
filename:'bundle.js',
path: __dirname
},
module:{
rules:[
{
enforce:'pre',
test:/\.js$/,
loader:"source-map-loader"
},
{
enforce:'pre',
test:/\.tsx?$/,
use:"source-map-loader"
}
]
},
resolve:{
extensions:[".tsx",".ts",".js"]
},
devtool:'inline-source-map',
};
首先我们增加了一个新的加载器叫做source-map-loader。
运行以下代码安装：
npm install --save-dev source-map-loader
这个加载器安装万之后，我们需要通过设定enforce: 'pre'这个配置标签，告诉webpack在其他任何加载器之前运行这个加载器。最后通过设定devtool变量，实现在webpack里允许代码映射。当前我们使用’inline-source-map’，阅读devtool文档了解更多这个设定和其他别的配置。
使用第三方库
当从npm安装第三方库的时候，很重要的一点是需要记住一定要安装这个库的typing定义。
你可以从@types仓库里安装第三方库的定义。
例如如果我们想安装lodash，我们可以运行下面的代码取得它的typings：
npm install --save-dev @types/lodash
引入无代码资源文件
通过TypeScript来使用无代码资源文件，我们需要告诉TypeScript怎样顺从这些引入的类型。
为了实现这些我们需要创建一个custom.d.ts文件。这个文件指出我们项目里TypeScript的定制定义。
在custom.d.ts文件里我们需要提供一个关于svg引入的定义，为了实现这个我们需要在这个文件里加入下面的代码：
declaremodule"*.svg"{
const content:any;
exportdefault content;
}
这里我们为所有以.svg结尾的引入定义了一个新的模块，并把它的类型定义为any。如果我们想明确这是一个URL，我们可以定义类型为字符串。
这不仅适用于svg，还适用于其他你希望使用的定制加载器，包含css，scss，json或者其他你想在项目里引入的文件。
-- End --