Добавить Semantic UI Build to Webpack

Question

Я использую Semantic UI с React в проекте, который строится с помощью 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. Как добавить команду gulp в файл Webpack, чтобы сделать это для меня?

Answer 1

Вот пример 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]' },