自分用メモ。
まず、tsconfig.jsonから。
tsconfig.json
{ "compilerOptions": { "target": "es5", "module": "commonjs", "removeComments": true, "sourceMap": true, "jsx": "react" }, "exclude": [ "node_modules" ] }
とりあえず、node_modulesを除いたファイルを対象にしておけばだいたいOK。
次に、webpack.config.jsです。
webpack.config.js
var path = require('path'); var webpack = require('webpack'); module.exports = { entry: { app: './react/app.tsx' }, output: { filename: 'bundle.js' }, devtool: 'source-map', resolve: { root: [path.join(__dirname, 'node_modules')], extensions:['', '.js', '.ts', '.tsx'] }, plugins: [ new webpack.optimize.UglifyJsPlugin() ], module: { loaders: [ { test: /\.tsx?$/, loader: 'ts-loader' } ] } }
react/app.tsxがエントリポイントとなる想定。そして出力はbundle.js。
次に、grupfile.jsです。
gulpfile.js
var gulp = require('gulp'); var webpack = require('gulp-webpack'); gulp.task('build', ['buildClient']); gulp.task('buildClient', function() { var config = require('./webpack.config.js'); return gulp.src('./react/app.tsx') .pipe(webpack(config)) .pipe(gulp.dest('./app/public/javascripts')); });
webpackの実行結果をapp/public/javascriptsに吐き出す想定です。