将语义 UI 构建添加到 Webpack答案

【问题标题】：Add Semantic UI Build to Webpack将语义 UI 构建添加到 Webpack
【发布时间】：2016-09-17 18:18:02
【问题描述】：

我在一个使用 Webpack 构建的项目中使用 Semantic UI 和 React。

这是我的 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 命令来为我执行此操作？

【问题讨论】：

标签： reactjs build webpack semantic-ui webpack-dev-server

【解决方案1】：

这里是语义.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"
}

在src 文件夹中创建一个semantic.js 文件，然后从semantic 导入您需要的任何内容，例如require('../semantic/dist/components/transition.js');，然后在您的client.js 中简单导入semantic.js，就像import './semantic'; 一样。确保你有 .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]' },

【讨论】：