使用 webpack 捆绑 vuejs 2 组件答案

【问题标题】：Issue bundling vuejs 2 components with webpack使用 webpack 捆绑 vuejs 2 组件
【发布时间】：2017-02-14 01:46:32
【问题描述】：

我正在迁移到 vuejs 2，但我的 vue 组件存在一个非常特殊的问题。当我 require() 一个组件时，我在 webpack 捆绑过程中收到以下错误：

ERROR in Unexpected token >

错误的行号是 require() 调用加载组件的位置。

以下是我收到错误的测试组件示例：

<template>
    <div>
        <button>test</button>
    </div>
</template>

<script>
    module.exports = {
        data: function () {
            return {

            }
        }
    }
</script>

我的 webpack.config.js 文件是：

const webpack = require('webpack');
require('es6-promise').polyfill();
var path = require("path");

module.exports = {
    entry: {
        ...
    },
    output: {
        //path: path.join(__dirname, "./dist/js"),
        path: './',
        filename: "[name].bundle.js",
        chunkFilename: "[id].chunk.js"
    },
    devServer: {
        ...
    },
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                // make sure to exclude 3rd party code in node_modules
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file?name=public/fonts/[name].[ext]'
            }
        ]
    },
    vue: {
        loaders: {
            js: 'babel-loader'
        }
    },
    resolveLoader: {
        root: __dirname + '/node_modules'
    },
    resolve: {
        alias: {
            'vue': 'vue/dist/vue'
        }
    }
};

任何帮助将不胜感激。我已经为此困扰了好几个小时了。

【问题讨论】：

那个组件的扩展名是.vue吗？

标签： webpack vue.js

【解决方案1】：

我真的想通了。相反，我弄清楚出了什么问题以及如何解决它。基本上，webpack 与任务运行器的 Visual Studio 集成不再适用于 vue 2。我不知道为什么。但是，只需从命令行运行命令就可以完美运行，而且更容易。

【讨论】：