webpack2 打包不出图片文件，请帮忙看下哪里有问题？

Question

file-loader和url-loader 都无法打包出图片文件，
webpack.config.js中的代码:

var path = require('path');
var webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {

entry: './src/main.js',
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    libraryTarget: "umd",
    filename: 'build.js'
},
//打包去除外部依赖
externals: {
    'vue': {
        root: 'Vue',
        commonjs: 'vue',
        commonjs2: 'vue',
        amd: 'vue'
    },
    'lodash': {
        commonjs: 'lodash',
        commonjs2: 'lodash',
        amd: 'lodash',
        root: '_'
    }
},
module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {}
                // other vue-loader options go here
            }
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            **test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: 'image/[name].[ext]?[hash]'
            }**

        },
        {
            test: /\.css$/,
            exclude: /node_modules/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        },
    ]
},
plugins: [
    new ExtractTextPlugin("css/styles.css"),
],
resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    }
},
devServer: {
    historyApiFallback: true,
    noInfo: true
},
performance: {
    hints: false
},
devtool: '#source-map'

};

if (process.env.NODE_ENV === 'production') {

module.exports.devtool = '#source-map';
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: '"production"'
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
            warnings: false
        }
    }),
    new webpack.LoaderOptionsPlugin({
        minimize: true
    })
])

}
通过image标签引用：

<template>

<div class="bg">
     <img src="image/logo.png"/>
    {{msg}}
</div>

</template>

<script>

export default {
    name: 'cq-app',
    data () {
        return {
            msg: '组件开发基本事例!'
        }
    }
}

</script>
打包过程:
D:ideaprojectcqcomponent>webpack
Hash: 7f2aaa350e0eb3b79d26
Version: webpack 2.7.0
Time: 1598ms

         Asset      Size  Chunks             Chunk Names
      build.js   9.69 kB       0  [emitted]  main
css/styles.css  91 bytes       0  [emitted]  main
  build.js.map   11.4 kB       0  [emitted]  main

css/styles.css.map 91 bytes 0 [emitted] main
[1] ./src/css/App.css 41 bytes {0} [built]
[3] ./src/main.js 520 bytes {0} [built]
[5] ./~/vue-loader/lib/component-normalizer.js 2.55 kB {0} [built]
[7] ./~/css-loader!./src/css/App.css 216 bytes [built]
[8] ./~/css-loader/lib/css-base.js 1.51 kB [built]
[9] ./~/style-loader/lib/addStyles.js 8.7 kB [built]
[10] ./~/style-loader/lib/urls.js 3.01 kB [built]

+ 4 hidden modules

Child extract-text-webpack-plugin:

   [0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
   [1] ./~/css-loader!./src/css/App.css 216 bytes {0} [built]
   
   

哪里配置有问题?

Answer 1

你要在css里面引用图片