Webpack 接受用多种编程和数据语言编写的配置文件。支持的文件扩展名列表可以在 node-interpret 包中找到。使用 node-interpret,webpack 可以处理许多不同类型的配置文件。
要在 TypeScript 中编写 webpack 配置,首先需要安装必要的依赖项,即 TypeScript 和来自 DefinitelyTyped 项目的相关类型定义
npm install --save-dev typescript ts-node @types/node @types/webpack
# and, if using webpack-dev-server < v4.7.0
npm install --save-dev @types/webpack-dev-server
然后继续编写您的配置
webpack.config.ts
import path from 'path';
import 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;
tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
}
}
上面的示例假设使用 TypeScript 版本 >= 2.7 或更高版本,并在您的 tsconfig.json
文件中使用新的 esModuleInterop
和 allowSyntheticDefaultImports
编译器选项。
请注意,您还需要检查您的 tsconfig.json
文件。如果 tsconfig.json
中 compilerOptions
中的 module
为 commonjs
,则设置已完成,否则 webpack 将因错误而失败。这是因为 ts-node
不支持除 commonjs
之外的任何模块语法。
这个问题有三种解决方案
tsconfig.json
。tsconfig.json
并添加 ts-node
的设置。tsconfig-paths
。**第一个选项**是打开您的 tsconfig.json
文件并查找 compilerOptions
。将 target
设置为 "ES5"
,并将 module
设置为 "CommonJS"
(或完全删除 module
选项)。
**第二个选项**是添加 ts-node
的设置
您可以为 tsc
保持 "module": "ESNext"
,如果您使用 webpack 或其他构建工具,请为 ts-node
设置覆盖。 ts-node 配置
{
"compilerOptions": {
"module": "ESNext",
},
"ts-node": {
"compilerOptions": {
"module": "CommonJS"
}
}
}
**第三个选项**是安装 tsconfig-paths
包
npm install --save-dev tsconfig-paths
并为您的 webpack 配置创建一个单独的 TypeScript 配置
tsconfig-for-webpack-config.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"esModuleInterop": true
}
}
然后设置 tsconfig-paths
提供的环境变量 process.env.TS_NODE_PROJECT
,如下所示
package.json
{
"scripts": {
"build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"
}
}
类似地,要使用CoffeeScript,您需要先安装必要的依赖项
npm install --save-dev coffeescript
然后继续编写您的配置
webpack.config.coffee
HtmlWebpackPlugin = require('html-webpack-plugin')
webpack = require('webpack')
path = require('path')
config =
mode: 'production'
entry: './path/to/my/entry/file.js'
output:
path: path.resolve(__dirname, 'dist')
filename: 'my-first-webpack.bundle.js'
module: rules: [ {
test: /\.(js|jsx)$/
use: 'babel-loader'
} ]
plugins: [
new HtmlWebpackPlugin(template: './src/index.html')
]
module.exports = config
在下面的示例中,使用 JSX(React JavaScript Markup)和 Babel 来创建一个 webpack 可以理解的 JSON 配置。
感谢 Jason Miller
首先,安装必要的依赖项
npm install --save-dev babel-register jsxobj babel-preset-es2015
.babelrc
{
"presets": ["es2015"]
}
webpack.config.babel.js
import jsxobj from 'jsxobj';
// example of an imported plugin
const CustomPlugin = (config) => ({
...config,
name: 'custom-plugin',
});
export default (
<webpack target="web" watch mode="production">
<entry path="src/index.js" />
<resolve>
<alias
{...{
react: 'preact-compat',
'react-dom': 'preact-compat',
}}
/>
</resolve>
<plugins>
<CustomPlugin foo="bar" />
</plugins>
</webpack>
);