web-dev-qa-db-fra.com

Est-il possible d'écrire la configuration webpack en tapuscrit?

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

enter image description here

typescriptwebpack
40
starcorn

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

Il y a un indice clair pour cela, voir Code Source

Le module ** interpret ** utilisé contient une liste de fichiers d'extension et de leurs chargeurs.

Dans le code en surbrillance, le webpack génère un tableau de toutes les extensions possibles pour les fichiers par défaut.

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

  • webpack.config.ts
  • webpack.config.js
  • ...... etc

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

Par exemple, TS a des packages de nœuds qui vous permettent de require ('something.ts') et le package fera le travail.

Le package interpréter indique qu'un de ces packages est requis

noeud ts, noeud TypeScript, registre TypeScript, requis TypeScript

Donc npm/yarn ts-node puis mettez simplement un fichier webpack.config.ts et ça marchera!

[~ # ~] edit [~ # ~]: La documentation Webpack a maintenant une section dédiée sur langages de configuration qui inclut TypeScript, CoffeeScript et Babel & JSX

48
Shlomi Assaf

J'ai écrit un article de blog intitulé "Writing your Webpack Configuration in TypeScript" pour plus de détails, voici le TLDR:

La réponse acceptée n'a pas fonctionné pour moi, j'ai également constaté que le ts-node la dépendance ne prend pas en charge les instructions d'importation ES6.

La méthode la plus simple que j'ai trouvée consiste à simplement exécuter l'outil TypeScript tsc pour convertir votre TypeScript en JavaScript, puis à exécuter l'outil webpack comme d'habitude:

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

Cela a l'avantage supplémentaire de ne pas vous obliger à installer de dépendances, comme dans l'autre réponse.

Astuce bonus

Les types de Webpack sont un mélange de syntaxe Webpack 1 et 2. Vous pouvez utiliser TypeScript pour vous assurer que vous utilisez uniquement la syntaxe Webpack 2 et supprimer tous les types de la syntaxe Webpack 1. Je l'ai fait en créant de nouveaux types étendant les types de 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;

Vous pouvez ensuite utiliser ces types dans votre configuration Webpack:

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 à votre fichier de configuration de webpack comme ceci:

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

5
Muhammad Rehan Saeed

Si vous utilisez vscode comme éditeur (ou peut-être d'autres qui prennent en charge la syntaxe de frappe JSDoc) et que vous ne souhaitez que vérifier votre fichier pour guider l'achèvement de votre objet de configuration, vous pouvez le faire comme suit:

Dans vscode, vous pouvez le faire comme tel:

  • npm i -D @types/webpack
  • ajoutez des commentaires d'annotation de type à votre webpack.config.js fichier, en tant que tel:

webpack.config.js:

// @ts-check

module.exports = /** @type { import('webpack').Configuration } */ ({
    ...
});
0
pqnet