We Keep Coding

Webpack, extract-loader doesn't load load background url

I'm having trouble with extract-loader. I try to add background: url(../../assets/icons/upload.svg); to sass, but I get an error.
Error: Cannot find module '../../assets/icons/upload.svg' from '/home/jeremy/code/sample-project/src/styles'
Tried resolve-url-loader, but without success.
My webpack config:
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
loader: require.resolve('babel-loader'),
},
{
test: /\.(png|svg|jpg|gif)$/,
include: [
path.resolve(__dirname, 'src/assets/'),
],
use: [
'file-loader'
],
},
{
test: /\.hbs$/,
loader: require.resolve('handlebars-loader'),
query: {
inlineRequires: '/assets/',
},
},
{
test: /\.scss$/,
use: [
{
loader: require.resolve('file-loader'),
options: {
name: 'main.css',
}
},
require.resolve('extract-loader'),
require.resolve('css-loader'),
require.resolve('postcss-loader'),
require.resolve('sass-loader'),
],
}
]
},

How can I check output of webpack merge

I am trying to run the google closure compiler over my webpack assets, but am getting warnings about issues in the webpack styles loaders. But I thought that the style loaders were not going to be in any of the js assets as I was using the MiniCssExtractPlugin to get a separate css file.
Two questions:
how can I get access to the output of by webpack.config.js in production mode? (Can i do something on the command line to see what the merge result is?)
how can I get the merge to work as I had expected, i.e. not using style-loader for production?
Code:
const merge = require("webpack-merge");
var common = {
....
module: {
rules: [
{
test: /\.scss$/,
exclude: [/elm-stuff/, /node_modules/],
// see https://github.com/webpack-contrib/css-loader#url
loaders: ["style-loader", "css-loader?url=false", "sass-loader"]
},
{
test: /\.css$/,
exclude: [/elm-stuff/, /node_modules/],
loaders: ["style-loader", "css-loader?url=false"]
},
...
if (MODE === "production") {
module.exports = merge(common, {
optimization: {
minimizer: [
new ClosurePlugin({mode: 'STANDARD'}, {})
]
},
module: {
rules: [
{
test: /\.css$/,
exclude: [/elm-stuff/, /node_modules/],
loaders: [
MiniCssExtractPlugin.loader,
"css-loader?url=false"
]
},
{
test: /\.scss$/,
exclude: [/elm-stuff/, /node_modules/],
loaders: [
MiniCssExtractPlugin.loader,
"css-loader?url=false",
"sass-loader"
]
}
]
}

I had the same problem (I'm using webpack 4).
My configuration is splitted on 3 files : common, dev and prod ; as webpack guide explain;
To log merged config, you can do something like :
var merged_config = merge(common, {
mode: 'production',
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
],
}
]
},
plugins: [
new MiniCssExtractPlugin()
]
});
module.exports = merged_config;
console.log(JSON.stringify(merged_config));
And as you can see in the code above, I override rules to generate a css bundle in production mode. Inside my common config, I have this :
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
},
{
test: /\.html$/,
loader: 'raw-loader'
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
],
}
]
},
And it works as I expected !

Missing context for svg in webpack

My webpack config
module:{
rules:[{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
test: /\.jsx?$/,
exclude: /node_modules/,
}, {
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
],
}, {
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}]
}
And I had this error.
ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.svg
Module build failed (from ./node_modules/url-loader/index.js):
TypeError: Cannot read property 'context' of undefined
at Object.loader
(G:\SCM-New\pms-front-end-new\node_modules\file-loader\dist\index.js:34:49)
at Object.module.exports (G:\SCM-New\pms-front-end-new\node_modules\url-loader\index.js:37:25)
# ./node_modules/bootstrap/dist/css/bootstrap.min.css (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/bootstrap/dist/css/bootstrap.min.css) 7:4746-4798
I even try file-loader instead of url-loader but this will get even more error like above for eot|ttf|woff|woff2.
Config as follows
{test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader'}

webpack css loader svg and png

I have the next webpack config.
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin()
],
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
],
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
},
exclude: /node_modules/
},
After build the webpack I get an error:
You may need an appropriate loader to handle this file type. in svg string whicnh get from css file. How can solve this problem?

Add url-loader or file-loader to handle those extensions.
{
test: /.(jpg|jpeg|png|svg)$/,
use: ['file-loader'],
},
(excerpt from https://github.com/akx/demystifying-webpack/blob/162137118dd54f30a6c98dd0ae8844dba733483e/webpack.config.js#L13-L16)

webpack not loading my font files

As has happened to many others before, webpack is simply not loading any of my fonts into the build. I've looked at the boards, searched google, tried many different regex tricks and tried other techniques like the copy-webpack-plugin from npm. The build is run via a generic 'npm start'. Please take a look at the below directory structure and my webpack build file and tell me what I might be missing. Thx :-P
Directory Structure (folders in CAPS):
/
- index.html
- index.js
- webpack.config.js
- server.js
ASSETS
FONTS
<font files>
COMPONENTS
CONTAINERS, etc..
my webpack file (test for fonts at the bottom):
var path = require('path')
var webpack = require('webpack')
var CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'eventsource-polyfill',
'whatwg-fetch',
'webpack-hot-middleware/client',
'./index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: [ 'react-hot', 'babel' ],
exclude: /node_modules/,
include: __dirname
}, {
test: /\.css?$/,
loaders: [ 'style', 'raw' ],
include: __dirname
},
{
test: /\.less$/,
loaders: ['style', 'css', 'less'],
include: __dirname
},
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }]
}
}

I've never needed all the regex in the test.
Example of one of my webpack files:
module: {
loaders: [
// Javascript
{ test: /\.jsx?$/, loader: 'babel', exclude: /node_modules/ },
// Stylesheets
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap') },
// Font Definitions
{ test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=public/fonts/[name].[ext]' },
{ test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=public/fonts/[name].[ext]' },
{ test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=public/fonts/[name].[ext]' },
{ test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=public/fonts/[name].[ext]' },
{ test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=public/fonts/[name].[ext]' }
]
},