项目结构如下所示：

webpack的配置文件代码如下所示：

var webpack = require("webpack");
module.exports = {
    entry: './resource/js/app.js',
    output: {
        path: '',
        filename: "./index.js"
    },
    module: {
        loaders: [
            {test:/\.css$/,loader:'style-loader!css-loader'},
            { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
            {test: /\.vue$/,loader: 'vue'},
            {test: /\.(png|jpg|gif|svg)$/,loader: 'file?name=[name].[ext]?[hash]'},
            {
                test: /\.(png|jpg)$/,
                loader: 'url?limit=40000'
            },
            {
                test: /\.jsx?$/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    },
    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: true,
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ]
};

在login_header.vue里面导入js及index.css文件，代码如下所示：

<template>
    <div class="nav">
        <div class="nav-slider js-slider">
            <a class="active" v-on:click="register">注册</a>
            <a v-on:click="login">登录</a>
            <span class="nav-slider-bar"></span>
        </div>
    </div>
</template>
<script>
    require('../resource/js/common.js');
    require('../resource/css/index.css');
    export default {
        methods:{
            register: function(){
                $('.js-slider').removeClass('nav-slider-l').find('a').eq(0).addClass('active').siblings('a').removeClass('active');
                location.href = '#register';
            },
            login: function(){
                $('.js-slider').addClass('nav-slider-l').find('a').eq(1).addClass('active').siblings('a').removeClass('active');
                location.href = '#login';
            }
        }
    }
</script>

在命令行里面运行webpack命令，一直报错，如下所示：

经检查，发现是样式文件里面的url导致此错误