个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
使用 Webpack 4 和它的 HtmlWebpackPlugin 和 html-loader 一起，我试图:
${ }对于标题标签，但我得到一个构建错误，
htmlWebpackPlugin undefined .
<!doctype html>
<html>
<head>
<title><%= htmlWebpackPlugin.options.title %></title> <!-- this doesn't work -->
<!-- <title>${htmlWebpackPlugin.options.title}</title> //also doesn't work -->
</head>
<body>
<section>${require("./path/to/other.html")}</section> <!-- this works fine -->
</body>
</html>
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './src/main.js',
devServer: {
contentBase: './src',
port: 4200,
open: true
},
plugins: [
new HtmlWebpackPlugin({
hash: true,
template: './src/index.html'},
title: 'Index Page')
],
module: {
rules: [
{
test: /\.jsx?$/,
include: /src/,
exclude: /node_modules/
},
{
test: /\.(html)$/,
exclude: /node_modules/,
use: {
loader: 'html-loader',
options: {
attrs:[':data-src'],
minimize: false,
conservativeCollapse: false,
interpolate: true
}
}
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}
]
}
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
最佳答案
可以通过按顺序堆叠以下加载器来实现:
{
test: /\.html$/,
use: [{
loader: 'ejs-loader'
}, {
loader: 'extract-loader'
}, {
loader: 'html-loader',
options: {
interpolate: true
}
}
html-loader首先替换插入的片段，然后我们需要提取结果 HTML - 这就是我们使用
extract-loader 的原因然后
ejs-loader然后可以替换
ejs碎片，它确实看到
htmlWebpackPlugin变量。
关于javascript - 将 <%=[variable]=> 语法与 htmlWebpackPlugin 和 html-loader 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49888637/
24
4
0
我正在使用 webpack 开始我的学习之路，但遇到了一个问题，我认为这是由 extract-loader 引起的。 .当webpack抓取我的HTML文件时，似乎无法正常编译，在使用import.m
我正在使用 tomcat 8，在 tomcat-home/config/catalina.properties ，有关于的部分 common.loader, server.loader and sha
在使用 import 语句时，我对区分 sass-loader 和 css-loader 有点困惑。据我所知，css loader resolve import statment(@import) 和
我的 webpack 加载器数组中有这个加载器: { test: /\.scss$/, exclude: /node_modules/, loaders: ExtractTextPlugin('sty
我对 url-loader 、 file-loader 和 image-loader 感到很困惑。谁能解释一下 url-loader 、 file-loader 和 image-loader 的区别是
我有 page.css @imports index.css。 page.css 和 index.css 都有 display: flex Webpack.config.js 包含: module:
我在 webpack 中使用生产模式构建的多入口点最终 bundle 中导出的多入口编译 js 文件始终包含加载器内容。如何消除它们以及为什么包含它们？ 重现 git clone https://gi
模板加载器找到模板但未加载模板 TemplateDoesNotExist at /cardpayment/ cardpayment.html Request Method: GET Reque
当我尝试运行 gradle tR (tomcatRun) 时出现此错误 A child container failed during start java.util.concurrent.Execu
Failed to start component [StandardEngine[Tomcat].StandardHost[localhost].StandardContext[/projectna
我计划将 Webpack 用于一个项目，并且我正在使用 Html-loader + file-loader 设置我的工作流程，以获取带有图像动态 src 的生产 html 文件，正如 Colt Ste
我有一个巨大的 csv 文件，其中包含数百万条记录，我想使用 python 脚本将它加载到 Netezza 数据库中。我尝试了简单的插入查询，但速度非常非常慢。可以指出一些示例 python 脚本或一
我想将 ts-loader 与 babel-polyfill 一起使用，但不使用 babel-loader。但是当我尝试构建该项目时，我收到了此错误。谁能告诉我我缺少什么。 ERROR in ./sr
下面是我的 webpack.config.js 和 package.json module.exports = { entry: "./entry.js", output: { fi
我在两台不同的 PC 上遇到了一个问题。对于我的项目，我为开发安装了以下依赖项:(webpack webpack-cli @babel/core @babel/preset-env @babel/pr
模板文件保存在app目录下，但渲染时引发TemplateDoesNotExist异常: 模板加载器事后分析如下: Django 尝试按以下顺序加载这些模板: Using loader django.t
PHPUnit 手册说: If you point the PHPUnit command-line test runner to a directory it will look for *Test
我正在开发一个需要 html 的角度应用程序要提取为纯 HTML 文件的文件，同时应检查任何 要求这些图像(作为 Assets )。另外，图片是基于根路径的(所以 /images/something.
我们在 sql 加载器中遇到了问题。我们正在尝试将一个大约 46 亿行(近 340 GB)的数据文件加载到 2 个 oracle 表中，基于一些使用 Sql Loader 的条件。但是在加载了 42
我将 CSS 模块与 webpack css-loader 一起使用，然后将它们与 mini-css-extract-plugin 捆绑在一起。 这是我的配置的样子: { test: /\.c
我是一名优秀的程序员,十分优秀！