NG6-starter icon indicating copy to clipboard operation
NG6-starter copied to clipboard

how to make assets folder into dist folder

Open cloudshadow opened this issue 8 years ago • 6 comments

I create assets folder under app and save some images in it. but no image be moved into dist folder after i run 'gulp webpack' please help me.

cloudshadow avatar May 02 '16 13:05 cloudshadow

already add loader but still not work

      {
        test: /\.(png|jpg|gif|svg|woff2?|eot|ttf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: '[name].[ext]?[hash:7]'
        }
      }

cloudshadow avatar May 02 '16 14:05 cloudshadow

Maybe have a look on https://github.com/petehunt/webpack-howto

samithaf avatar Jul 14 '16 05:07 samithaf

@cloudshadow have u figure it out?

@samithaf I have the same problem!

could somebody add an example of using an image inside a html file?

You can reproduce the error using this code: https://github.com/Lar21/webpack-starter-angular/blob/master/src/components/home/home.html#L7

I also trying to follow this SO question (http://stackoverflow.com/questions/35568114/cannot-load-png-files-with-webpack-unexpected-character/35568830?noredirect=1#comment64722362_35568830)

sibelius avatar Aug 01 '16 16:08 sibelius

My way to solve this situation is by CopyWebpackPlugin. It'll just copy the assets folder into dist by using the plugin in webpack.dist.config.js.

I have my assets folder in /client/assets. Then

//webpack.dist.config.js

var CopyWebpackPlugin = require('copy-webpack-plugin');
...
config.plugins = config.plugins.concat([
  new CopyWebpackPlugin([
    { from: 'client/assets', to: 'assets' }
  ]),
...
]);

I hope it helps

jvalen avatar Aug 03 '16 14:08 jvalen

My solution is using image-webpack-loader. npm install image-webpack-loader --save-dev and all image files copied to dist/assets folder.

      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          'file?hash=sha512&digest=hex&name=assets/img/[name].[ext]',
          'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      }

sabareeshkk avatar Nov 21 '16 08:11 sabareeshkk

I am using imagemin:

    {
      dist: {
        files: [{
          expand: true,
          cwd: '<%= yeoman.app %>/images',
          src: '{,*/}*.{png,jpg,jpeg,gif}',
          dest: '<%= yeoman.dist %>/images'
        }]
      }
    }

it is coping images from app folder but i need to know how to copy images from public folder to dist folder

Can any one help on this issue

Ajaykumarkonda avatar Nov 22 '16 10:11 Ajaykumarkonda