Issue 1:
Bug report

What is the current behavior?

Loader options publicPath doesn't seem to have any effect of for given outputs.

See more info on this issue originally made for mini-css-extract-plugin

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

publicPath given to loader options should effectively make given assets be served from their given destination - what happens instead is:

module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCSSExtractPlugin.loader,
options: {
publicPath: "/styles/",
}
},
"css-loader?-url",
"postcss-loader"
]
}
]
}

// The given assets do NOT end in said directory:
plugins: [
new MiniCSSExtractPlugin({
filename: "[name].[hash].css",
chunkFileName: "[id].[hash].css"
})
]

The said styles directory is ignored and all of the files are bundled with the rest of the JS bundles.

Other relevant information:

Even the simplest configuration without mini-css-extract-plugin does not work.

Tested with html-webpack-plugin and without, no difference in ##behaviour.

webpack version: Multiple, see issue referenced

Node.js version: Multiple, see issue referenced

Operating System: Multiple, see issue referenced

Additional tools: Multiple, see issue referenced

Issue 2:
Synopsis

webpack fails when pushing animated GIFs into the loader pipeline. The file content is scrambled.

I tested this issue with both, url-loader and file-loader.

Other file types are processed correctly.

System Data

Operating System: Windows 10x64

Node Version: v10.15.3

NPM Version: 6.4.1

webpack Version: 4.29.6

url-loader Version: 1.1.2

Expected Behavior

The following animated GIF should be rendered by the browser:

Actual Behavior

With url-loader

... the following, incorrect/invalid, data: URL is being created:

url(data:image/gif;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJpbWFnZXMvSW5saW5lVGhyb2JiZXIuZ2lmIjs=)

Which in turn, when decoded, results in:

> atob("bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJpbWFnZXMvSW5saW5lVGhyb2JiZXIuZ2lmIjs=")

'module.exports = __webpack_public_path__ + "images/InlineThrobber.gif";'

With file-loader

... the following, incorrect file content is being saved to the dist folder:

PS $ type .\InlineThrobber.gif
module.exports = __webpack_public_path__ + "images/InlineThrobber.gif";

Code

webpack.config.js

const path = require('path');

const cleanWP = require('clean-webpack-plugin').default;

module.exports = {
entry: {
testIncrementalSearchWC: "./app/components/_mock/incremental-search/page",
},
module: {
rules: [
{
test: /\.tsx?$/i,
use: 'ts-loader',
exclude: [
/[/\\]node_modules[/\\]/,
/[/\\].*\.js/]
},
{
test: /\.scss$/i,
use: [{
loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader' // translates CSS into CommonJS
}, {
loader: 'sass-loader' // compiles SASS to CSS
}]
},
{
test: /\.(png)|(svg)|(je?pg)|(gif)$/i,
use: 'url-loader',
issuer: {
include: /app[/\\]components[/\\].*\.(ts)|(scss)$/
}
},
{
test: /\.(png)|(svg)|(je?pg)|(gif)$/i,
use: {
loader: 'file-loader',
options: {
outputPath: 'images',
name: "[name].[ext]"
}
},
issuer: {
include: /scripts[/\\]function[/\\].*\.(ts)|(scss)$/
}
}
]
},
resolve: {
extensions: [".ts", ".js", ".scss"]
},
output: {
filename: "[name].bundle.js",
path: path.join(__dirname, 'dist'),
publicPath: "/dist/"
}
};

Screenshots depicting the path information:

How Do We Reproduce?

Recreate the depicted folder structure (presumably not required)

Create a SASS file, referencing an animated GIF

Create some TypeScript file, creating an element that's addressed by the above SASS file

Copy above webpack.config.js file

/ref: webpack-contrib/url-loader#178