Προς το περιεχόμενο

Πρόβλημα με webpack 2 και vue-loader

function

Από τον function
στο Web Design - Development

 Share

Προτεινόμενες αναρτήσεις

function Proficient

function

Δημοσ.
Δημοσ.

Καλησπέρα παιδιά.

 

Έχω σετάρει ένα project χωρίς vue-cli, μόνο και μόνο για να καταλαβαίνω τι γίνεται σε κάθε βήμα του setup. Παραθέτω το structure.

 

1. package.json

{
  "name": "canvas_quiz",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },
  "author": "xxxxx",
  "license": "ISC"
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "extract-text-webpack-plugin": "^2.1.2",
    "vue": "^2.4.2",
    "vue-loader": "^13.3.0",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^2.2.0"
  },
  "dependencies": {
    "vue": "^2.4.2"
  }
}

2. Wepack.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: ['./js/app.js', './scss/main.scss'],
  output: {
    filename: 'dist/bundle.js'
  },
  module: {

    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
        }
      },
      {
        test: /\.js$/, // Check for all js files
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: { presets: ['es2015'] }
        }]
      },
      { // regular css files
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          loader: 'css-loader?importLoaders=1',
        }),
      },
      { // sass / scss loader for webpack
        test: /\.(sass|scss)$/,
        loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
      }
    ]
  },  
  plugins: [
    new ExtractTextPlugin({ // define where to save the file
      filename: 'dist/[name].bundle.css',
      allChunks: true,
    }),
  ]
};

3. App.vue

<template>
    <div>
        <router-view></router-view>
    </div>
</template>

4. main app.js

import Vue from 'vue/dist/vue.esm'
import VueRouter from 'vue-router/dist/vue-router.esm'
import App from '../components/App.vue'
import Foo from '../components/Foo.vue'
import Bar from '../components/Bar.vue'

const router = new VueRouter()

router.map({
    '/foo': {
        component: Foo
    },
    '/bar': {
        component: Bar
    },
})

router.start(App, '#container')

Όταν όμως τρέχω "webpack" στο terminal παίρνω τα παρακάτω errors:


C:\MyProjects\canvas_quiz>webpack
loader option has been deprecated - replace with "use"
Hash: e48640d0cf7875d25f31
Version: webpack 2.7.0
Time: 3511ms
               Asset       Size  Chunks                    Chunk Names
      dist/bundle.js     356 kB       0  [emitted]  [big]  main
dist/main.bundle.css  114 bytes       0  [emitted]         main
   [0] ./~/process/browser.js 5.42 kB {0} [built]
   [1] ./js/app.js 1.16 kB {0} [built]
   [2] ./scss/main.scss 41 bytes {0} [built]
   [3] ./js/utils.js 264 bytes {0} [built]
   [7] ./~/vue-router/dist/vue-router.esm.js 65.6 kB {0} [built]
   [8] ./~/vue/dist/vue.esm.js 272 kB {0} [built]
   [9] (webpack)/buildin/global.js 509 bytes {0} [built]
  [10] multi ./js/app.js ./scss/main.scss 40 bytes {0} [built]
    + 3 hidden modules

ERROR in ./components/Foo.vue
Module build failed: SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\MyProjects\canvas_quiz\node_modules\vue-loader\ind
ex.js:1:80)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:20:19)
    at loadLoader (C:\MyProjects\canvas_quiz\node_modules\loader-runner\lib\load
Loader.js:13:17)
    at iteratePitchingLoaders (C:\MyProjects\canvas_quiz\node_modules\loader-run
ner\lib\LoaderRunner.js:169:2)
    at runLoaders (C:\MyProjects\canvas_quiz\node_modules\loader-runner\lib\Load
erRunner.js:362:2)
    at NormalModule.doBuild (C:\MyProjects\canvas_quiz\node_modules\webpack\lib\
NormalModule.js:179:3)
    at NormalModule.build (C:\MyProjects\canvas_quiz\node_modules\webpack\lib\No
rmalModule.js:268:15)
    at Compilation.buildModule (C:\MyProjects\canvas_quiz\node_modules\webpack\l
ib\Compilation.js:146:10)
    at factoryCallback (C:\MyProjects\canvas_quiz\node_modules\webpack\lib\Compi
lation.js:329:11)
    at C:\MyProjects\canvas_quiz\node_modules\webpack\lib\NormalModuleFactory.js
:253:5
    at C:\MyProjects\canvas_quiz\node_modules\webpack\lib\NormalModuleFactory.js
:99:14
    at C:\MyProjects\canvas_quiz\node_modules\tapable\lib\Tapable.js:268:11
    at NormalModuleFactory.<anonymous> (C:\MyProjects\canvas_quiz\node_modules\w
ebpack\lib\CompatibilityPlugin.js:52:5)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (C:\MyProjects\canvas_quiz
\node_modules\tapable\lib\Tapable.js:272:13)
    at C:\MyProjects\canvas_quiz\node_modules\webpack\lib\NormalModuleFactory.js
:74:11
    at C:\MyProjects\canvas_quiz\node_modules\webpack\lib\NormalModuleFactory.js
