webpack系列问题 - 图片引用

Question

问题如下：
第一张图片：/__build__/img/yuqingfenxi.png;
第二张图片：/__build__/img/xingweihuax.png;

第一张图片能显示，但是第二张图片报404，但是在 __build__/img 路径下是有这张图片的

附 webpack.config.js：

var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var AssetsPlugin = require('assets-webpack-plugin');
// var assetsPluginInstance = new AssetsPlugin();
// var proxy = require('http-proxy-middleware');

//配置远程路径
var remotePath = "./__build__/";
fs.readdir(remotePath, function (err, files) {
    if (!err) {
        for (var i = 0; i < files.length; i++) {
            var filesName = files[i];
            if (filesName.indexOf("chunk.js") > 1) {
                fs.unlink('./__build__/' + filesName);
            }
        }
    }
});


module.exports = {
    entry: {
        bundle: "./web_app/index.js"
    },
    devtool: 'cheap-module-eval-source-map',
    output: {
        path: __dirname + '/__build__',
        filename: '[name].js',
        chunkFilename: (new Date()).getTime() + '[id].chunk.js',
        publicPath: '/__build__/'
    },

    // 解决跨域问题
    devServer: {
        hot: true,
        inline: true,
        proxy: {
            '*': {
                changeOrigin: true,
                //target: 'xxxx',
                target: 'xxx',
                secure: false
            }
        }
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV),
            },
        }),

        // new webpack.HotModuleReplacementPlugin(),

        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./__build__/dll/lib-manifest.json')
        }),

        // 部分代码
        new AssetsPlugin({
            filename: '__build__/webpack.assets.js',
            processOutput: function (assets) {
                return 'window.WEBPACK_ASSETS = ' + JSON.stringify(assets);
            }
        }),

        new webpack.ProvidePlugin({ //加载jq
            $: 'jquery',
            jQuery: 'jquery'
        }),

        /*        new webpack.optimize.UglifyJsPlugin({
         //压缩代码
         mangle: {
         except: ['$super', '$', 'exports', 'require']
         },
         compress: {
         warnings: false,
         },
         output: {
         comments: false,
         },
         }),*/

        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
    ],
    resolve: {
        extensions: ['', '.js', '.jsx'],
        resolve: {
            alias: {
                moment: "moment/min/moment-with-locales.min.js"
            }
        }
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                // loaders: ['babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-0'],
                loader: 'babel-loader',
                query: {
                    plugins: ["transform-object-assign", "add-module-exports"],
                    presets: ['es2015', 'stage-0', 'react']
                },
                include: path.join(__dirname, '.')
            }, {
                test: /\.css$/,
                loader: 'style!css'
            }, {
                test: /\.less$/,
                loader: 'style!css!less'
            }, {
                test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
                exclude: /^node_modules$/,
                loader: 'file-loader?name=[name].[ext]'
            }, {
                test: /\.(png|jpg)$/,
                exclude: /^node_modules$/,
                loader: 'url?limit=0&name=[name].[ext]' //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片
            }
        ]
    }
};

Answer 1

webpack + react 项目，在 react 中引用图片，需要用 require 引入图片，写相对地址是找不到图片的（注意是相对地址，不是绝对地址）

eg: <img src={require('XXX图片地址')} />