docs(bundlers): add webpack 1 example (#1452)

* docs(bundlers): add webpack 1 example * docs(bundlers): add webpack 1 example
Semantic-Org · Mar 19, 2017 · 630d8e0 · 630d8e0
1 parent 4ca4d03
commit 630d8e0
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 0 deletions.
diff --git a/docs/app/Views/Usage.js b/docs/app/Views/Usage.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import pkg from 'package.json'
 import {
+  Button,
   Container,
   Header,
   Segment,
@@ -131,6 +132,38 @@ const Usage = () => (
         </pre>
       </Segment>
     </Segment>
+
+    <Segment basic padded>
+      <Header as='h2' dividing>Bundlers</Header>
+      <p>
+        Semantic UI React is fully supported by all modern JavaScript bundlers. We made some example recipes with some
+        of them. You can use them as start point for your projects.
+      </p>
+
+      <Header as='h3'>Webpack 1</Header>
+      <p>
+        Webpack 1 fully supports Semantic UI React, however we don't recommend to use it because it's deprecated.
+        Please ensure that you build your app in production mode before release, it will strip <code>propTypes</code>
+        from your build.
+      </p>
+      <p>
+        Because Webpack 1 doesn't support tree shaking we recommend to use <code>babel-plugin-lodash</code> in your
+        builds. You can find example configuration in <code>examples</code> directory of Semantic UI React.
+      </p>
+
+      <Button
+        content='Example configuration'
+        href='https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack1'
+        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/.babelrc b/examples/webpack1/.babelrc
@@ -0,0 +1,11 @@
+{
+  "presets": [
+    "es2015",
+    "react",
+    "stage-1"
+  ],
+  "plugins": [
+    "lodash",
+    ["lodash", { "id": "semantic-ui-react" }]
+  ]
+}
diff --git a/examples/webpack1/.gitignore b/examples/webpack1/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/examples/webpack1/package.json b/examples/webpack1/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "semantic-ui-react-example-webpack1",
+  "version": "1.0.0",
+  "description": "Get started with Semantic UI React and Webpack 1",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack",
+    "build:production": "cross-env NODE_ENV=production npm run build"
+  },
+  "author": "Alexander Fedyashov <a@fedyashov.com>",
+  "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.67.0",
+    "webpack": "^1.12.14"
+  },
+  "devDependencies": {
+    "webpack-bundle-analyzer": "^2.3.1"
+  }
+}
diff --git a/examples/webpack1/public/index.html b/examples/webpack1/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/bundle.js"></script>
+</body>
+</html>
diff --git a/examples/webpack1/src/main.js b/examples/webpack1/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/webpack1/webpack.config.js b/examples/webpack1/webpack.config.js
@@ -0,0 +1,58 @@
+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: {
+    loaders: [{
+      test: /\.(js|jsx)$/,
+      exclude: /node_modules/,
+      loader: 'babel',
+    }],
+  },
+
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(env),
+      },
+    }),
+    new BundleAnalyzerPlugin(),
+  ],
+
+  output: {
+    filename: '[name].js',
+    path: path.resolve('public/dist'),
+    publicPath: '/',
+  },
+
+  resolve: {
+    root: path.resolve('src'),
+    extensions: ['', '.js', '.jsx'],
+  },
+}
+
+if (env === 'production') {
+  webpackConfig.plugins.push(
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        unused: true,
+        dead_code: true,
+        warnings: false,
+      },
+    })
+  )
+}
+
+module.exports = webpackConfig