- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个使用 Webpack 4 的项目。我使用文件加载器来处理 html 中的图像和样式中的字体。但是对于图像,file-loader 在 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"
}
}
}
]
}
}
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
的文件使用相同的加载器扩展两个规则。
如果您打算将 SVG 输出到 assets/fonts
您应该从图像文件测试中删除扩展名:
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"
}
}
}
]
}
}
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"
}
}
}
]
}
}
关于javascript - Webpack 4 文件加载器将 svg 文件内容更改为 __webpack_public_path__,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59766230/
我是 webpack 模块捆绑器的新手。 如何使用 webpack_public_path ? 我需要这样设置吗 var __webpack_public_path__ = 'http://some.
我无法让 webpack_public_path 与我的 vue 应用程序一起工作。我得到这个错误: Module Error (from ./node_modules/eslint-loader/i
我目前正在使用 React、TypeScript 和 Webpack 开发 Web 应用程序。我希望 Webpack 根据我只在运行时而不是在编译时知道的子域生成图像 URL。 我在 Webpacks
我有一个使用 Webpack 4 的项目。我使用文件加载器来处理 html 中的图像和样式中的字体。但是对于图像,file-loader 在 dist 文件夹中创建图像,但将 "module.expo
我想在 JS 中动态设置 publicPath。我们的产品实例在 webpack 构建完成后分发。我想使用 Font Awesome 图标,所以我尝试在我的入口 JS 文件中配置 webpack_pu
我是一名优秀的程序员,十分优秀!