mipearson / webpack-rails

Integrate webpack with your Ruby on Rails application
MIT License
544 stars 82 forks source link

Image path issue in Heroku production, also have issue with webpack 2 #81

Open sibinx7 opened 7 years ago

sibinx7 commented 7 years ago

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')
        ],
      }