将语义UI构建添加到Webpack

我在与Webpack一起构建的项目中使用带React的语义UI。将语义UI构建添加到Webpack

这里是我的WebPack代码：

module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: __dirname, 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    devtool: '#source-map', 
    module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel' 
    }] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
};

（我有一个拿着我的预设一个.babelrc文件），因为我使用的主题化我必须重建每次

我做出改变一个.variables文件。如何在我的Webpack文件中添加一个gulp命令来为我做这件事？

来源

2016-09-17 user2465134

这里的例子semantic.json：

{ 
    "base": "semantic/", 
    "paths": { 
    "source": { 
     "config": "src/theme.config", 
     "definitions": "src/definitions/", 
     "site": "src/site/", 
     "themes": "src/themes/" 
    }, 
    "output": { 
     "packaged": "dist/", 
     "uncompressed": "dist/components/", 
     "compressed": "dist/components/", 
     "themes": "dist/themes/" 
    }, 
    "clean": "dist/" 
    }, 
    "permission": false, 
    "autoInstall": false, 
    "rtl": false, 
    "version": "2.2.2" 
}

创建semantic.js文件中的文件夹src和进口任何你从semantic需要例如require('../semantic/dist/components/transition.js'); 然后在client.js简单的导入semantic.js像import './semantic';作为的WebPack ..只是确保你有.css和.less装载机：

{ 
    test: /\.less$/, 
    loader: 'style!css?importLoaders=2&sourceMap&localIdentName=[local]__[hash:base64:5]!less-loader' 
    }, 
    { test: /\.css/, loader: 'style!css?importLoaders=2&sourceMap&localIdentName=[local]__[hash:base64:5]' },

来源

2016-09-17 18:45:48

将语义UI构建添加到Webpack

回答

相关问题