chore: init

Author: antfu

.gitignore

@@ -0,0 +1,3 @@
+dist
+.DS_Store
+node_modules

README.md

@@ -0,0 +1,5 @@
+# vue-next-webpack-preview
+
+Minimal webpack setup for Vue 3 (alpha). This is for preview purposes only. There might be bugs and undocumented behavior differences from v2, which are expected.
+
+Also note that if you are using VSCode, Vetur isn't updated to take advantage of Vue 3's typing yet so intellisense in Vue files may not be fully functional (especially in templates).

index.html

@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="/dist/main.css">
+<div id="app"></div>
+<script src="/dist/main.js"></script>

package.json

@@ -0,0 +1,25 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server",
+    "build": "webpack --env.prod",
+    "postinstall": "patch-package"
+  },
+  "dependencies": {
+    "@vueuse/core": "^3.0.0-alpha.19",
+    "vue": "next"
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.0.0-alpha.0",
+    "css-loader": "^3.4.0",
+    "file-loader": "^5.0.2",
+    "mini-css-extract-plugin": "^0.9.0",
+    "patch-package": "^6.2.0",
+    "postinstall-postinstall": "^2.0.0",
+    "url-loader": "^3.0.0",
+    "vue-loader": "next",
+    "webpack": "^4.41.4",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.1"
+  }
+}

patches/@vue+runtime-core+3.0.0-alpha.0.patch

@@ -0,0 +1,21 @@
+diff --git a/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js b/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js
+index a44850d..17f56fb 100644
+--- a/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js
++++ b/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js
+@@ -1672,7 +1672,15 @@ if ( (process.env.NODE_ENV !== 'production')) {
+ }
+ const map = new Map();
+ function registerHMR(instance) {
+-    map.get(instance.type.__hmrId).instances.add(instance);
++    let record = map.get(instance.type.__hmrId)
++    if (!record) {
++        record = {
++            comp: instance.type,
++            instances: new Set(),
++        }
++        map.set(instance.type.__hmrId, record)
++    }
++    record.instances.add(instance);
+ }
+ function unregisterHMR(instance) {
+     map.get(instance.type.__hmrId).instances.delete(instance);

src/App.vue

@@ -0,0 +1,43 @@
+<template>
+  <div id="app">
+    <img src="./logo.svg" />
+    <h1>Hello <a href='https://github.com/vuejs/vue-next' target='__blank'>Vue 3</a> and <a href='https://github.com/antfu/vueuse' target='__blank'>VueUse</a>!</h1>
+
+    <h2>{{new Date(now)}}</h2>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { useNow } from '@vueuse/core'
+
+export default {
+  setup() {
+    const now = useNow()
+
+    return {
+      now
+    }
+  }
+}
+</script>
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css?family=Noto+Serif&display=swap');
+
+html, body, h1, h2, h3, p {
+  font-family: 'Noto Serif', serif;
+}
+
+#app {
+  text-align: center;
+  color: rgba(0,0,0,0.4);
+}
+img {
+  width: 500px;
+}
+a {
+  color: #41b883;
+  text-decoration: none;
+}
+</style>

src/logo.svg

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp().mount(App, '#app')

src/main.js

@@ -0,0 +1,51 @@
+const path = require('path')
+const { VueLoaderPlugin } = require('vue-loader')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+module.exports = (env = {}) => ({
+  mode: env.prod ? 'production' : 'development',
+  devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
+  entry: path.resolve(__dirname, './src/main.js'),
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: '/dist/'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: 'vue-loader'
+      },
+      {
+        test: /\.svg$/,
+        use: {
+          loader: 'url-loader',
+          options: { limit: 8192 }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: { hmr: !env.prod }
+          },
+          'css-loader'
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css'
+    })
+  ],
+  devServer: {
+    inline: true,
+    hot: true,
+    stats: 'minimal',
+    contentBase: __dirname,
+    overlay: true
+  }
+})