webpackでパックされたときにJavaScriptが実行されない

私は最初にwebpackを使用していますが、this tutorialに従って依存関係をセットアップし、テストコードを書きましたが、チュートリアルの示唆どおり結果はありません。誰もが助けてくれてありがとう。webpackでパックされたときにJavaScriptが実行されない

関連するコードがある：

webpack.config.js

var webpack = require('webpack'); 
module.exports = { 
    entry: './app/main', // tell webpack to start from ./app/main.js 
    output: { 
     filename: 'bundle.js' 
    }, 
    module: { 
     loaders: [{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 
      query: { 
       presets: ['es2015'] 
      } 
     }] 
    } 
}

main.js

import Vue from 'vue'; 

import AppComponent from './components/app-component/app-component'; 
new Vue({ 
    el: '#app', 
    components: { 
     'app-component': AppComponent 
    } 
});

VueJs成分：

import Vue from 'vue'; 

const AppComponent = Vue.extend({ 
    template: '<h1>Hello World!</h1>' 
}); 

export default AppComponent;

index.htmlには：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Vue Twitter Streaming</title> 
</head> 
<body> 
<div id="app"> 
    <app-component></app-component> 
</div> 
<script src="bundle.js"></script> 
</body> 
</html>

出典

2017-03-22 HAEL

あなたはVueのコンパイラが必要ですが、import Vue from 'vue'を使用している場合、それが唯一のVueのランタイムをインポートし、文字列、とtemplateオプションを使用しています。代わりに、ファイルdist/vue.esm.jsをVueモジュールにインポートする必要があります。これにはコンパイラも含まれています。また、あなたがvueをインポートするときに、それは代わりにvue/dist/vue.esmをインポートします、別名を定義するwebpacks resolve.aliasを使用することができます

import Vue from 'vue/dist/vue.esm';

：あなたはあなたの輸入を変更する必要があると思います。

resolve: { 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js' 
    } 
}

詳しくはRuntime + Compiler vs. Runtime-onlyを参照してください。

Single File Componentsに.vueというファイルを使用することもできます。この場合、vue-loaderを設定する必要があります。これで、ランタイムだけが必要になります。

出典

2017-03-22 11:19:25

ありがとうございました。うまくいきました。 – HAEL

webpackでパックされたときにJavaScriptが実行されない

答えて

関連する問題