本文将会用typescript+react+react-dropzone+express.js实现前后端上传图片。当然是用typescript需要提前下载相应的模块，在这里就不依依介绍了。
第一步，配置tsconfig.js
"compilerOptions": {
"outDir": "./public/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react" ,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true
},
"files": [ "./views/home/main.tsx" ],
"exclude": [
"node_modules"
]}2.配置webpack
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var title = {
home: '首页',
}
module.exports = {
entry: {
home: [
'babel-polyfill',
'./views/home/main.tsx'
],
common: ['react','babel-polyfill'] },
output: {
path: path.join(__dirname, 'views/wap'),
filename: '[name].js',
chunkFilename: '[id].build.js?[chunkhash]',
publicPath: '/views/wap/',
},
module: {
loaders: [
{
test: /.tsx?$/,
loader: 'ts-loader'
},
{
test: /.(less|css)$/,
loader: ExtractTextPlugin.extract('style', 'css!less'),
},
{
test:/.(js|jsx)?$/,
loader:'babel',
exclude:/node_modules/,
query:{compact:false,presets:['es2015','react','stage-0','stage-1','stage-2']}
},
{
test: /.(png|jpg|gif)?$/,
loaders: ['url?limit=8192&name=[name]_[sha512:hash:base64:7].[ext]'],
},
{
test: /.(eot|woff|ttf|svg)$/,
loader: 'file?limit=81920&name=[name]_[sha512:hash:base64:7].[ext]'
},
] },
resolve: {
root: ['node_modules'],
extensions: ['', '.js', '.jsx', '.html', '.json','.ts', '.tsx'],
modulesDirectories: ['node_modules'],
alias: {}
},
externals: {},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin('[name].[contenthash:20].css'),
new webpack.optimize.UglifyJsPlugin({
compress: {warnings: false}
}),
new webpack.optimize.CommonsChunkPlugin('common', 'common.js'),
new HtmlWebpackPlugin(
{
title: "",
template: path.join(path.resolve(__dirname),'views/wap/myApp.html'), //模板文件
inject:'body',
hash:true, //为静态资源生成hash值
