jsmmth / vue-loop Goto Github PK

<div class="loop-container full">
      <div class="item" style="background: white;"><h1>Vue Loop</h1>
        <p>Go for a scroll to try.</p></div>
      <div class="item">
        1
      </div>
      <div class="item">
        2
      </div>
      <div class="item">
        3
      </div>
      <div class="item">
        4
      </div>
      <div class="item" style="background: white;"><h1>Vue Loop</h1>
        <p>Go for a scroll to try.</p>
      </div>

     <!-- This item is added additionally. -->
      <div class="item">
        1
      </div>
</div>

makeDuplicates() {
...
     for(var i = 0; i < division + 1; i++) {
              container.appendChild(container.childNodes[i].cloneNode(true));
     }
...

ERROR in ./node_modules/vue-loop/VueLoop.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

<template>
<div class="loop-container" :class="{'full': full, 'horizontal': horizontal}">
<slot></slot>
 @ ./src/js/components/Parallax.js 15:15-34
 @ ./src/js/components ^\.\/.*$
 @ ./src/js/index.js

var webpack = require("webpack");
var path = require("path");

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
  entry: {
    "app": "./src/js/index.js",
    "app.min": "./src/js/index.js"
  },

  output: {
    path: __dirname + "/dist/js",
    filename: "[name].js"
  },

  resolve: {
    alias: {
      "assets": path.resolve(__dirname, "assets")
    }
  },

  plugins: [
    // js
    new webpack.optimize.UglifyJsPlugin({
      include: /\.min\.js$/,
      minimize: true
    }),

    // css
    new ExtractTextPlugin({
      filename: "../css/[name].css"
    }),

	// browserSync
	new BrowserSyncPlugin({
      host: 'localhost',
      port: 3000,
	  proxy: 'grub/',
	}),

  ],

  module: {
    rules: [
		
      // js
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["babel-preset-env"],
            plugins: ["babel-plugin-transform-class-properties"]
          }
        },
      },

      // scss
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              options: {
                minimize: true,
                discardComments: {
                  removeAll: true
                }
              }
            }, {
              loader: "postcss-loader",
              options: {
                plugins: function() {
                  return [
                    require("postcss-import"),
                    require("autoprefixer")
                  ];
                }
              }
            }, {
              loader: "sass-loader"
            }
          ]
        })
      },

      // images
      {
        test: /\.(jpg|jpeg|gif|png|svg)$/,
        use: {
          loader: "url-loader"
        }
      },

      // fonts
      {
        test: /\.(ttf|eot|woff|woff2)$/,
        use: {
          loader: "url-loader"
        }
      }
    ]
  },
  watch: true
}

  "dependencies": {
    "babel-plugin-transform-class-properties": "^6.24.1",
    "basicscroll": "^1.2.0",
    "blazy": "^1.8.2",
    "jquery": "3.2.1",
    "jquery-ui": "^1.12.1",
    "node-sass": "^4.7.2",
    "skrollr": "^0.6.26",
    "url-loader": "^0.6.2",
    "vue": "^2.5.13",
    "vue-loader": "^13.0.0",
    "vue-loop": "^0.2.6"
  }
}