webpack中<%= %>(ejs语法)无效的原因

最新推荐文章于 2024-06-10 09:47:28 发布
原创 最新推荐文章于 2024-06-10 09:47:28 发布 · 6.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #ejs #无效

本文探讨了在使用Webpack过程中遇到的一个问题：html-webpack-plugin与html-loader全局配置导致的EJS语法解析失败。文章提供了具体的解决方案，即移除全局html-loader配置，并在需要时手动加载。

今天在使用webpack过程中发现在一个html模板文件中通过ejs语法引用另一个html文件无效，ejs语句直接出现在了打包后的文件中。

后来发现这是因为html-webpack-plugin会于全局配置的html-loader发生冲突，造成webpack无法解析ejs语句。

如果这样定义：

module : {
    loaders  : [
        {test : /\.html$/, loader : 'html-loader'}
    ]
},
plugins : [
    new htmlWebpackPlugin(para)
]

就会造成这种情况。

解决的办法之一是将全局的loader去掉，改为引用html时调用loader。

如 :

require('html-loader!htmlFile.html')
webpack中html-webpack-plugin中的模版文件失效
hahahhahahahha123456的博客
01-16 1804
html-webpack-plugin可以用html作为模版文件，但是这会和全局配置的html-loader冲突造成无法用ejs语法嵌入图片。 var path = require("path"); var HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('cl...
Vue基于Webpack的相关目录及配置解读
HCJS_Zee的博客
07-21 910
如今webpack已经成为前端项目开发过程中必不可少的一部分，一直以来都是大概了解一些内容，没有做详细的分析，这篇文章总结一下我的所获。 1、build文件（我们最终会把所有要发布的代码放到这里） 1.1 build.js （生产环境配置脚本-打包过程需要引入的配置信息） const ora = require('ora') //Elegant terminal spinner 优雅的终...
html页面<%%>,webpack中html-webpack-plugin中的模版文件<%%>失效
weixin_28684825的博客
06-03 443
webpack.config.js文件const path = require('path');var webpack = require('webpack');var ExtractTextPlugin = require("extract-text-webpack-plugin");var HtmlWebpackPlugin = require('ht...
webpack html-webpack-plugin 语法报错 es\html-webpack-plugin\default_index.ejs: Unexpected token (1:0)
词不达意难知的博客
12-26 567
webpack html-webpack-plugin 语法报错 es\html-webpack-plugin\default_index.ejs: Unexpected token (1:0)
配置webpack具体步骤及其完整配置
苏先生前端
09-25 263
var path = require('path'); //抽离css var MiniCssExtractPlugin = require('mini-css-extract-plugin'); //抽离html var HtmlWebpackPlugin = require('html-webpack-plugin'); //css-tree-shaking var glob = requi...
webpack
新芽
07-16 239
步骤： 创建一个新文件夹 mkdir mywebpack 进入文件夹执行npm init -y 安装webpack npm install webpack webpack-cli --save-dev 在文件夹中创建一个dist文件夹 在dist文件夹中新建index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个webpack</title&
webpack 加载html模板,webpack中html-webpack-plugin中的模版文件<%%>失效
weixin_42401338的博客
06-08 276
webpack.config.js文件const path = require('path');var webpack = require('webpack');var ExtractTextPlugin = require("extract-text-webpack-plugin");var HtmlWebpackPlugin = require('ht...
npm run dev 运行项目报错：renren-fast-vue 无法正常启动登录页面,显示<% if(process. enV. NODE_ENV===’ production){%><%} else{%><%}%>
07-31
在renren-fast-vue项目中，使用了EJS（Embedded JavaScript）模板语法。正常情况下，这些模板会在构建过程中被编译（例如，通过webpack的html-webpack-plugin等插件处理）。如果这些模板没有被正确处理，就会直接...
const path = require('path'); module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/product-data/' : '/', assetsDir: 'static', configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, 'src'), '@components': path.resolve(__dirname, 'src/components'), '@views': path.resolve(__dirname, 'src/views'), }, }, plugins: [ new (require('webpack').DefinePlugin)({ __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false, __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false }) ] }, // 开发服务器配置 devServer: { proxy: { // 使用环境变量中的API地址作为代理目标 '/api': { target: process.env.VUE_APP_BASE_API, changeOrigin: true, pathRewrite: { '^/api': '' } } }, client: { overlay: false }, // 新增端口配置，支持环境变量或默认值 port: process.env.VUE_APP_PORT }, // 生产环境配置 productionSourceMap: false, css: { extract: true, }, chainWebpack: config => { config.plugin('html').tap(args => { args[0].title = '产品数据管理系统'; return args; }); } };从提供的 index.html 内容来看，静态资源路径未包含上下文路径 /product-data/，导致浏览器请求时直接访问根路径下的 /static/，从而触发 404 错误。以下是详细的修复方案： 一、问题原因分析 1. 资源路径缺失上下文前缀 当前 index.html 中的资源路径： html 预览 <script defer src="/static/js/chunk-vendors.js"></script> <link href="/static/css/app.765bed1d.css" rel="stylesheet"> 问题：路径以 /static/ 开头，未包含上下文路径 /product-data/，导致浏览器请求 http://localhost:8080/static/...，而实际资源位于 http://localhost:8080/product-data/static/...。 2. Vue 配置中的 publicPath 错误 若 vue.config.js 中 publicPath 未正确设置为 /product-data/，打包后会生成错误的资源路径。
06-24
如果上述修改后仍然无效，我们可以尝试在`vue.config.js`中通过`chainWebpack`显式设置`output.publicPath`：```jschainWebpack:config=>{config.plugin('html').tap(args=>{args[0].title='产品数据管理系统';...
Uncaught SyntaxError: Invalid or unexpected token (at b3AA.740201d6.js:1:864254)
最新发布
12-11
是一个 **JavaScript 语法错误**，表示浏览器在解析某个 JS 文件时遇到了“无效或意外的符号（token）”，具体位置是 `b3AA.740201d6.js` 文件的第 1 行，字符偏移量 864254 处。 --- ## 错误原因分析 这个错误...
ejs-loader:适用于webpack4.0的EJS加载程序
05-17
用于Webpack的ejs-loader 用于Webpack的EJS加载程序。 使用ejs函数来编译模板。 安装 npm install ejs-loader 用法 var template = require ( "ejs!./file.ejs" ) ; // => returns the template function compiled with undesrcore (lodash) templating engine. // And then use it somewhere in your code template ( data ) // Pass object with data 选项 module . exports = { module : { loaders : [ { test
Webpack
qq_43215246的博客
05-01 458
简介 什么是 Webpack webpack 是一个模块打包器。将 js 文件打包在一起，打包后的文件用于在浏览器中使用。同时也可以用于构建 打包原理 构建过程：就是将源代码转换为生产代码的过程 打包过程：就是将多个文件合并成一个文件的过程 ...
Webpack(上)
baidulixueqin的博客
03-15 1018
Webpack（上） 前端框架Webpack，前端最重要的工具之一。 CRM法学webpack,通过11个任务学会webpack。 webpack文档、npm文档 工具 webpack@4 和 webpack-dev-server本地预览 本地预览httpserver没有webpack-dev-server功能强,parcel也能本地预览但与webpack不配套,所以只能用webpack-dev-server。 webpack这么多插件怎么学？ 重要的"不是用什么"，而是"怎么知道用什么"，要学会搜+C
webpack4配置之——18：html-loader与HtmlWebpackPlugin的冲突
kevin的博客
03-21 9931
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里 html-loader与HtmlWebpackPlugin的冲突 在配置图片那篇文章中，用到了html-loader，当时只看到了html文件中引用的图片被加载出来了，但是却没发现HtmlWebpackPlugin插件在解析html 文件时，ejs语法却未正常解析出来，这里我设置了标题是通过ejs语法获取的HtmlWebpackPl...
webpack使用过程中遇到的错误
QMM的专栏
09-05 1299
1. 在html文件中含有ejs语法的时候，注释掉这部分代码webpack打包时会报错     原因是不能对ejs语句中含有固定引用的语句进行注释     script src="">这种固定的引用    解决办法：删除这段注释 2. 使用 --display-reason 报错     解决办法：--display-reasons 3. 在webpack命令行中输入但隐含的命
推荐：高效集成EJS模板的Webpack插件——`ejs-loader`
gitblog_00066的博客
06-10 585
推荐：高效集成EJS模板的Webpack插件——ejs-loader 在前端开发领域，将模板引擎与构建工具无缝整合能极大地提升开发效率和维护性。如果你正寻找一个能够将EJS（Embedded JavaScript）模板与Webpack完美结合的解决方案，那么ejs-loader绝对值得你的关注。 项目介绍 ejs-loader是一个专为Webpack设计的加载器，它利用了Underscore或Lo...
关于在单独的 Js文件中无法使用 <%= %> 的原因及解决方案
weixin_33824363的博客
04-09 618
最近在做项目的时候遇到了一个问题，就是在项目中我使用了母版页的结构，所以在获取前台ID的中会遇到服务器控件ID自动添加母版页ID前缀的问题。记得刚开始做web开发的时候，使用Repeater控件也遇到过子控件ID自动加前缀的问题，那时候的解决办法就是将项目运行一下，在浏览器中查看源代码，然后复制运行后生成的最终ID，粘贴到自己的代码中去，但是现在再用这种方法总觉得不妥，看起来...
遇到“SyntaxError: missing ) after argument list in ‘ejs文件路径‘ while compiling ejs“ 报错建议
m0_51236564的博客
10-09 1567
遇到"SyntaxError: missing ) after argument list in ‘ejs文件路径’ while compiling ejs" 报错建议 当做 express 或 koa 时，有时会碰到这个错误： 翻译是： 编译 ejs 时，参数列表丢失 即 ejs 文件出现了语法错误 解决： 请仔细检查 ejs 文件中的语句，特别是 <%= %> 语句 我的错误是，写<%= %> 中的 > 符的时候自动又添加了一个</title> ，故报错。 错误
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值