NG6-starter
NG6-starter copied to clipboard
how to make assets folder into dist folder
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.
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]'
}
}
Maybe have a look on https://github.com/petehunt/webpack-howto
@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)
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
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'
]
}
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