标签: webpack-html-loader
如何为webpack html-loader插值提供参数？
在html-loader文档中有这个例子
require("html?interpolate=require!./file.ftl");
<#list list as list>
<a href="${list.href!}" />${list.name}</a>
</#list>
<img src="${require(`./images/gallery.png`)}">
<div>${require('./components/gallery.html')}</div>
"名单"来自哪里？如何为插值范围提供参数？
我想做像template-string-loader那样的事情:
var template = require("html?interpolate!./file.html")({data: '123'});
然后在file.html中
<div>${scope.data}</div>
但它不起作用.我试图将模板字符串加载器与html-loader混合,但它不起作用.我只能使用template-string-loader,但HTML中的图像不会被webpack转换.
有任何想法吗？谢谢
推荐指数
解决办法
查看次数
在 webpack 中使用 file-loader 和 html-loader 时，图像的 src attr 是 '[object Module]'
我正在从头开始使用 webpack4 做一个项目。但是当我尝试在 HTML 文件中显示图像时，我遇到了一个奇怪的问题：在 之后npm run build，图像标签的 src 被构建为<image src="[object Module]". HTML 部分是：
<img src="images/main_background.jpg">
这webpack.config.js是：
// ignore ...
{
test: /\.html$/,
use: [
{loader: 'html-loader'}
]
},
{
test: /\.(jpeg|jpg|png)$/,
use: [
'file-loader'
]
}
以及这两个加载器的版本：
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
我无法弄清楚是什么问题...
推荐指数
解决办法
查看次数
我应该在webpack上使用"module.exports ='html_template_content'"做什么
所以我想用webpack做一个非常简单的任务.
我有一些静态HTML模板,例如
的test.html
<div><span>template content</span></div>
而我想要做的就是在模板中返回字符串,例如
require("raw!./test.html")
应该返回一个字符串,如:
"<div><span>template content</span></div>"
但相反,它返回以下字符串
"modules.exports = <div><span>template content</span></div>"
我尝试了几个模块,比如raw-loader和html-loader.并且它们都表现出相同的方式.所以我看了一下源代码,只是为了发现它支持这种方式.
那么,如果我只是想要原始HTML,那么我对此的期望是什么？删除前置的"module.exports ="字符串是不好的做法？从bundle编辑:删除'modules.export ='部分结果在bundle中什么都不返回:/
我的配置
module.exports =
{
module:
{
loaders:
[
{ test: /\.html$/, loader: "raw-loader" }
]
}
};
推荐指数
解决办法
查看次数
Typescript 2.0和Webpack将HTML作为字符串导入
我正在尝试在webpack的帮助下将HTML文件导入为字符串(目前使用webpack,因为TypeScript 2.0不支持非ES6目标上的async/await).
我遇到的问题是,即使github的html-loader版本支持配置标志'exportAsEs6Default',我也无法正确设置它.有没有办法在全球范围内设置加载程序选项？因为如果我将html-loader添加到配置文件中的loaders部分,则会调用加载器两次,从而导致内容嵌套.
我有以下定义文件来支持HTML的导入(就像模块文档中的示例一样)
declare module "html!*" {
const content: string;
export default content;
}
相应的进口声明:
import templateString from "html!./Hello.html";
我使用的软件包的版本:
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"html-loader": "git://github.com/webpack/html-loader.git#4633a1c00c86b78d119b7862c71b17dbf68d49de",
"ts-loader": "^0.9.5",
"typescript": "2.0.3",
"webpack": "^1.13.2"
和webpack配置文件
"use strict";
module.exports = {
entry: "./WebApp/Hello.ts",
output: {
path: "./wwwroot/compiled",
filename: "app.bundle.js"
},
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".js", ".ts"]
},
module: {
loaders: [
{
test: /\.ts$/,
exclude: /node_modules/,
loader: "babel-loader!ts-loader"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader" …推荐指数
解决办法
查看次数
html-webpack-plugin如何与html-loader一起使用？
我认为只有在某个资源被导入或需要某个资源并且资源与这样的加载器匹配时才会调用加载器.
但是在下面的代码中,没有html文件被导入到任何地方,但由于html中的下划线模板内容,仍然需要html-loader来进行编译.
所以我有以下问题:
- html-loader什么时候开始玩？生成捆绑之后还是之前？
- 为什么webpack会调用html-loader？由于插件中的模板设置？
插件是否使用加载程序的输出？但输出只是一个字符串,它怎么会有所作为？
Run Code Online (Sandbox Code Playgroud)//webpack.config.js const webpack = require('webpack'); const path = require('path'); const htmlPlugin = require('html-webpack-plugin'); module.exports = { entry: { a: './a.js' }, output: { filename: '[name].[chunkhash].js', chunkFilename: '[name].[chunkhash].js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.html$/, loader: "html-loader" } ] }, plugins: [ new htmlPlugin({ template:path.resolve(__dirname,'index.html') }) ] }; //index.html <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script id="item-template" type="text/template"> <label><%= title %></label> </script> </body> </html>
推荐指数
解决办法
查看次数
如何修复 webpack 输出图像 src 中的 [Object Module]？
我正在尝试使用 Webpack 设置一个现代的 vanilla web starter。
添加webpack-html-loader和时我卡住了html-loader。这是发生了什么......
- 当我使用
img条目index.html文件中的标记时，具有这样的src属性 (./imgs/image.png)，文件夹中的src属性将dist替换为[object Module]. 但是当我删除uri(./imgs/image.pngto/imgs/image.png)之前的点时，文件夹中的src输出dist与src. 这不引用我想要包含的图像。 - 由于
srcwebpack输出的值和源码完全一样，所以我尽量粗暴的使用uri到输出文件夹中的图片像这样/dist/img/image.png。这有效，但不是很好的体验。我很想uri在src文件夹中使用我的图像，并dist在构建时用 webpack 替换它。这可能吗？
这是我的文件结构之后的样子 npm run build
- dist
- imgs
- image.png
- index.html
- main.js
- node_modules
- src
- index.html
- imgs
- …推荐指数
解决办法
查看次数
使用Webpack进行初始静态React HTML渲染
有没有办法直接在HTML入口点预生成(单个路由)React应用程序的HTML结构？
然后,在加载任何JS之前,页面将能够显示HTML(基于React初始状态).
我实际上正在使用webpack-html-loader,但欢迎任何其他加载器或插件;)
PS:可以使用static-site-generator-webpack-plugin吗？
PS:我没有使用React Router
推荐指数
解决办法
查看次数
如何在Jest测试中使用我的webpack的html-loader导入？
我刚刚开始使用Jest测试框架,虽然直接单元测试工作正常,但我在测试其模块中的任何组件(通过babel + webpack的ES模块)需要HTML文件时遇到大量问题.
这是一个例子:
import './errorHandler.scss';
import template from './errorHandler.tmpl';
class ErrorHandler {
...
我正在加载我在Jest的package.json配置中设置的组件特定SCSS文件以返回一个空对象但是当Jest尝试运行该import template from './errorHandler.tmpl';行时它会断开说:
/Users/jannis/Sites/my-app/src/scripts/errorHandler/errorHandler.tmpl.html:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<div class="overlay--top">
^
SyntaxError: Unexpected token <
at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:284:10)
我的Jest配置package.json如下:
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/test/setupFile.js",
"moduleDirectories": ["node_modules"],
"moduleFileExtensions": ["js", "json", "html", "scss"],
"moduleNameMapper": {
"^.+\\.scss$": "<rootDir>/test/styleMock.js"
}
}
似乎webpack html-loader与Jest无法正常工作,但我找不到任何有关如何解决此问题的解决方案.
有谁知道如何html-loader import在我的测试中使这些工作？他们加载我的lodash模板标记,我宁愿不在我的.js文件中有这些大量的HTML块,所以我可以省略该import template from x部分.
PS:这不是一个反应项目,只是简单的webpack,babel,es6.
推荐指数
解决办法
查看次数
html-loader 的用途是什么，它在 Webpack 中是如何工作的
我在学习 webpack 时遇到了loaders， 的定义loaders说它转换你的代码，以便它可以包含在 javascript 中bundle。
但是，html-loader 是如何工作的？
该html-loader认定中说，它导出HTML作为字符串（什么意思）。
它还说每个可加载的属性（例如<img src="image.png"导入为require('./image.png')，并且您可能需要在配置（file-loader或url-loader）中为图像指定加载器，这是什么意思。
我想知道，实际上 html-loader 做了什么。它是转换html为 String 还是只是将img标签转换为require. 所有这些如何协同工作。
谁能详细解释一下。
推荐指数
解决办法
查看次数
webpack 文件加载器复制文件
我正在使用 webpack，它是file-loader + html-loader将文件发送到我的输出目录中。它几乎按预期工作，因为它还复制了这些文件。
这是我的webpack.config.js文件的一部分：
module.exports = {
module: {
rules: [
{ test: /\.html$/, use: ["html-loader"] },
{
test: /\.(jpg|png)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "img",
},
},
},
],
},
};
有一个小例子说明我的输出目录的样子：
dist/
- img/
- img1.png
- img2.png
- ab0d12.png
- c3d612.png
- index.html
- bundle.js
带有散列名称的两个图像是img/目录中不需要的重复项。正如您在上面的示例中看到的，我什至没有将名称设置为散列，而且我也无法以任何方式打开重复文件。
我正在使用一些插件，例如HtmlWebpackPlugin或CleanWebpackPlugin，但我相信它们不会导致问题。
版本：
- 网络包
5.28.0 - 文件加载器
6.2.0 - html加载器
2.1.2
推荐指数
解决办法
查看次数
标签 统计
webpack ×9
babeljs ×1
ecmascript-6 ×1
import ×1
javascript ×1
jestjs ×1
node.js ×1
npm ×1
raw-loader ×1
reactjs ×1
typescript ×1