javascript - Webpack 4 文件加载器将 svg 文件内容更改为 __webpack_public_path__
问题描述
我有一个使用 Webpack 4 的项目。我使用文件加载器来处理 html 中的图像和样式中的字体。但是对于图像,文件加载器在 dist 文件夹中创建图像,但将"module.exports = __webpack_public_path__ + "assets/fonts/main-logo.svg";" 串在里面。所以我可以在 html 中看到正确的路径,但我看不到图像。这是我的 webpack 文件:
webpack.common.js
const path = require('path');
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.(svg|png|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
esModule: false,
name: "[name].[ext]",
outputPath: "assets/images"
}
}
},
{
test: /\.(woff(2)?|ttf|eot|svg)([\?]?.*)?$/,
exclude: /node_modules/,
use: {
loader: "file-loader",
options: {
esModule: false,
name: "[name].[ext]",
outputPath: "assets/fonts"
}
}
}
]
}
}
这是用于开发环境的webpack.dev.js文件。
const common = require('./webpack.common');
const merge = require('webpack-merge');
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = merge(common, {
mode: "development",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist")
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/template.html"
})
],
module: {
rules: [
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"]
}
]
}
});
解决方案
您正在.svg
使用相同的加载器在两条规则中测试具有扩展名的文件。
如果您打算向assets/fonts
您输出 SVG,则应从图像文件测试中删除扩展名:
const path = require('path');
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.(png|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
esModule: false,
name: "[name].[ext]",
outputPath: "assets/images"
}
}
},
{
test: /\.(woff(2)?|ttf|eot|svg)([\?]?.*)?$/,
exclude: /node_modules/,
use: {
loader: "file-loader",
options: {
esModule: false,
name: "[name].[ext]",
outputPath: "assets/fonts"
}
}
}
]
}
}
否则,如果要将 SVG 输出到assets/images
,则应从字体测试中删除扩展名:
const path = require('path');
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.(svg|png|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
esModule: false,
name: "[name].[ext]",
outputPath: "assets/images"
}
}
},
{
test: /\.(woff(2)?|ttf|eot)([\?]?.*)?$/,
exclude: /node_modules/,
use: {
loader: "file-loader",
options: {
esModule: false,
name: "[name].[ext]",
outputPath: "assets/fonts"
}
}
}
]
}
}
推荐阅读
- jpa - JPA 不生成 ddl 文件
- oracle - 动态查询中 v_MONTH 的标识符无效错误
- android - 如何捕获图像并裁剪它?
- excel - 在单元格更改时调用公式
- nginx - 如何在生产环境django+static+nginx中提供静态文件,如javascript css图像和pdf
- java - AccessDeniedException 如果使用 Files.find()
- python - 在重新索引 Series 时,值正在变为 NaN
- java - RecyclerView中视图的动态位置
- python - 如何访问 kivy 中的小部件?我需要通过按下按钮来删除 TextInput
- javascript - 除非页面刷新,否则表单每次都会出现验证错误