css - 使用webpack的React本质样式表是14mb

当我在UI部分使用react本质库时，我刚刚意识到样式表为14mb。 Webpack在开始时也永远使用捆绑。

我只是用一个简单的react应用程序进行了测试，我只导入了本质按钮。样式表似乎为7mb。看起来webpack正在导入所有内容，而不是部分内容。

我的webpack配置文件很简单：

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
        devtool: 'eval',
        entry: [
                'webpack-hot-middleware/client',
                './src/index.jsx'
        ],
        output: {
                path: path.join(__dirname, 'static'),
                filename: 'bundle.js',
                publicPath: '/static/'
        },
        plugins: [
                new webpack.optimize.OccurenceOrderPlugin(),
                new ExtractTextPlugin('styles.css', { allChunks: true }),
                new webpack.HotModuleReplacementPlugin(),
                     new webpack.DefinePlugin({
                        'process.env':{
                                'NODE_ENV': JSON.stringify('devolopment')
                        }
                        })
                ],
        module: {
                loaders: [
                        {
                                test: /\.(jsx|js)/,
                                loaders: ['react-hot', 'babel'],
                                resolve: ['.js', '.jsx'],
                                exclude: /node_modules/,
                                include: path.join(__dirname, 'src')
                        },
                        {
                                test: /(\.css|.less)$/,
                                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader'),
                                resolve:['.less', '.css']
                        },
                        {
                                test: /\.(otf|eot|svg|ttf|woff)/,
                                loader: 'url-loader'
                        }
                ]
        },
        resolve: {
                extensions: ['', '.js', '.json', '.less', '.jsx']
        }
};

有什么问题，我该如何解决？

编辑：

从react-essence导入按钮时的webpack输出：Link

从本质按钮导入按钮时，Webpack退出：Link

最佳答案

根据您的Essence组件导入，有两个选项：


import { Btn } from react-essence将导入所有Essence CSS。
import Btn from essence-btn将仅导入Essence Btn css＆Essence核心。


如果您可以共享代码段，以便我可以对其进行测试/调试，则将帮助我解决此问题。