带有Webpack和Vue的臃肿JS输出

我开始学习Vue的。我创建了一个简单的Hello World，并将其与Webpack捆绑在一起（我也是新手），但我对由此产生的臃肿文件感到非常惊讶

这是我的组件，位于

src/js/components/app.vue

：

<template>
    <div class="message">{{ message }}</div>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello World!',
        }
    }
}
</script>

这是我的

webpack.config.babel.js

：

import Vue from 'vue';
import App from './components/app.vue';

new Vue({
    el: '#app',
    components: { App }
});

import path from 'path';

module.exports = {
    entry: path.resolve(__dirname, 'src') + '/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js',
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }, {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        scss: 'vue-style-loader!css-loader!sass-loader',
                    }
                }
            }
        ],
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
}

我使用Vue 2.3.4和Webpack 3.0.0。我得到的

main.js

文件（工作正常）超过了10000行代码

这正常吗

我做错什么了吗

我错过什么了吗

---

对。请记住，它还将绑定

Vue

本身，未统一的代码是9685行

它还将使用一系列其他魔法将您的

ES2015

代码转换为

ES5

，并从

.vue

模板创建一个新的应用程序。

Touché！很公平：）谢谢！