chore: add webpack example for tree-shaking

2026-01-30 22:48:09 +08:00 · 2020-05-16 01:34:07 +08:00
parent a3970d4e18
commit 0bdc783c97
9 changed files with 5682 additions and 0 deletions
--- a/examples/tree-shaking-webpack/.babelrc
+++ b/examples/tree-shaking-webpack/.babelrc
@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    ["import", { "libraryName": "@zeit-ui/react", "libraryDirectory": "esm"}]
+  ]
+}
--- a/examples/tree-shaking-webpack/README.md
+++ b/examples/tree-shaking-webpack/README.md
@@ -0,0 +1,17 @@
+## Tree shaking for webpack
+
+### About
+
+If you use `webpack` and `babel` to build your Recat project, this example may be useful for you.
+
+### Previews
+
+**Before:**
+
+![before](esm-1.png)
+
+<br />
+
+**After:**
+
+![after](esm-2.png)
--- a/examples/tree-shaking-webpack/esm-1.png
+++ b/examples/tree-shaking-webpack/esm-1.png
--- a/examples/tree-shaking-webpack/esm-2.png
+++ b/examples/tree-shaking-webpack/esm-2.png
--- a/examples/tree-shaking-webpack/package.json
+++ b/examples/tree-shaking-webpack/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "tree-shaking-webpack",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
+    "build": "webpack --config ./webpack.config.js",
+    "analyze": "source-map-explorer 'dist/*.js'"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-react": "^7.9.4",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-import": "^1.13.0",
+    "html-webpack-plugin": "^4.3.0",
+    "source-map-explorer": "^2.4.2",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "dependencies": {
+    "@zeit-ui/react": "^1.5.0-rc.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  }
+}
--- a/examples/tree-shaking-webpack/src/index.html
+++ b/examples/tree-shaking-webpack/src/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tree Shaking</title>
+</head>
+<body>
+<div id="app"></div>
+</body>
+</html>
--- a/examples/tree-shaking-webpack/src/index.js
+++ b/examples/tree-shaking-webpack/src/index.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { ZeitProvider, CssBaseline, Page, Button } from '@zeit-ui/react'
+
+const App = () => {
+  return (
+    <Page>
+      <p>Hello, world.</p>
+      <Button>Action</Button>
+    </Page>
+  )
+}
+
+ReactDOM.render(
+  <React.StrictMode>
+    <ZeitProvider>
+      <CssBaseline />
+      <App />
+    </ZeitProvider>
+  </React.StrictMode>,
+  document.getElementById('app')
+)
--- a/examples/tree-shaking-webpack/webpack.config.js
+++ b/examples/tree-shaking-webpack/webpack.config.js
@@ -0,0 +1,40 @@
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  entry: './src/index.js',
+  
+  devtool: 'source-map',
+  
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader'],
+      }
+    ]
+  },
+  
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+  
+  output: {
+    path: __dirname + '/dist',
+    publicPath: '/',
+    filename: 'bundle.js',
+  },
+  
+  plugins: [
+    new HtmlWebpackPlugin({ template: path.join(__dirname, './src/index.html') }),
+  ],
+  
+  devServer: {
+    host: '127.0.0.1',
+    port: '3000',
+    contentBase: './dist',
+    hot: true,
+    open: true,
+  }
+};
--- a/examples/tree-shaking-webpack/yarn.lock
+++ b/examples/tree-shaking-webpack/yarn.lock