Skip to content

Commit fc61b05

Browse files
layershifterlevithomason
layershifter
authored and
levithomason
committed
docs(bundlers): add webpack 2 example (#1497)
* docs(bundlers): add webpack 2 example * docs(bundlers): add webpack 2 example * docs(bundlers): add notice * chore(bundlers): update version and plugin usage
1 parent 47cb1e7 commit fc61b05

File tree

8 files changed

+185
-1
lines changed

8 files changed

+185
-1
lines changed

‎docs/app/Views/Usage.js

+50
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import {
55
Button,
66
Container,
77
Header,
8+
List,
9+
Message,
810
Segment,
911
} from 'src'
1012
import Logo from '../Components/Logo/Logo'
@@ -173,6 +175,54 @@ const Usage = () => (
173175
icon='github'
174176
labelPosition='left'
175177
/>
178+
179+
<Header as='h3'>Webpack 2</Header>
180+
<p>
181+
Webpack 2 fully supports Semantic UI React, it also supports tree shaking. Please ensure that you build your app
182+
in production mode before release, it will strip <code>propTypes</code> from your build.
183+
</p>
184+
185+
<Message warning>
186+
<p>
187+
Webpack 2 tree shaking does not completely remove unused exports, there are numerous issues that are
188+
long-standing bugs:
189+
</p>
190+
<List>
191+
<List.Item
192+
icon='github'
193+
content={ <a href='https://github.com/webpack/webpack/issues/1750' target='_blank'>webpack/webpack#1750</a>}
194+
/>
195+
<List.Item
196+
icon='github'
197+
content={ <a href='https://github.com/webpack/webpack/issues/2867' target='_blank'>webpack/webpack#2867</a>}
198+
/>
199+
<List.Item
200+
icon='github'
201+
content={<a href='https://github.com/webpack/webpack/issues/2899' target='_blank'>webpack/webpack#2899</a>}
202+
/>
203+
<List.Item
204+
icon='github'
205+
content={<a href='https://github.com/webpack/webpack/issues/3092' target='_blank'>webpack/webpack#3092</a>}
206+
/>
207+
</List>
208+
<p>
209+
Semantic UI React imports will be not optimized, so we recommend to use <code>babel-plugin-lodash</code> in
210+
your builds. You can find example configuration in <code>examples</code> directory.
211+
</p>
212+
</Message>
213+
214+
<Button
215+
content='Example configuration'
216+
href='https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack2'
217+
icon='github'
218+
labelPosition='left'
219+
/>
220+
<Button
221+
content='babel-plugin-lodash'
222+
href='https://github.com/lodash/babel-plugin-lodash'
223+
icon='github'
224+
labelPosition='left'
225+
/>
176226
</Segment>
177227
</Container>
178228
)

‎examples/webpack1/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"cross-env": "^3.2.3",
1919
"react": "^15.4.2",
2020
"react-dom": "^15.4.2",
21-
"semantic-ui-react": "^0.67.0",
21+
"semantic-ui-react": "^0.68.3",
2222
"webpack": "^1.12.14"
2323
},
2424
"devDependencies": {

‎examples/webpack2/.babelrc

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": [
3+
["es2015", {"modules": false}],
4+
"react",
5+
"stage-1"
6+
],
7+
"plugins": [
8+
["lodash", { "id": ["lodash", "semantic-ui-react"] }]
9+
]
10+
}

‎examples/webpack2/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎examples/webpack2/package.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "semantic-ui-react-example-webpack2",
3+
"version": "1.0.0",
4+
"description": "Get started with Semantic UI React and Webpack 2",
5+
"main": "index.js",
6+
"scripts": {
7+
"build": "webpack",
8+
"build:production": "cross-env NODE_ENV=production npm run build"
9+
},
10+
"author": "Alexander Fedyashov <[email protected]>",
11+
"license": "MIT",
12+
"dependencies": {
13+
"babel-core": "^6.24.0",
14+
"babel-loader": "^6.4.0",
15+
"babel-preset-es2015": "^6.24.0",
16+
"babel-preset-react": "^6.23.0",
17+
"babel-preset-stage-1": "^6.22.0",
18+
"cross-env": "^3.2.3",
19+
"react": "^15.4.2",
20+
"react-dom": "^15.4.2",
21+
"semantic-ui-react": "^0.68.3",
22+
"webpack": "^2.3.0"
23+
},
24+
"devDependencies": {
25+
"webpack-bundle-analyzer": "^2.3.1"
26+
}
27+
}

‎examples/webpack2/public/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Semantic UI React Example</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">
8+
</head>
9+
<body>
10+
<div id="root" style="height: 100%"></div>
11+
<script src="./dist/app.js"></script>
12+
</body>
13+
</html>

‎examples/webpack2/src/main.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react'
2+
import { render } from 'react-dom'
3+
import { Button, Container, Header } from 'semantic-ui-react'
4+
5+
const MOUNT_NODE = document.getElementById('root')
6+
7+
const App = () => (
8+
<Container>
9+
<Header as='h1'>Hello world!</Header>
10+
11+
<Button
12+
content='Discover docs'
13+
href='http://react.semantic-ui.com'
14+
icon='github'
15+
labelPosition='left'
16+
/>
17+
</Container>
18+
)
19+
20+
render(<App />, MOUNT_NODE)

‎examples/webpack2/webpack.config.js

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
2+
const path = require('path')
3+
const webpack = require('webpack')
4+
5+
const env = process.env.NODE_ENV || 'development'
6+
7+
const webpackConfig = {
8+
name: 'client',
9+
target: 'web',
10+
11+
entry: {
12+
app: path.resolve('src/main.js'),
13+
},
14+
15+
module: {
16+
rules: [{
17+
test: /\.(js|jsx)$/,
18+
exclude: /node_modules/,
19+
loader: 'babel-loader',
20+
}],
21+
},
22+
23+
plugins: [
24+
new webpack.DefinePlugin({
25+
'process.env': {
26+
NODE_ENV: JSON.stringify(env),
27+
},
28+
}),
29+
new BundleAnalyzerPlugin(),
30+
],
31+
32+
output: {
33+
filename: '[name].js',
34+
path: path.resolve('public/dist'),
35+
publicPath: '/',
36+
},
37+
38+
resolve: {
39+
modules: [
40+
path.resolve('src'),
41+
'node_modules',
42+
],
43+
extensions: ['.js', '.jsx'],
44+
},
45+
}
46+
47+
if (env === 'production') {
48+
webpackConfig.plugins.push(
49+
new webpack.LoaderOptionsPlugin({
50+
minimize: true,
51+
debug: false,
52+
}),
53+
new webpack.optimize.UglifyJsPlugin({
54+
compress: {
55+
unused: true,
56+
dead_code: true,
57+
warnings: false,
58+
},
59+
})
60+
)
61+
}
62+
63+
module.exports = webpackConfig

0 commit comments

Comments
 (0)