javascript - Webpack 和 svg-inline-loader 不起作用
问题描述
我尝试svg-inline-loader
在多页项目中使用。
当我在索引页面上使用它时它工作正常
<%= require('!svg-inline- loader!../../img/toolbar/'+firstBtn.iconName+'.svg') %>
但是当我尝试将它注入部分文件时它不起作用。我明白了
Html Webpack Plugin:
ReferenceError: require is not defined
- lodash.templateSources[16]:7 eval
lodash.templateSources[16]:7:50
- loader.js:31 eval
[search.html?..]/[html-webpack-plugin]/lib/loader.js:31:106
- loader.js:36 module.exports
[search.html?..]/[html-webpack-plugin]/lib/loader.js:36:3
- index.js:422
[site.local]/[html-webpack-plugin]/index.js:422:16
我的 webpack 配置
{
test: /\.html$/,
include: [path.resolve('src/html/partials/')],
use: ['html-loader']
},
new HtmlWebpackPlugin({
filename: 'index.html',
template: './html/pages/index.html',
chunks: ['main']
}),
new HtmlWebpackPlugin({
filename: 'login.html',
template: './html/pages/login.html',
chunks: ['login', 'main']
}),
new HtmlWebpackPlugin({
filename: 'search.html',
template: './html/pages/search.html',
chunks: ['main']
}),
我的搜索页面
<% var toolbar = {
firstBtn: {
title: "City",
anchor: "login.html",
iconName: "city"
}
} %>
<%= _.template(require('../partials/header.html'))%>
<div class="container">
<div class="search">
<%= _.template(require('../partials/toolbar.html'))(toolbar)%>
</div>
以及toolbar.html
我想在哪里加载工具栏的变量
<div class="toolbar">
<%= require('!svg-inline-
loader!../../img/toolbar/'+firstBtn.iconName+'.svg') %>
</div>
如何用 HtmlWebpackPlugin 解决这个问题。在我注入 svg-inline-loader 之前,标题的部分工作正常
解决方案
改用文件加载器。你可以在这里查看我的代码
{
test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
loader: "file-loader"
}
推荐阅读
- c - cs50 pset4 的模糊功能
- c# - 如何从覆盖方法更新 WPF UI
- android - TokBox (OpenTok) Android SDK 越来越大
- css - 可以重写我的简单 CSS 代码变得更好
- c++ - 使用转义序列处理为带引号的字符串创建 boost::spirit::x3 解析器
- php - XDEBUG_SESSION 不传播页面更改
- python - 为什么在这个简单的 ctypes 示例中出现“访问冲突”错误?
- python - Python - sys.stdin.readline() - 库
- python - Kivy:包含 ScrollView、StackLayout 和 Labels 的屏幕完全不合适
- google-bigquery - 由于 coorelated 子查询,Bigquery 作业从今天开始突然开始失败