Image path issue in Heroku production, also have issue with webpack 2
First issue
I have some issues with Image path. I have a React-Rails-Webpack project. I want to add a logo on header. Header,Sidebar and all other items are React components. (React router used for routing )
Webpack config file
{
test: /\.(gif|png|jpe?g|svg)$/i,
loaders:[
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
],
}
Image loaded using require
let LogoImage = require('./icon.png');
Notice: JS and Image files are in same directory
On local server, their is no issue
Local server path <img src="//localhost:3808/webpack/e6a2e7e6cfa80a367c09780b93d2cef6.png" alt="">
But on production (Heroku), the path become
<img src="/e6a2e7e6cfa80a367c09780b93d2cef6.png" alt="">
But file available inside webpack folder in public folder. original path webpack/e6a2e7e6cfa80a367c09780b93d2cef6.png
I have added this on webpack.config file for a quick fix
if (production) {
config.plugins.push(
new webpack.NoErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({
compressor: { warnings: false },
sourceMap: false
}),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify('production') }
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin()
);
config.output.publicPath = '/webpack/'; // added for quick fix
|
I don;t think this as good solution, Is there any good solution to fix my problem
Second issue
file or directory not found when i use like below
{
test: /\.(gif|png|jpe?g|svg)$/i,
// loaders:[
// 'file?hash=sha512&digest=hex&name=[hash].[ext]',
// 'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
// ],
loaders:[
'url-loader','file-loader',
{
loader:'image-webpack-loader',
query: {
bypassOnDebug:true,
progressive:true,
optimizationLevel: 7,
interlaced: false
}
}
],
exclude: /node_modules/,
include:[
path.join(__dirname,'..','app','assets','images'),
path.join(__dirname,'..','app','assets','javascripts','dashboard')
],
}