Question

当我使用UI部分的反应精华库时，我才认识到我的样式表是14mb。 Webpack也开始使用永远捆绑。

我刚用一个简单的反应应用程序测试了这个，我只导入了精华按钮。样式表似乎是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

Answer 1

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

import { Btn } from react-essence将导入所有Essence css。
import Btn from essence-btn只导入Essence Btn css＆amp;精华核心。

如果你可以分享你的代码片段以便我可以测试/调试它，将帮助我解决这个问题。

React精华样式表是14mb with webpack

1 个答案: