Есть
webpack.config, который написан на
ts. Сейчас я изучаю
devServer и, насколько я понял, это поле не является стандартным для
webpack.Configuration, потому нужно подключать импорт:
import type { Configuration as DevServerConfiguration } from "webpack-dev-server";
Но при этом менять тип
config не понадобилось и всё и так начало работать. Как это произошло?
Полный код:
import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import webpack from "webpack";
import type { Configuration as DevServerConfiguration } from "webpack-dev-server";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
const config: webpack.Configuration = {
entry: path.resolve(__dirname, "src", "index.tsx"),
output: {
filename: "[contenthash].index.js",
path: path.resolve(__dirname, "bundle"),
clean: true
},
mode: "production",
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "public", "index.html"),
inject: "body",
minify: false
}),
new webpack.ProgressPlugin(),
new MiniCssExtractPlugin({
filename: "css/[name].[contenthash:8].css",
chunkFilename: "css/[name].[contenthash:8].css"
})
],
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
resolve: {
extensions: [".ts", ".tsx", ".js"] // обязательно, чтобы Webpack знал, что .ts можно не указывать в импорте
},
devServer: {
port: 5000,
open: true
},
}
export default config;