Question

我开始使用Vue Single File Components。我创建了一个简单的 Hello World ，它与 Webpack 捆绑在一起（我也是新手）但是我对这个膨胀的结果文件感到非常惊讶。

这是我src/js/components/app.vue的组件：

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

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

和我的src/js/index.js：

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

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

这是我的webpack.config.babel.js：

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文件（工作正常）是> 10.000行代码！

这是正常的吗？
我做错了吗？
我错过了什么吗？

Answer 1

是。请记住，它也将捆绑{ "name": "zend1/zend-composer", "require": { "zendframework/zendframework1": "1.*" }, "authors": [ { "name": "Maximilian", "email": "maxi@website.com" } ] }本身，未经授权的是9685行代码。

它还会做一些其他魔术，将您的Vue代码转换为ES2015并从ES5模板创建render function。

Webpack和Vue的Bloated JS输出

1 个答案: