使用 webpack 打包时 javaScript 不运行

Question

I'm using webpack the first time, I followed this tutorial to setup the dependencies and write some test code, but there is no result as the tutorial suggested.我是第一次使用 webpack，我按照本教程设置依赖项并编写了一些测试代码，但没有教程建议的结果。 Thanks for every one to help.感谢每一个人的帮助。

There is the related code:有相关代码：

webpack.config.js 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 main.js

import Vue from 'vue';

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

VueJs component: VueJs 组件：

import Vue from 'vue';

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

export default AppComponent;

index.html:索引.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>

Answer 1

You're using the template option with a string, which requires the Vue compiler but when using import Vue from 'vue' it only imports the Vue runtime.您正在使用带有字符串的template选项，这需要 Vue 编译器，但是当使用import Vue from 'vue'时，它只导入 Vue 运行时。 Instead you have to import the file dist/vue.esm.js in the Vue module, which includes the compiler as well.相反，您必须在 Vue 模块中导入文件dist/vue.esm.js ，其中也包括编译器。 You'd have to change your imports to:您必须将导入更改为：

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

Alternatively you can use webpacks resolve.alias to define an alias, so when you import vue it will import vue/dist/vue.esm instead.或者，您可以使用 webpacks resolve.alias来定义别名，因此当您导入vue时，它将改为导入vue/dist/vue.esm 。

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

For more information see Runtime + Compiler vs. Runtime-only .有关更多信息，请参阅Runtime + Compiler vs. Runtime-only 。

You can also use Single File Components with a .vue file, which will require you to configure vue-loader .您还可以将单文件组件与.vue文件一起使用，这需要您配置vue-loader 。 With that you only need the runtime.这样，您只需要运行时。

使用 webpack 打包时 javaScript 不运行

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-03-22 11:19:25

使用 webpack 打包时 javaScript 不运行

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-03-22 11:19:25

解决方案1
0 已采纳 2017-03-22 11:19:25