:205:8
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
 @ ./js/app.js 19:11-43
 @ multi ./js/app.js ./scss/main.scss

ERROR in ./components/Bar.vue
Module build failed: SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\MyProjects\canvas_quiz\node_modules\vue-loader\ind
ex.js:1:80)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:20:19)
    at loadLoader (C:\MyProjects\canvas_quiz\node_modules\loader-runner\lib\load
Loader.js:13:17)
    at iteratePitchingLoaders (C:\MyProjects\canvas_quiz\node_modules\loader-run
ner\lib\LoaderRunner.js:169:2)
    at runLoaders (C:\MyProjects\canvas_quiz\node_modules\loader-runner\lib\Load
erRunner.js:362:2)
    at NormalModule.doBuild (C:\MyProjects\canvas_quiz\node_modules\webpack\lib\
NormalModule.js:179:3)
    at NormalModule.build (C:\MyProjects\canvas_quiz\node_modules\webpack\lib\No
rmalModule.js:268:15)
    at Compilation.buildModule (C:\MyProjects\canvas_quiz\node_modules\webpack\l
ib\Compilation.js:146:10)
    at factoryCallback (C:\MyProjects\canvas_quiz\node_modules\webpack\lib\Compi
lation.js:329:11)
    at C:\MyProjects\canvas_quiz\node_modules\webpack\lib\NormalModuleFactory.js
:253:5
    at C:\MyProjects\canvas_quiz\node_modules\webpack\lib\NormalModuleFactory.js
:99:14
    at C:\MyProjects\canvas_quiz\node_modules\tapable\lib\Tapable.js:268:11
    at NormalModuleFactory.<anonymous> (C:\MyProjects\canvas_quiz\node_modules\w
ebpack\lib\CompatibilityPlugin.js:52:5)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (C:\MyProjects\canvas_quiz
\node_modules\tapable\lib\Tapable.js:272:13)
    at C:\MyProjects\canvas_quiz\node_modules\webpack\lib\NormalModuleFactory.js
:74:11
    at C:\MyProjects\canvas_quiz\node_modules\webpack\lib\NormalModuleFactory.js
:205:8
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
 @ ./js/app.js 23:11-43
 @ multi ./js/app.js ./scss/main.scss

ERROR in ./components/App.vue
Module build failed: SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\MyProjects\canvas_quiz\node_modules\vue-loader\ind
ex.js:1:80)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:20:19)
    at loadLoader (C:\MyProjects\canvas_quiz\node_modules\loader-runner\lib\load
Loader.js:13:17)
    at iteratePitchingLoaders (C:\MyProjects\canvas_quiz\node_modules\loader-run
ner\lib\LoaderRunner.js:169:2)
    at runLoaders (C:\MyProjects\canvas_quiz\node_modules\loader-runner\lib\Load
erRunner.js:362:2)
    at NormalModule.doBuild (C:\MyProjects\canvas_quiz\node_modules\webpack\lib\
NormalModule.js:179:3)
    at NormalModule.build (C:\MyProjects\canvas_quiz\node_modules\webpack\lib\No
rmalModule.js:268:15)
    at Compilation.buildModule (C:\MyProjects\canvas_quiz\node_modules\webpack\l
ib\Compilation.js:146:10)
    at factoryCallback (C:\MyProjects\canvas_quiz\node_modules\webpack\lib\Compi
lation.js:329:11)
    at C:\MyProjects\canvas_quiz\node_modules\webpack\lib\NormalModuleFactory.js
:253:5
    at C:\MyProjects\canvas_quiz\node_modules\webpack\lib\NormalModuleFactory.js
:99:14
    at C:\MyProjects\canvas_quiz\node_modules\tapable\lib\Tapable.js:268:11
    at NormalModuleFactory.<anonymous> (C:\MyProjects\canvas_quiz\node_modules\w
ebpack\lib\CompatibilityPlugin.js:52:5)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (C:\MyProjects\canvas_quiz
\node_modules\tapable\lib\Tapable.js:272:13)
    at C:\MyProjects\canvas_quiz\node_modules\webpack\lib\NormalModuleFactory.js
:74:11
    at C:\MyProjects\canvas_quiz\node_modules\webpack\lib\NormalModuleFactory.js
:205:8
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
 @ ./js/app.js 15:11-43
 @ multi ./js/app.js ./scss/main.scss
Child extract-text-webpack-plugin:
       [0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ./~/css-loader!./~/sass-loader/lib/loader.js!./scss/main.scss 287 byt
es {0} [built]

C:\MyProjects\canvas_quiz>^A

Μήπως μπορεί να βοηθήσει κάποιος?

 

Ευχαριστώ εκ των προτέρων.

egoeimai1 Proficient

egoeimai1

Δημοσ.
Δημοσ.

Τσέκαρε λίγο τις εκδόσεις απο τα depedencies.  Βλέπω εγκαθιστάς webpack 2.2.0 και το compile δείχνει έκδοση 2.7 κάποια έκδοση πρέπει να την έχεις εγκαταστήσει global.

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...