【发布时间】：2020-02-01 07:54:45
【问题描述】：
使用带有 url-loader 或 file-loader 的 Webpack 4 无法在浏览器中加载图像。小图像不在数据 url 中（或者如果它们是浏览器没有显示它们）并且文件网络请求不是通过文件加载器发出的。
Nginx 在https://{server}/images/image_name.png 上正确地提供图像，但在https://{server} 上没有提供图像，并且在网络检查器网络面板中没有对图像进行网络调用。
目前最好的猜测是 Webpack url-loader 或 file-loader 一定不能生成正确的 URL。为 url 搜索 app.bundle.js 时找不到主机。我已经尝试了好几天 publicPath、outputPath 等所有其他 stackoverflow 帖子的组合，但没有任何效果。
除了搜索js还有什么办法可以查看webpack生成的url？ webpack 配置不正确吗？故障排除建议？
这是我在代码中处理图像的方式：
import nav_logo from "Images/white_nav_logo.svg";
<img src={nav_logo} />
这是我的 webpack.common.js：
module.exports = {
mode: mode,
entry: {
app: ["./src/js/app.js"]
},
output: {
path: path.resolve(__dirname, "dist"),
filename: '[name].bundle.js',
publicPath: '/',
chunkFilename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.(sc|c|)ss$/,
issuer: {
exclude: /\.less$/,
},
use: [
{
loader: 'style-loader',
options: {
},
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
localIdentName: '[name]-[local]-[hash:base64:5]',
},
},
],
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
],
},
{
test: /\.(jsx?)/,
exclude: ["/node_modules", "/src/js/elm"],
use: [
{ loader: "babel-loader?cacheDirectory=true",
}
]
},
{
test: /\.scss$/,
issuer: /\.less$/,
use: {
loader: './src/js/sassVarsToLess.js'
}
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'images/[name].[ext]',
}
},
{
loader: "image-webpack-loader",
options: {
disable: true,
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: true,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
},
],
},
{
test: /\.(ttf|otf|eot|woff2?)$/,
loader: "file-loader",
options: {
name: 'fonts/[name].[ext]',
}
}
],
noParse: [/\.elm$/]
},
node: {
fs: 'empty'
},
plugins: [
new Dotenv(),
new CopyWebpackPlugin([{
from: "./src/assets/css",
to: "css"
},
]),
]
};
和 webpack.prod.js
module.exports = merge(common, {
mode: 'production',
module: {
rules: [
{
test: /\.(sc|c|)ss$/,
issuer: {
exclude: /\.less$/,
},
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
localIdentName: '[name]-[local]-[hash:base64:5]',
},
},
],
},
{
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
],
},
{
test: /\.(jsx?)/,
exclude: ["/node_modules", "/src/js/elm"],
use: [
{ loader: "babel-loader?cacheDirectory=true",
}
]
},
{
test: /\.scss$/,
issuer: /\.less$/,
use: {
loader: './src/js/sassVarsToLess.js' // Change path if necessary
}
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'images/[name]-[hash:8].[ext]'
}
},
{
loader: "image-webpack-loader",
options: {
disable: false,
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: true,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
},
],
},
{
test: /\.(ttf|otf|eot|woff2?)$/,
loader: "file-loader",
options: {
name: 'fonts/[name].[ext]',
}
}
],
noParse: [/\.elm$/]
},
optimization: {
minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin({})]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/assets/prod.index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
})
这里是 nginx default.conf
server {
listen 80;
server_name <domain_name>;
root /usr/share/nginx/html;
access_log /var/log/nginx/host.access.log main;
index index.html;
location / {
try_files $uri $uri/ =404;
}
location /images/ {
alias /usr/share/nginx/html/images/;
try_files $uri $uri/ =404;
error_log /var/log/nginx/error.log debug;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
【问题讨论】：
标签： reactjs nginx webpack webpack-4 webpack-file-loader