Move to webpack for demo

cmeisl · Nov 26, 2021 · d0680e8 · d0680e8
1 parent ab7a1fa
commit d0680e8
Show file tree

Hide file tree

Showing 8 changed files with 2,413 additions and 947 deletions.
diff --git a/packages/demo/.gitignore b/packages/demo/.gitignore
@@ -1,4 +1,3 @@
-/node_modules/
-/public/build/
-
 .DS_Store
+node_modules
+public/build/
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -1,29 +1,25 @@
 {
   "name": "demo",
   "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "start": "sirv public --no-clear"
-  },
   "devDependencies": {
-    "@bn-onboard/types": "^0.0.1",
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
-    "rollup": "^2.3.4",
-    "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "svelte": "^3.2.0"
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.0.1",
+    "mini-css-extract-plugin": "^1.3.4",
+    "svelte": "^3.31.2",
+    "svelte-loader": "^3.0.0",
+    "webpack": "^5.16.0",
+    "webpack-cli": "^4.4.0",
+    "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
     "@bn-onboard/core": "^0.0.1",
     "@bn-onboard/injected-wallets": "^0.0.1",
     "@bn-onboard/walletconnect": "0.0.1",
     "rxjs": "^7.4.0",
-    "sirv-cli": "^1.0.14",
     "vconsole": "^3.9.5"
+  },
+  "scripts": {
+    "build": "cross-env NODE_ENV=production webpack",
+    "dev": "webpack serve --content-base public"
   }
 }
diff --git a/packages/demo/public/global.css b/packages/demo/public/global.css
@@ -10,8 +10,8 @@ body {
   margin: 0;
   padding: 8px;
   box-sizing: border-box;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
 }
 
 a {

diff --git a/packages/demo/public/index.html b/packages/demo/public/index.html
@@ -7,10 +7,10 @@
 	<title>Svelte app</title>
 
 	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/build/main.css'>
 	<link rel='stylesheet' href='/global.css'>
-	<link rel='stylesheet' href='/build/bundle.css'>
 
-	<script defer src='/build/main.js' type="module"></script>
+	<script defer src='/build/main.js'></script>
 </head>
 
 <body>

diff --git a/packages/demo/rollup.config.js b/packages/demo/rollup.config.js
diff --git a/packages/demo/webpack.config.js b/packages/demo/webpack.config.js
@@ -0,0 +1,59 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const path = require('path')
+
+const mode = process.env.NODE_ENV || 'development'
+const prod = mode === 'production'
+
+module.exports = {
+  entry: './src/main.js',
+  resolve: {
+    alias: {
+      svelte: path.dirname(require.resolve('svelte/package.json'))
+    },
+    extensions: ['.mjs', '.js', '.svelte'],
+    mainFields: ['svelte', 'browser', 'module', 'main']
+  },
+  output: {
+    path: path.join(__dirname, '/public/build'),
+    filename: '[name].js',
+    chunkFilename: '[name].[id].js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.svelte$/,
+        use: {
+          loader: 'svelte-loader',
+          options: {
+            compilerOptions: {
+              dev: !prod
+            },
+            emitCss: prod,
+            hotReload: !prod
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader']
+      },
+      {
+        // required to prevent errors from Svelte on Webpack 5+
+        test: /node_modules\/svelte\/.*\.mjs$/,
+        resolve: {
+          fullySpecified: false
+        }
+      }
+    ]
+  },
+  mode,
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].css'
+    })
+  ],
+  devtool: prod ? false : 'source-map',
+  devServer: {
+    hot: true
+  }
+}