webpack打包图片错误.

Question

webpack.config.js

var webpack = require("webpack");
module.exports = {
    entry : {
        index : __dirname+"/src/index.js"
    },
    output : {
        path : __dirname+"/build",
        publicPath: '/assets/',
        filename : "bundle.js"
    },
    module : {
        loaders : [
            {
                test : /.vue$/,
                loader: 'vue-loader'
            },
            {
    　　　　　　test: /\.(png|jpg)$/,
    　　　　　　loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
    　　　　},
            {
    　　　　　　test: /\.html$/,
    　　　　　　loader: 'html-withimg-loader'
    　　　　}
        ]
    },
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    }
}

search.vue

<template>
    <div class="search">
        <h1><img src="assets/logo.jpg" /></h1>
    </div>
</template>
<script>
    
</script>

<style lang="scss">
    $nav-color: #F90;
    nav {
      background:url("assets/logo.jpg") no-repeat;
      $width: 100px;
      width: $width;
      color: $nav-color;
    }
</style>

Answer 1

not found 没有找到这个图片资源，请确认你的资源存在与否或者路径是否正确。

Answer 2

css 中使用的图片资源，请放到static目录下去，不要放在assert目录

Answer 3

vue组件中的路径仍应是打包前的路径，而不是打包后的路径，webpack会帮你替换的

Answer 4

打包路径是放在images文件夹下的，需要加上images路径