diff --git a/docs/app/Views/Usage.js b/docs/app/Views/Usage.js
index 2c1e94909c..40e57bdf6d 100644
--- a/docs/app/Views/Usage.js
+++ b/docs/app/Views/Usage.js
@@ -5,6 +5,8 @@ import {
Button,
Container,
Header,
+ List,
+ Message,
Segment,
} from 'src'
import Logo from '../Components/Logo/Logo'
@@ -173,6 +175,54 @@ const Usage = () => (
icon='github'
labelPosition='left'
/>
+
+
+
+ Webpack 2 fully supports Semantic UI React, it also supports tree shaking. Please ensure that you build your app
+ in production mode before release, it will strip propTypes
from your build.
+
+
+
+
+ Webpack 2 tree shaking does not completely remove unused exports, there are numerous issues that are
+ long-standing bugs:
+
+
+ webpack/webpack#1750}
+ />
+ webpack/webpack#2867}
+ />
+ webpack/webpack#2899}
+ />
+ webpack/webpack#3092}
+ />
+
+
+ Semantic UI React imports will be not optimized, so we recommend to use babel-plugin-lodash
in
+ your builds. You can find example configuration in examples
directory.
+
+
+
+
+
)
diff --git a/examples/webpack1/package.json b/examples/webpack1/package.json
index 31e826e848..952e45eddb 100644
--- a/examples/webpack1/package.json
+++ b/examples/webpack1/package.json
@@ -18,7 +18,7 @@
"cross-env": "^3.2.3",
"react": "^15.4.2",
"react-dom": "^15.4.2",
- "semantic-ui-react": "^0.67.0",
+ "semantic-ui-react": "^0.68.3",
"webpack": "^1.12.14"
},
"devDependencies": {
diff --git a/examples/webpack2/.babelrc b/examples/webpack2/.babelrc
new file mode 100644
index 0000000000..7a3c168a9f
--- /dev/null
+++ b/examples/webpack2/.babelrc
@@ -0,0 +1,10 @@
+{
+ "presets": [
+ ["es2015", {"modules": false}],
+ "react",
+ "stage-1"
+ ],
+ "plugins": [
+ ["lodash", { "id": ["lodash", "semantic-ui-react"] }]
+ ]
+}
diff --git a/examples/webpack2/.gitignore b/examples/webpack2/.gitignore
new file mode 100644
index 0000000000..c2658d7d1b
--- /dev/null
+++ b/examples/webpack2/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/examples/webpack2/package.json b/examples/webpack2/package.json
new file mode 100644
index 0000000000..4805ee8f83
--- /dev/null
+++ b/examples/webpack2/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "semantic-ui-react-example-webpack2",
+ "version": "1.0.0",
+ "description": "Get started with Semantic UI React and Webpack 2",
+ "main": "index.js",
+ "scripts": {
+ "build": "webpack",
+ "build:production": "cross-env NODE_ENV=production npm run build"
+ },
+ "author": "Alexander Fedyashov ",
+ "license": "MIT",
+ "dependencies": {
+ "babel-core": "^6.24.0",
+ "babel-loader": "^6.4.0",
+ "babel-preset-es2015": "^6.24.0",
+ "babel-preset-react": "^6.23.0",
+ "babel-preset-stage-1": "^6.22.0",
+ "cross-env": "^3.2.3",
+ "react": "^15.4.2",
+ "react-dom": "^15.4.2",
+ "semantic-ui-react": "^0.68.3",
+ "webpack": "^2.3.0"
+ },
+ "devDependencies": {
+ "webpack-bundle-analyzer": "^2.3.1"
+ }
+}
diff --git a/examples/webpack2/public/index.html b/examples/webpack2/public/index.html
new file mode 100644
index 0000000000..ad7bf53570
--- /dev/null
+++ b/examples/webpack2/public/index.html
@@ -0,0 +1,13 @@
+
+
+
+ Semantic UI React Example
+
+
+
+
+
+
+
+
+
diff --git a/examples/webpack2/src/main.js b/examples/webpack2/src/main.js
new file mode 100644
index 0000000000..2991b93693
--- /dev/null
+++ b/examples/webpack2/src/main.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { Button, Container, Header } from 'semantic-ui-react'
+
+const MOUNT_NODE = document.getElementById('root')
+
+const App = () => (
+
+
+
+
+
+)
+
+render( , MOUNT_NODE)
diff --git a/examples/webpack2/webpack.config.js b/examples/webpack2/webpack.config.js
new file mode 100644
index 0000000000..4ae02d5061
--- /dev/null
+++ b/examples/webpack2/webpack.config.js
@@ -0,0 +1,63 @@
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const path = require('path')
+const webpack = require('webpack')
+
+const env = process.env.NODE_ENV || 'development'
+
+const webpackConfig = {
+ name: 'client',
+ target: 'web',
+
+ entry: {
+ app: path.resolve('src/main.js'),
+ },
+
+ module: {
+ rules: [{
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ loader: 'babel-loader',
+ }],
+ },
+
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env': {
+ NODE_ENV: JSON.stringify(env),
+ },
+ }),
+ new BundleAnalyzerPlugin(),
+ ],
+
+ output: {
+ filename: '[name].js',
+ path: path.resolve('public/dist'),
+ publicPath: '/',
+ },
+
+ resolve: {
+ modules: [
+ path.resolve('src'),
+ 'node_modules',
+ ],
+ extensions: ['.js', '.jsx'],
+ },
+}
+
+if (env === 'production') {
+ webpackConfig.plugins.push(
+ new webpack.LoaderOptionsPlugin({
+ minimize: true,
+ debug: false,
+ }),
+ new webpack.optimize.UglifyJsPlugin({
+ compress: {
+ unused: true,
+ dead_code: true,
+ warnings: false,
+ },
+ })
+ )
+}
+
+module.exports = webpackConfig