docs(bundlers): add webpack 2 example

Semantic-Org · Mar 23, 2017 · 199877e · 199877e
1 parent 3fd65da
commit 199877e
Show file tree

Hide file tree

Showing 9 changed files with 149 additions and 2 deletions.
diff --git a/docs/app/Views/Usage.js b/docs/app/Views/Usage.js
@@ -164,6 +164,19 @@ 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>
+
+      <Button
+        content='Example configuration'
+        href='https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack2'
+        icon='github'
+        labelPosition='left'
+      />
     </Segment>
   </Container>
 )

diff --git a/examples/webpack1/public/index.html b/examples/webpack1/public/index.html
@@ -8,6 +8,6 @@
 </head>
 <body>
 <div id="root" style="height: 100%"></div>
-<script src="./dist/bundle.js"></script>
+<script src="./dist/app.js"></script>
 </body>
 </html>
diff --git a/examples/webpack1/src/main.js b/examples/webpack1/src/main.js
@@ -17,4 +17,4 @@ const App = () => (
   </Container>
 )
 
-render(App, MOUNT_NODE)
+render(<App />, MOUNT_NODE)
diff --git a/examples/webpack2/.babelrc b/examples/webpack2/.babelrc
@@ -0,0 +1,10 @@
+{
+  "presets": [
+    ["es2015", {"modules": false}],
+    "react",
+    "stage-1"
+  ],
+  "plugins": [
+    "lodash"
+  ]
+}
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 <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": "^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