Webpack and angular2 not builiding background-image from css - css

Question

I've set a project using Angular2 -> Webpack documentation:
https://angular.io/docs/ts/latest/guide/webpack.html#!#top
The problem is that the images from .css files are not build, in the browser I get 404 because they are not present/built in the /dist/assets folder.
I don't want to use absolute paths and place them manually in dist/assets/.. .I already have them in /public/images/..
I want to use relative paths and hashes that webpack automatically creates, and let webpack load them in /dist/assets/..
the .css file looks like this:
background: url('../../../public/images/randomImage.png') center no-repeat;
webpack.common.js:
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
exclude: /node_modules/
}, {
test: /\.html$/,
loader: 'html'
}, {
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'css-to-string-loader!css-loader'
},
// {
// test: /\.css$/,
// include: helpers.root('src', 'app'),
// loader: 'raw-loader'
// },
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
]
};
webpack.prod.js
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
module.exports = webpackMerge(commonConfig, {
devtool: 'source-map',
output: {
path: helpers.root('dist'),
publicPath: '/',
filename: '[name].[hash].js',
chunkFilename: '[id].[hash].chunk.js'
},
htmlLoader: {
minimize: false // workaround for ng2
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
mangle: {
keep_fnames: true
}
}),
new ExtractTextPlugin('[name].[hash].css'),
new webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(ENV)
}
})
]
});
package.json:
{
"name": "angular-with-webpack",
"version": "1.0.0",
"description": "A webpack starter for Angular",
"scripts": {
"start": "webpack-dev-server --inline --progress --port 8080 --compress",
"test": "karma start",
"build": "webpack --config config/webpack.prod.js --progress --profile --bail"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"#angular/common": "~2.2.0",
"#angular/compiler": "~2.2.0",
"#angular/core": "~2.2.0",
"#angular/forms": "~2.2.0",
"#angular/http": "~2.2.0",
"#angular/platform-browser": "~2.2.0",
"#angular/platform-browser-dynamic": "~2.2.0",
"#angular/router": "~3.2.0",
"core-js": "^2.4.1",
"jquery": "^3.1.1",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.25"
},
"devDependencies": {
"#types/core-js": "^0.9.34",
"#types/jasmine": "^2.5.35",
"#types/node": "^6.0.45",
"angular2-template-loader": "^0.4.0",
"awesome-typescript-loader": "^2.2.4",
"css-loader": "^0.25.0",
"css-to-string-loader": "^0.1.2",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.15.0",
"jasmine-core": "^2.4.1",
"karma": "^1.2.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.7",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.2",
"style-loader": "^0.13.1",
"typescript": "^2.0.3",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.14.0"
}
}
my current solution to solve this was to switch from raw-loader to css-to-string-loader
here's is the code again:
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'css-to-string-loader!css-loader'
},
// {
// test: /\.css$/,
// include: helpers.root('src', 'app'),
// loader: 'raw-loader'
// },
Is it okey ? are there any other solutions ?