Webpackの設定をTypeScriptで書く
TypeScriptの2つめ。前記事の続き。
Webpack DevServerを動かしてTypeScriptで書いたReactアプリを動かしましたが、このWebpackの設定をTypeScriptで書くことも可能。Babel使ってES6で書くこともできましたので驚くことではない。
$ yarn add ts-node -D
yarnでts-nodeをいれます。あとはwebpack.config.development.tsと拡張子を.jsから変更。
// webpack.config.development.ts import * as path from 'path'; export default { entry: './ts/index.tsx', output: { filename: 'bundle.js', publicPath: '/js/', }, devtool: 'inline-source-map', module: { rules: [{ test: /\.(ts|tsx)$/, use: 'awesome-typescript-loader', }], }, resolve: { extensions: ['.ts', '.tsx', '.js'], }, devServer: { host: 'localhost', port: 9000, contentBase: path.resolve('static'), }, };
ほとんど何も変わらない。。。importがFlow風な、exportがES6風な。これでpackage.jsonのscripts.startを「webpack-dev-server –config webpack.config.development.ts」とあわせる。