Est-il possible d'écrire config webpack en dactylographie?

Question

J'ai vu, lors de la recherche, qu'il y a des saisies pour webpack. Il semble donc que je puisse écrire webpack.config.js en dactylographe? Mais comment puis-je faire ça?

Answer 1

Vous pouvez utiliser TS que votre fichier de configuration (webpack.config.ts)

Il est clair que l'indice pour cela, voir le Code Source

L' ** interpréter** module utilisé il y a une liste de fichiers d'extension et de leurs chargeurs.

Dans le code surligné webpack génère un tableau de tous les possibles de l'extension par défaut des fichiers.

Par exemple, donner webpack.config , vous obtiendrez un tableau avec

• webpack.config.ts
• webpack.config.js
• ...... et ainsi de suite

Pour que cela fonctionne, vous devez installer l'un des paquets qui prennent en charge le chargement de votre extension.

Par exemple, TS a quelques nœud de forfaits qui vous permettent de require('quelque chose.ts') et le paquet va faire le travail.

L' interpréter emballage indique que l'un de ces packages est nécessaire

ts-nœud, tapuscrit-nœud, tapuscrit-inscrivez-vous, tapuscrit-exiger

Donc mnp/fils ts-nœud puis il suffit de mettre un webpack.config.ts fichier et le tout fonctionne!

EDIT: Webpack documentation a consacré une section sur la configuration de langues qui comprend Tapuscrit, CoffeeScript et Babel & JSX

Answer 2

J'ai écrit un post de blog intitulé "la Rédaction de votre Webpack de Configuration de la Machine" pour plus de détails, voici le TLDR:

La accepté de répondre ne fonctionne pas pour moi, j'ai aussi trouvé que l' ts-node de dépendance n'a pas de soutien ES6 déclarations d'importation.

La méthode la plus simple que j'ai trouvé est de simplement exécuter le Tapuscrit tsc outil pour convertir votre fichier d'enregistrement pour JavaScript, puis exécutez l' webpack outil comme d'habitude:

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

Cela a l'avantage de ne pas exiger de vous installer toutes les dépendances, comme dans les autres répondre.

Bonus Tip Top

Le Webpack types de sont un mélange de Webpack 1 & 2 de la syntaxe. Vous pouvez utiliser la Machine pour vous assurer que vous êtes seulement en utilisant Webpack 2 de la syntaxe et de supprimer tous les types de la Webpack 1 de la syntaxe. Je l'ai fait par la création de quelques nouveaux types d'étendre le Webpack types:

// 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;

Vous pouvez ensuite utiliser ces types de votre Webpack de configuration:

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

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

Ou vous pouvez passer des arguments à vos webpack fichier de configuration comme suit:

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;

Vous pouvez passer des arguments à webpack comme ceci:

webpack --env.prod

Answer 3

Je ne trouve aucun indice dans le code source du webpack, à savoir que vous pouvez utiliser un fichier webpack.config.ts directement comme configuration pour votre projet.

Bien entendu, TypeScript n'étant qu'un sur-ensemble pour Javascript, vous pouvez toujours utiliser ce dernier pour écrire votre webpack.config.ts et le convertir en un fichier Javascript valide webpack.config.js .