두 줄로 webpack.config.js로 완성을 적용하는 방법

우선 전제로서 webpack.config.js 그 자체를 TypeScript 로 쓸 수 있다. 공식 문서에도 기재가 있어, ts화 자체는 몇 분으로 끝난다. 그러나, 이 webpack.config.js 를 StoryBook 의 설정으로부터 참조하는 등 다른 툴로부터 읽을 때에 TypeScript 라고 불편한 경우가 있다. 그럴 때 이 방법을 사용하면 1분도 걸리지 않고 보완이 효과적인 환경을 준비할 수 있다. 편리하므로 꼭 도입해 주었으면 한다.

Configuration Languages ​​| webpack

How

방법은 간단하고 @types/webpack 를 설치하고 위의 동영상처럼 댓글을 쓰면 됩니다.

yarn add --dev @types/webpack

webpack.config.js 의 module.exports 의 위에 코멘트로 이하를 추기.

/** @type import('webpack').Configuration */

이것으로 보완이 효과가 되었습니다.

Why

TypeScript는 allowJs 로 TypeScript 뿐만 아니라 js를 서포트하고 있는 것은 알려져 있는 대로이지만, JSDoc 형식으로 형태를 쓸 수도 있다.
Type Checking JavaScript Files · TypeScript

/** @type {number} */
var x;

이것이 좋은 것은 TypeScript에서 JavaScript로 import 가능하다는 것이다.

/**
 * @typedef { import("./a").Pet } Pet
 */

/**
 * @type {Pet}
 */
var myPet;
myPet.name;

네, 그것을 webpack 의 설정 보완에 활용하자는 것이다.
이것은 webpack.config.js 에 한하지 않고 사용할 수 있는 기술이므로, 그 밖에도 이런 부분에서 편리해 등 있으면 코멘트란등에서 가르쳐 주었으면 한다.

webpack의 ts화, config가 4개 정도라면 몇 분 있으면 끝나지만 StoryBook에서 읽히는 webpack으로 발을 으쓱했다— 아카메@라인의 악마.js (@akameco).

Tips: @types/webpack 을 import 하는 것만으로 js 그대로 webpack 설정을 보완의 효과적인 환경에서 쓸 수 있다 🚀 June 7, 2019

— 아카메@라인의 악마.js (@akameco) 피 c. 라고 r. 이 m / 0 아 xZ5Q8 우이

<script async=""src="https://platform.twitter.com/widgets.js"/>