將語義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

回答

相關問題