react webpack java_动态添加图像React Webpack

UPDATE ：这只测试了服务器端渲染(通用Javascript)这里是我的boilerplate .

只有文件加载器，您可以动态加载图像 - the trick is to use ES6 template strings ，以便Webpack可以选择它：

这将 NOT 工作 . ：

const myImg = './cute.jpg'

要解决此问题，只需使用模板字符串：

const myImg = './cute.jpg'

webpack.config.js：

var HtmlWebpackPlugin = require('html-webpack-plugin')

var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

module.exports = {

entry : './src/app.js',

output : {

path : './dist',

filename : 'app.bundle.js'

},

plugins : [

new ExtractTextWebpackPlugin('app.bundle.css')],

module : {

rules : [{

test : /\.css$/,

use : ExtractTextWebpackPlugin.extract({

fallback : 'style-loader',

use: 'css-loader'

})

},{

test: /\.js$/,

exclude: /(node_modules)/,

loader: 'babel-loader',

query: {

presets: ['react','es2015']

}

},{

test : /\.jpg$/,

exclude: /(node_modules)/,

loader : 'file-loader'

}]

}

}