Webpack bootloader with sourcemaps and url instructions

I read that in order to have source maps, I have to use absolute URLs in the url('') statement. I did it as follows:

 body background-image: url('/elements/assets/tmp_background.jpg') 

It works when I remove the sourceMap parameter from the css loader, this does not happen if I activate it.

I think that maybe I failed somewhere on the absolute point of the path, do you have any ideas?

Here is my configuration file:

 module.exports = { devtool: 'source-map', entry: [ 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080', path.resolve(__dirname, 'elements/main.js'), ], output: { path: 'dist', publicPath: '/', // Prefix for all the statics urls filename: 'bundle.js', }, resolve: { root: path.resolve(__dirname), }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015', }, { test: /\.css$/, loaders: ['style', 'css'] }, { test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap'] }, { test: /\.sass$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap&indentedSyntax=true'] }, { test: /\.jade$/, loaders: ['ngtemplate', 'html', 'jade-html'] }, { test: /\.(png|gif|jp(e)?g)$/, loader: 'url-loader?limit=8192' }, { test: /\.(ttf|eot|svg|woff(2))(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=50000' }, ], }, }; 

In a more general idea, I could not find a working example of what I'm trying to do. I would be very interested if you can redirect me to this.

+5
source share
1 answer

publicPath can be used to fix this until a cleaner solution appears.

See https://github.com/webpack/css-loader/issues/29

+1
source

Source: https://habr.com/ru/post/1236725/


All Articles