TypeScript+Webpack开发环境记录

经历过大规模的JS（ES6）的开发，深刻的体验到，JS语言本身的诸多不便利。遂决定转用TypeScript。

本文只是记录一下，当前时间，配置本地webpack、ts、ts-loader开发环境时，需要调整的一些问题。

当前类库版本号：

webpack: 1.13.3

webpack-dev-server: 1.16.2

typescript: 2.0.6

ts-loader: 1.0.0

本地搭建TypeScript+Webpack开发环境的基础准备

这里直接以ts 2.0为例。

项目初始化所需要的基础类库：

npm install --save-dev webpack webpack-dev-server typescript ts-loader
npm install --save-dev @types/node
npm install --save-dev copy-webpack-plugin extract-text-webpack-plugin html-webpack-plugin

第三行部分，可选择性的添加。

webpack.config.js文件的配置：

const webpack = require('webpack');

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const packageInfo = require('./package.json');

const outputPath = __dirname + '/output/' + packageInfo.version;
const releasePath = __dirname + '/output/release/';

module.exports = {
entry: './src/any.ts',
output: {
filename: 'any.js'
},
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
loaders: [
{test: /\.tsx?$/, loader: 'ts-loader'}
]
},
plugins: [
new webpack.OldWatchingPlugin(),
new HtmlWebpackPlugin({
title: 'any-library - ver ' + packageInfo.version
}),
//new CopyWebpackPlugin([
//	// 打包出release
//	{
//		from: outputPath,
//		to: releasePath,
//		toType: 'dir'
//	}
//])
]
};

webpack --hot在windows失效的问题

随着webpack版本号推进（依赖类库的更新），在windows环境上面要正常使用webpack的--hot（包括--watch）功能，需要使用 webpack.OldWatchingPlugin ，这个东西随附在当前版本的webpack的核心类库包内，无需额外的npm插件。

ts-loader在--watch模式下报mtimes错误的问题

诸多typescript的webpack插件，比较了一下，ts-loader比较符合需求（也许有更好的选择，欢迎提出批评）。

ts-loader的watch模式，因为webpack版本更新，会报错。实际上ts-loader的github库已经提出了解决方案，但貌似没有推送到1.0.0的分支上，所以当前版本仍会报这个错误（错误信息我就不截图了）。

修改的办法，修改项目目录下的 /node_modules/ts-loader/dist/watch-run.js 文件，第 9 行：

var mtimes = watching.compiler.watchFileSystem.watcher.mtimes;

修改为：

var mtimes = watching.compiler.fileTimestamps ||
watching.compiler.watchFileSystem.watcher.mtimes;

这样，即可正常的使用ts-loader和webpack的--hot（--watch）模式了。