我正在开发一个角度应用程序,它需要将html文件提取为纯HTML文件,同时应检查是否<img src="...">需要这些图像(作为资源).此外,图像基于根路径(so /images/something.png),它们需要相对于webpack context设置(基本路径)进行解析.
我怎样才能做到这一点？无法让html-loader与文件加载器很好地协同工作.由于前者输出一个JS文件(带有require语句),后者需要一个普通的HTML文件.
我正在尝试使用webpack将html导入到typescript中的变量中。
这是我的设置：
package.json：
{
"devDependencies": {
"awesome-typescript-loader": "^3.2.3",
"html-loader": "^0.5.1",
"ts-loader": "^2.3.7",
"typescript": "^2.5.3",
"webpack": "^3.6.0"
}
}
webpack.config.js：
const path = require('path');
const webpack = require('webpack');
module.exports = {
context: path.join(__dirname),
entry: './main',
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
},
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".js"],
modules: [
"node_modules",
path.join(__dirname, 'app'),
],
},
module: {
rules: [
{
enforce: 'pre',
test: /\.html$/,
loader: 'html-loader',
},
// Faster alternative to ts-loader
{ …根据pug-html-loader的自述文件，加载器接受一个data对象，该对象作为的一部分传递options给模板。虽然options在pug API参考中没有提供，但我发现的grunt插件（grunt-contrib-pug）使用API的方式相同。
我为加载程序指定了以下选项：
loader: 'pug-html-loader',
options: {
pretty: true,
exports: false,
debug: !env.production,
compileDebug: !env.production,
cache: config.build.useCaching,
doctype: 'html',
data: {
title: config.metadata.title,
baseUrl: config.build.baseUrl,
server: env.server,
metadata: config.metadata
}
}
根据这个问题，我想通过以下方式访问：
title= data.title
但是，编译时总是遇到以下错误：
ERROR in Error: Child compilation failed:
Module build failed: TypeError: Cannot read property 'title' of undefined
出于调试目的，我在模板中包含以下行：
-
console.log(' DATA! ' + data);
结果是：
DATA! undefined
我还通过声明一些乱码而不是对象（例如，字符串，纯json，数字..）来确保数据正确地传递给pug，然后pug编译器会抱怨数据格式无效等。 。
有人面临同样的问题吗？
我有一个webpack(v3.5.6) 构建，使用html-loader多个 HTML 文件并将其处理到自身中，使用 .html将较小的图像嵌入到 HTML 中url-loader。该配置非常适合构建，但在使用Webpack Dev Server(v2.7.1)时失败，因为Webpack Dev Server似乎没有忽略源 HTML 文件中的注释。它试图从 HTML 的注释部分获取资源，而其中一些资源此时不存在。
这是来自的示例错误Webpack Dev Server：
./about-us.html 中的错误 找不到模块：错误：无法解析“C:\Users\usr\dev\www”中的“./img/old-image.png” @ ./about-us.html @ ./entry.js @ multi (webpack)-dev-server/client?http://localhost:8080 ./entry.js
我的（未完成的）webpack配置如下：
webpack.common.js：
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const env = process.env.NODE_ENV;
模块.出口 = {
条目：'./entry.js',
输出： {
路径：path.resolve(__dirname, 'dist'),
文件名：'bundle.js'
},
模块： {
规则：[{
测试：/\.html$/,
用： [
{
加载器：'文件加载器'， … 我计划在一个项目中使用 Webpack，并使用 Html-loader + file-loader 设置工作流程，以获取带有图像动态 src 的生产 html 文件，正如 Colt Steele 在本视频中所教授的那样。这是我的 src/ 文件：
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Popular on Letterboxd</title>
</head>
<body>
<img src="./assets/chira.jpg" />
</body>
</html>
索引.js：
import img from './assets/chira.jpg';
import "./main.css";
和main.css
body {
background-color: darkblue;
}
这些是我的配置文件（我有一个用于开发和生产的个人文件，以及两个共同的配置文件）：
webpack.common.js：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
devtool: "none",
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.css$/, …html webpack webpack-html-loader webpack-file-loader webpack-bundle
所以我在尝试编译时在我的 webpack 代码中收到此错误，当我以生产模式启动时会发生这种情况，当我删除 html-loader 时，错误消失了，我还包括要使用的 HtmlWebpackPlugin 和 file-loader ：
webpack.prod.js：
const path = require("path");
const common = require('./webpack.common.js');
const { merge } = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = merge(common, {
mode: "production",
output: {
publicPath: '',
filename: "js/[name].[contenthash].bundle.js",
path: path.resolve(__dirname, "dist")
},
plugins: [
new CleanWebpackPlugin()
]
});
webpack.common.js：
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: "./src/index.js"
},
plugins: [
new HtmlWebpackPlugin({
template: './src/html/index.html'
})
],
module: {
rules: …webpack webpack-html-loader html-webpack-plugin webpack-file-loader
如何配置html-loader以使用正确的路径替换我的ng-src属性？我有一个遗留的应用程序,有类似的东西 -
<img ng-src="{{path}}/test.jpg" />