Initial commit

8 years ago · 55ce460261
commit 55ce460261
5 changed files with 71 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
 node_modules
--- a/app.js
+++ b/app.js
@ -0,0 +1,11 @@
 // app.js
 // import Vue from './node_modules/vue/dist/vue.esm.browser.js'
 const app = new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Webpack integration with vuejs'
    }
  }
 })
--- a/index.html
+++ b/index.html
@ -0,0 +1,19 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Vuejs Webpack</title>
    <style media="screen">
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      {{message}}
    </div>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,14 @@
 {
  "name": "vuejs_webpack",
  "version": "1.0.0",
  "description": "Example project using webpack with vuejs",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "drew@androiddrew.com",
  "license": "MIT",
  "dependencies": {
    "vue": "^2.5.13"
  }
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,26 @@
 module.exports = {
  // Entry file
  entry: './app.js',
  output: {
    //output bundle
    filename: 'bundle.js'
  },
  modules: {
    rules: [
      {
        // For .js files
        test: /\.js$/,
        use: {
          // Use the babel loader
          loader: 'bable-loader'
        }
      }
    ]
  },
  resolve: {
    alias: {
      // Ensure the right Vue build is used
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
 }