I'm not sure if this issue is with the file-loader or webpack-dev-server the bottom line is my svg that I use for showing a logo by setting it as a background on a css selector ... is not working when using webpack-dev-server. The css is getting compiled, the file (based on the console output) also seems to get bundled, but then when I load my page it is as if the css was referring to a non existent svg file.
The same svg / css and config but using regular webpack works and outputs the svg in my public/assets holder with the hash name.
my.scss
.logo--mylogo {
background: url("../../../svg/mylogo.svg") no-repeat left top;
background-size: contain;
}
using image-webpack-loader
{
test: /\.(jpe?g|png|gif|svg)(?:\?.*|)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack'
]
},
using file-loader
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
webpack.config
var webpackConfig = {
context: jsSrc,
resolve: {
extensions: ['', '.js', '.coffee', '.scss', '.less', '.css'],
modulesDirectories: [node_dir, bower_dir, components_dir]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
ENVIRONMENT: JSON.stringify(process.env.NODE_ENV || env)
}),
new ExtractTextPlugin('styles/[name].css', {
disable: false,
allChunks: true
}),
],
module: {
loaders: [
{
test: /\.(jpe?g|png|gif|svg)(?:\?.*|)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack'
]
},
{
test: /\.s?css$/,
exclude: /.*\.min.css/,
'css-loader?' + JSON.stringify({ sourceMap : shouldSourceMap })
+ '!sass-loader?' + JSON.stringify({ includePaths: bourbonPaths, sourceMap : shouldSourceMap })
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('css-loader?' + JSON.stringify({ sourceMap: shouldSourceMap }))
}
],
noParse: [],
}
}
webpackConfig.entry = {
vendor: [
'webpack-dev-server/client?http://localhost:8081',
'webpack/hot/only-dev-server',
'./vendor.js'
],
app: [
'webpack-dev-server/client?http://localhost:8081',
'webpack/hot/only-dev-server',
'./app.js'
]
}
webpackConfig.output = {
path: destAssetsAbsPath,
filename: env === 'production' ? '[name]-[hash].js' : '[name].js',
publicPath: '/assets/',
chunkFilename: "/js/[id].js"
}
webpack task
gulp.task("webpack:dev-server", function(callback) {
var devServer;
new WebpackDevServer(webpack(config), {
publicPath: '/assets/',
hot: true,
quiet: false,
noInfo: false,
stats: { colors: true },
headers: { "X-Custom-Header": "yes" },
historyApiFallback: true
}).listen(8081, 'localhost', function (err, result) {
if (err) {
console.log(err);
}
callback()
console.log('Listening at localhost');
});
});
output console
I see the file built in both cases.
[68] ./resources/assets/svg/logo/mylogo.svg 81 bytes {0} [built]
I'm not sure if this issue is with the file-loader or webpack-dev-server the bottom line is my svg that I use for showing a logo by setting it as a background on a css selector ... is not working when using webpack-dev-server. The css is getting compiled, the file (based on the console output) also seems to get bundled, but then when I load my page it is as if the css was referring to a non existent svg file.
The same svg / css and config but using regular webpack works and outputs the svg in my public/assets holder with the hash name.
my.scss
using image-webpack-loader
using file-loader
webpack.config
webpack task
output console
I see the file built in both cases.
[68] ./resources/assets/svg/logo/mylogo.svg 81 bytes {0} [built]