本文详解如何解决 Webpack 构建中“Module parse failed: Unexpected token”错误，核心在于为 HTML 文件正确配置 html-loader（或 raw-loader），并修正 webpack 配置结构、模块规则语法及资源引用方式。
本文详解如何解决 webpack 构建中“module parse failed: unexpected token”错误，核心在于为 html 文件正确配置 `html-loader`（或 `raw-loader`），并修正 webpack 配置结构、模块规则语法及资源引用方式。
该错误（You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file）本质是 Webpack 默认不识别 .html 文件——它仅内置对 JavaScript/JSON 的解析能力。当你的入口或依赖链中直接引入了 ./src/Component/logos.html（例如通过 import html from './logos.html' 或在 JS 中动态 require('./logos.html')），而配置中未声明任何 HTML 处理规则时，Webpack 就会抛出此解析失败错误。
✅ 正确配置：添加 html-loader
首先安装必要 loader：
npm install --save-dev html-loader # 或（Webpack 5+ 推荐）： npm install --save-dev html-loader@next
然后更新 webpack.config.js，关键修改点包括：
- 使用 module.rules（而非已废弃的 module.loaders）；
- 添加匹配 \.html$ 的规则；
- 指定 html-loader 并可选启用 sources: false（避免自动处理 <img src> 等内联资源，防止路径解析冲突）。
const path = require('path');
module.exports = {
entry: './index.js', // 建议显式写 .js 后缀
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
module: {
rules: [ // 注意：使用 rules 而非 loaders
{
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
sources: false // ⚠️ 关键：禁用自动处理 img/script/link 标签，避免路径报错
}
}
]
}
]
}
};? 为什么 sources: false 很重要？
你的 logos.html 中包含 CDN 脚本（如 jQuery）、外部 CSS 链接及相对路径图片（./logo1.png）。若 html-loader 默认启用 sources: true，它会尝试将 <img src='./logo1.png'> 当作模块 require()，但你的配置中并未定义 .png 的 loader（如 file-loader 或 asset-module），从而引发二次错误。关闭该选项后，HTML 内容被安全地作为字符串导入，由你自行控制资源注入逻辑。
✅ 在代码中正确使用 HTML 模块
假设你想在 JS 中读取该 HTML 字符串并插入 DOM：
立即学习“前端免费学习笔记（深入）”；
// index.js import htmlContent from './src/Component/logos.html'; document.body.innerHTML = htmlContent; // 直接注入（注意：脚本不会自动执行）
⚠️ 注意：html-loader 导入的是纯 HTML 字符串，不会执行其中的 <script> 标签（这是浏览器安全机制，也是预期行为）。若需运行脚本，请改用动态 appendChild + eval（不推荐）或重构为 React/Vue 组件，或使用 script 标签手动加载外部 JS。
? 替代方案：使用 raw-loader（适用于简单场景）
若只需原始 HTML 字符串且无需任何转换，raw-loader 更轻量：
npm install --save-dev raw-loader
配置规则：
{
test: /\.html$/,
use: 'raw-loader'
}❌ 常见误区澄清
- 错误认知：“这个错误和 bcrypt 有关” → 问题答案中提到的 bcrypt 替换属于完全无关的干扰信息。该错误明确指向 ./src/Component/logos.html 文件，与 Node.js 原生模块（如 bcrypt）无任何关联；bcrypt.js 是前端兼容替代库，但此处根本未涉及密码哈希逻辑。
- 配置过时：loaders 数组写法自 Webpack 2 起已被弃用，必须使用 rules。
- 入口文件命名：entry: './index' 应明确为 entry: './index.js'，避免解析歧义。
✅ 最终验证步骤
- 确保 logos.html 位于 src/Component/ 下且路径准确；
- 更新 webpack.config.js 并保存；
- 运行 npx webpack --mode=development；
- 检查是否成功生成 bundle.js，且控制台无 HTML 相关报错。
✅ 总结：该错误是 Webpack 模块系统“按需加载”的典型体现——没有 loader，就没有解析能力。为 HTML 文件添加 html-loader 并合理配置 sources 选项，即可彻底解决。切勿混淆不同技术栈的错误根源，专注定位文件类型与 loader 的映射关系。
