import * as path from "path";
import * as webpack from "webpack";
// in case you run into any typescript error when configuring `devServer`
import "webpack-dev-server";
const config: webpack.Configuration = {
mode: "production",
entry: "./foo.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "foo.bundle.js",
},
};
export default config;
关键词:webpack ts 编写配置文件
要使用 Typescript 来编写 webpack 配置,你需要先安装必要的依赖,比如 Typescript 以及其相应的类型声明,类型声明可以从 DefinitelyTyped 项目中获取,依赖安装如下所示:
完成依赖安装后便可以开始编写配置文件,示例如下:
webpack.config.ts
该示例需要 typescript 版本在 2.7 及以上,并在
tsconfig.json
文件的 compilerOptions 中添加esModuleInterop
和allowSyntheticDefaultImports
两个配置项。值得注意的是你需要确保
tsconfig.json
的compilerOptions
中module
选项的值为commonjs
,否则 webpack 的运行会失败报错,因为ts-node
不支持commonjs
以外的其他模块规范。你可以通过三个途径来完成 module 的设置:
tsconfig.json
文件tsconfig.json
并且添加ts-node
的设置。tsconfig-paths
第一种方法就是打开你的
tsconfig.json
文件,找到compilerOptions
的配置,然后设置target
和module
的选项分别为"ES5"
和"CommonJs"
(在target
设置为es5
时你也可以不显示编写module
配置)。第二种方法 就是添加 ts-node 设置:
你可以为
tsc
保持"module": "ESNext"
配置,如果你是用 webpack 或者其他构建工具的话,为 ts-node 设置一个重载(override)。ts-node 配置项第三种方法需要先安装
tsconfig-paths
这个 npm 包,如下所示:安装后你可以为 webpack 配置创建一个单独的 TypeScript 配置文件,示例如下:
tsconfig-for-webpack-config.json
提示
ts-node 可以根据
tsconfig-paths
提供的环境变量process.env.TS_NODE_PROJECT
来找到tsconfig.json
文件路径。process.env.TS_NODE_PROJECT
变量的设置如下所示:package.json
之所以要添加
cross-env
,是因为我们在直接使用TS_NODE_PROJECT
时遇到过"TS_NODE_PROJECT" unrecognized command
报错的反馈,添加cross-env
之后该问题也似乎得到了解决,你可以查看这个 issue获取到关于该问题的更多信息。参考文档