add webpack

shengxinjing · shengxinjing · commit 4f8b05b681e7 · 2020-05-20T09:45:57.000+08:00
diff --git a/vue3-demo-webpack/.gitignore b/vue3-demo-webpack/.gitignore
@@ -0,0 +1,3 @@
+dist
+.DS_Store
+node_modules
diff --git a/vue3-demo-webpack/README.md b/vue3-demo-webpack/README.md
@@ -0,0 +1,26 @@
+# vue-next-webpack-preview
+
+> Minimal webpack setup for Vue 3 (beta) 
+
+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).
+
+### Prerequisites
+- Node & NPM
+
+### Install
+```sh
+npm install
+```
+### Usage
+##### Develop
+```sh
+# run dev server at localhost:8080
+npm run dev
+```
+##### Build
+```sh
+# transpile js for deployment
+npm run build
+```
diff --git a/vue3-demo-webpack/index.html b/vue3-demo-webpack/index.html
@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="/dist/main.css">
+<div id="app"></div>
+<script src="/dist/main.js"></script>
diff --git a/vue3-demo-webpack/package.json b/vue3-demo-webpack/package.json
@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server",
+    "build": "webpack --env.prod"
+  },
+  "dependencies": {
+    "vue": "^3.0.0-beta.2"
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.0.0-beta.2",
+    "css-loader": "^3.4.2",
+    "file-loader": "^6.0.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "url-loader": "^4.0.0",
+    "vue-loader": "^16.0.0-alpha.3",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  }
+}
diff --git a/vue3-demo-webpack/src/App.vue b/vue3-demo-webpack/src/App.vue
@@ -0,0 +1,32 @@
+<template>
+  <img src="./logo.png">
+  <h1>Hello Vue 3!</h1>
+  <button @click="inc">Clicked {{ count }} times.</button>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const count = ref(0)
+    const inc = () => {
+      count.value++
+    }
+
+    return {
+      count,
+      inc
+    }
+  }
+}
+</script>
+
+<style scoped>
+img {
+  width: 200px;
+}
+h1 {
+  font-family: Arial, Helvetica, sans-serif;
+}
+</style>
diff --git a/vue3-demo-webpack/src/logo.png b/vue3-demo-webpack/src/logo.png
diff --git a/vue3-demo-webpack/src/main.js b/vue3-demo-webpack/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/vue3-demo-webpack/webpack.config.js b/vue3-demo-webpack/webpack.config.js
@@ -0,0 +1,60 @@
+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/'
+  },
+  resolve: {
+    alias: {
+      // this isn't technically needed, since the default `vue` entry for bundlers
+      // is a simple `export * from '@vue/runtime-dom`. However having this
+      // extra re-export somehow causes webpack to always invalidate the module
+      // on the first HMR update and causes the page to reload.
+      'vue': '@vue/runtime-dom'
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: 'vue-loader'
+      },
+      {
+        test: /\.png$/,
+        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
+  }
+})
diff --git a/vue3-demo-webpack/yarn.lock b/vue3-demo-webpack/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+dist`
	`2`	`+.DS_Store`
	`3`	`+node_modules`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<link rel="stylesheet" href="/dist/main.css">`
	`2`	`+<div id="app"></div>`
	`3`	`+<script src="/dist/main.js"></script>`