webpack 集成 Typescript && Less
TypeScript是javascript的一个类型化的超集，可以编译成纯JavaScript，在本指南中，我们将学习如何将Typescript与webpack集成。
基本设置
为了开始使用webpack和Typescript，首先我们必须在我们的项目中安装webpack。 如果您没有这样做，请查看webpack安装指南。
要开始使用包含Typescript的webpack，您需要几件事情：
- 在您的项目中安装
Typescript编译器。 - 安装一个
Typescript加载器（在这种情况下，我们使用的是ts-loader）。 - 创建一个
tsconfig.json文件以包含我们的TypeScript编译配置。 - 创建
webpack.config.js以包含我们的webpack配置。 - 您可以通过运行以下方法从
npm安装TypeScript编译器和TypeScript加载器：
npm install --save-dev typescript ts-loader
tsconfig.json
tsconfig文件可以作为一个空配置文件启动，在这里可以看到一个基本配置示例，用于将TypeScript编译为es5，并为JSX提供支持。{ "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react", "allowJs": true } }
您可以在TypeScript文档网站上阅读有关tsconfig.json配置选项的更多信息
webpack.config.js
具有TypeScript配置的基本Webpack应该沿用这些代码：
const path = require("path");
const htmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
entry: {
app: ‘./src/index.ts‘
},
output: {
path: path.resolve(__dirname, "./dist"),
filename: ‘bundle/[name].bundle.js‘
},
mode:"development",
devtool: ‘inline-source-map‘,
resolve: {
extensions: [‘.tsx‘, ‘.ts‘, ‘.js‘]
},
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: "ts-loader"
}
]
},
{
test: /\.less$/,
use: [
{
loader: ‘style-loader‘
},
{
loader: ‘css-loader‘
},
{
loader: ‘less-loader‘
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: ‘Output Management‘
})
]
};
这里我们将我们的入口点指定为我们当前目录中的index.ts，一个名为bundle.js的输出文件和我们的TypeScript加载器，负责将我们的TypeScript文件编译为JavaScript。 我们还添加resolve.extensions来指示webpack在解析Typescript模块时使用什么文件扩展名。
Typescript loaders
目前有两种可用于TypeScript的loaders：
-
awesome-typescript-loader
-
ts-loader
令人敬畏的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
一旦加载程序安装，我们需要告诉webpack我们要在任何其他加载程序之前使用enforce：‘pre‘配置标志来运行这个加载程序。 最后，我们需要通过指定devtool属性来启用webpack中的源映射。 目前我们使用‘inline-source-map‘设置来阅读有关此设置的更多信息，并查看其他选项，以查看devtool文档。
使用第三方库
从npm安装第三方库时，请务必记住安装该库的typing定义。
您可以从@types存储库,安装第三方库定义。
例如，如果我们要安装lodash，我们可以运行以下命令来获取它的输入：
npm install --save-dev @types/lodash
有关更多信息，请参阅此博文
导入非代码部分资源
要使用TypeScript的非代码资源，我们需要告诉TypeScript如何推迟这些导入的类型。
为此，我们需要创建一个custom.d.ts文件。 此文件表示我们项目中TypeScript的自定义定义。
在我们的custom.d.ts文件中，我们需要为svg导入提供一个定义，为此，我们需要将以下内容放在此文件中：
declare module "*.svg" { const content: any; export default content; }
在这里，我们通过指定任何以.svg结尾的导入，为svg声明一个新模块，并将该模块的类型定义为any。 如果我们想要更明确地说这是一个url，我们可以将类型定义为字符串。
这不仅适用于svg，而且还适用于您可能希望使用的任何自定义加载器，包括css，scss，json或您可能希望在项目中加载的任何其他文件。