Ответ 1

Вы можете использовать TS в качестве файла конфигурации (webpack.config.ts)

Существует четкая подсказка для этого, см. Исходный код

В используемом ** ** интерпретируемом модуле есть список файлов расширений и их загрузчиков.

В выделенном коде webpack генерирует массив всех возможных расширений для файлов по умолчанию.

Например, дайте webpack.config, вы получите массив с

• webpack.config.ts
• webpack.config.js
• ...... и т.д.

Для этого вам нужно установить один из пакетов, поддерживающих загрузку вашего расширения.

Например, у TS есть несколько пакетов node, которые позволяют требовать ( "something.ts" ), и пакет выполнит эту работу.

В пакете интерпретировать указано, что требуется один из этих пакетов

ts- node, typescript - node, typescript -register, typescript -require

Итак, npm/пряжа ts- node, тогда просто поместите файл webpack.config.ts, и он просто сработает!

EDIT. Документация Webpack теперь посвящена разделу языков конфигурации, который включает в себя TypeScript, CoffeeScript и Babel и JSX

Ответ 2

Я написал запись в блоге "Написание конфигурации Webpack в TypeScript" для получения полной информации, вот TL;DR:

Принятый ответ не помог мне, я также обнаружил, что зависимость ts-node не поддерживает инструкции импорта ES6.

Самый простой метод, который я нашел, - просто запустить инструмент TypeScript tsc для преобразования вашего TypeScript в JavaScript, а затем запустить инструмент webpack как обычно:

tsc --lib es6 webpack.config.ts
webpack --config webpack.config.js

Это имеет дополнительное преимущество: вам не нужно устанавливать какие-либо зависимости, как в другом ответе.

Бонусный верхний совет

Типы Webpack представляют собой смесь синтаксиса Webpack 1 и 2. Вы можете использовать TypeScript, чтобы убедиться, что вы используете только синтаксис Webpack 2 и удалите все типы из синтаксиса Webpack 1. Я сделал это, создав несколько новых типов, расширяющих типы Webpack:

// webpack.common.ts
import * as webpack from "webpack";

export type INewLoader = string | webpack.NewLoader;
export interface INewUseRule extends webpack.NewUseRule {
  use: INewLoader[];
}
export interface INewLoaderRule extends webpack.NewLoaderRule {
  loader: INewLoader;
}
export type INewRule = INewLoaderRule | INewUseRule |
    webpack.RulesRule | webpack.OneOfRule;
export interface INewModule extends webpack.NewModule {
  rules: INewRule[];
}
export interface INewConfiguration extends webpack.Configuration {
  module?: INewModule;
}
export interface IArguments {
  prod: boolean;
}
export type INewConfigurationBuilder = (env: IArguments) => INewConfiguration;

Затем вы можете использовать эти типы в своей конфигурации Webpack:

import * as path from "path";
import * as webpack from "webpack";
import { INewConfiguration, INewConfigurationBuilder } from "./webpack.common";

const configuration: INewConfiguration = {
  // ...
};
export default configuration;

Или вы можете передать аргументы в свой файл конфигурации webpack следующим образом:

import * as path from "path";
import * as webpack from "webpack";
import { IArguments, INewConfiguration, INewConfigurationBuilder } from "./webpack.common";

const configurationBuilder: INewConfigurationBuilder = 
  (env: IArguments): INewConfiguration => {
    const isDevBuild = !(env && env.prod);
    const configuration: INewConfiguration = {
      // ...
    };
    return configuration;
  };
export default configurationBuilder;

Вы можете передать аргументы в webpack следующим образом:

webpack --env.prod

Ответ 3

Если вы используете vscode в качестве редактора (или, возможно, другие, которые поддерживают синтаксис ввода JSDoc), и вы заинтересованы только в проверке типов вашего файла, чтобы обеспечить завершение для вашего объекта конфигурации, вы можете сделать это следующим образом:

В vscode вы можете сделать это так:

• npm я -D @types/webpack
• добавьте комментарии к аннотации типа в ваш файл webpack.config.js, например:

webpack.config.js:

// @ts-check

/** @type { import('webpack').Configuration } */
let config = {
    ...
}

module.export = config;

Ответ 4

Я не могу найти подсказки в исходном коде webpack, что вы можете использовать файл webpack.config.ts непосредственно в качестве конфигурации для своего проекта.

Конечно, поскольку TypeScript является просто надмножеством для Javascript, вы всегда можете использовать TypeScript для записи своего webpack.config.ts и конвертировать его в действительный файл Javascript webpack.config.js.