docs(bundlers): add webpack 2 example (Semantic-Org#1497)

* docs(bundlers): add webpack 2 example * docs(bundlers): add webpack 2 example * docs(bundlers): add notice * chore(bundlers): update version and plugin usage
aabustamante · May 22, 2017 · fc61b05 · fc61b05
1 parent 47cb1e7
commit fc61b05
Show file tree

Hide file tree

Showing 8 changed files with 185 additions and 1 deletion.
diff --git 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'
       />
+
+      <Header as='h3'>Webpack 2</Header>
+      <p>
+        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 <code>propTypes</code> from your build.
+      </p>
+
+      <Message warning>
+        <p>
+          Webpack 2 tree shaking does not completely remove unused exports, there are numerous issues that are
+          long-standing bugs:
+        </p>
+        <List>
+          <List.Item
+            icon='github'
+            content={ <a href='https://github.com/webpack/webpack/issues/1750' target='_blank'>webpack/webpack#1750</a>}
+          />
+          <List.Item
+            icon='github'
+            content={ <a href='https://github.com/webpack/webpack/issues/2867' target='_blank'>webpack/webpack#2867</a>}
+          />
+          <List.Item
+            icon='github'
+            content={<a href='https://github.com/webpack/webpack/issues/2899' target='_blank'>webpack/webpack#2899</a>}
+          />
+          <List.Item
+            icon='github'
+            content={<a href='https://github.com/webpack/webpack/issues/3092' target='_blank'>webpack/webpack#3092</a>}
+          />
+        </List>
+        <p>
+          Semantic UI React imports will be not optimized, so we recommend to use <code>babel-plugin-lodash</code> in
+          your builds. You can find example configuration in <code>examples</code> directory.
+        </p>
+      </Message>
+
+      <Button
+        content='Example configuration'
+        href='https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack2'
+        icon='github'
+        labelPosition='left'
+      />
+      <Button
+        content='babel-plugin-lodash'
+        href='https://github.com/lodash/babel-plugin-lodash'
+        icon='github'
+        labelPosition='left'
+      />
     </Segment>
   </Container>
 )

diff --git 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
@@ -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
@@ -0,0 +1 @@
+node_modules/
diff --git a/examples/webpack2/package.json 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 <[email protected]>",
+  "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
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Semantic UI React Example</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">
+</head>
+<body>
+<div id="root" style="height: 100%"></div>
+<script src="./dist/app.js"></script>
+</body>
+</html>
diff --git a/examples/webpack2/src/main.js 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 = () => (
+  <Container>
+    <Header as='h1'>Hello world!</Header>
+
+    <Button
+      content='Discover docs'
+      href='http://react.semantic-ui.com'
+      icon='github'
+      labelPosition='left'
+    />
+  </Container>
+)
+
+render(<App />, MOUNT_NODE)
diff --git a/examples/webpack2/webpack.config.js 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