antd使用tsx编写的组件怎样打包？

Question

type文件是通过npm install @types/**安装的

/* build/webpack.config.js */
/* build/webpack.config.js */
const webpack = require('webpack');
const path = require('path');
const publicPath = 'http://localhost:8000/statics/js';


const config = {
    entry: './app/client.tsx',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, '/dist/'),
        publicPath: publicPath
    },
    devtool: 'source-map',
    resolve: {
        extensions: ['.web.js', '.ts', '.tsx', '.js']
    },
    module: {
        loaders: [{
                test: /\.tsx?$/,
                loader: ['babel-loader','ts-loader']
            },
            {
                test: /\.css$/,
                loader: ['style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]']
            },
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
        ]
    },
    devtool: 'eval',
}

module.exports = config;

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es2015",
        "moduleResolution": "node",
        "jsx": "react",
        "allowSyntheticDefaultImports": true
    },
    "exclude": [
        "node_modules"
    ]
}

问题：这样得到的结果是只是引用了组件，没有调用样式，没有按需加载，打包的文件很大,同时我使用了babel-plugin-import但是并不管用，

// .babelrc
{
    "presets": ["es2015", "stage-0", "react"],
    "plugins": [
        ["import", {
            "libraryName": "antd",
            "style": "css"
        }]
    ]
}

组件

/// <reference path="../../../typings/index.d.ts" />
import * as React from 'react';
import { Button } from 'antd';
const style = require<any>('./Log.css');
class Log extends React.Component<{},{}> {
  render() {
    return (
      <div>
        <p className={style.h3}>Help yourself :)</p>
        <img src="/images/arrow-right.png" />
        <Button>hello</Button>
      </div>
    )
  }
}
export default Log;

希望得到的结果:

按需加载，同时引用css

现在的页面

Answer 1

因为你设置了 "jsx": "preserve", 所以你还需要在 ts-loader 前再加一个 bable-loader 来转换 JSX。