你发现 `
src/main.js` **好像没有
加载到**，这是一个非常关键的问题 —— 因为它是整个前端应用的“入口”。如果它没被正确
加载或执行，页面就会空白、无反应，甚至出现 404 或白屏。
---
## 🔍 常见表现（说明 main.js 没生效）
- 页面空白，没有任何错误
- 控制台没有任何输出（比如 `console.log('app started')` 不打印）
- Vue / React 应用未挂载
- 网络面板中看不到 `bundle.js` 或 `main.js` 被请求
- Webpack 打包成功，但浏览器没执行 JS
---
## ✅ 正确流程：从 entry 到浏览器执行
1. Webpack 配置指定 `entry: './
src/main.js'`
2. Webpack 将其打包成一个 bundle（如 `bundle.js` 或 `main.js`）
3. `HtmlWebpackPlugin` 自动生成 `<script
src="bundle.js"></script>` 插入 `index.html`
4. 浏览器
访问 `/` → 返回 `index.html` →
加载并执行 JS
👉 如果中间任何一环断了，`main.js` 就不会运行！
---
## ✅ 排查步骤与解决方案
### ✅ 1. 检查 `webpack.config.js` 中的 `entry` 是否正确
```js
module.exports = {
entry: './
src/main.js',
// ✅ 必须存在且路径正确
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
// 打包后的文件名
},
// ...
};
```
🔧 检查点：
- `./
src/main.js` 文件是否存在？
- 拼写是否正确？大小写敏感！
- 路径是否应为 `path.resolve(__dirname, '
src/main.js')`？
---
### ✅ 2. 检查生成的 `index.html` 是否自动引入了 JS
打开浏览器开发者工具 → **Network 面板** → 刷新页面 → 查看：
- 是否有 `bundle.js`（或你配置的 output.filename）被
加载？
- 状态码是 200 还是 404？
- Size 是 `(memory)` 还是 `(disk cache)`？→ `(memory)` 表示 webpack-dev-server 在内存中提供资源，正常。
👉 如果没有 JS 文件请求 → 说明 HTML 没插入 `<script>` 标签。
---
### ✅ 3. 检查 `HtmlWebpackPlugin` 是否工作
确保安装并配置了插件：
```bash
npm install --save-dev html-webpack-plugin
```
配置示例：
```js
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
inject: 'body'
// ✅ 自动注入 script 标签
})
]
```
⚠️ 特别注意：
- `inject: true`（默认）才会自动把打包后的 JS 插入 HTML
- 如果你在 `index.html` 中手动写了 `<script
src="...">`，要确保名字匹配 `output.filename`
---
### ✅ 4. 检查 `public/index.html` 是否有冲突的 script 标签
❌ 错误写法（手动写死不存在的文件）：
```html
<script
src="main.js"></script> <!-- 实际打包出来是 bundle.js -->
```
✅ 正确做法：不要手动加 script，让 `HtmlWebpackPlugin` 自动注入：
```html
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="app"></div>
<!-- 不要手动加 <script> -->
</body>
</html>
```
或者如果你必须手动控制，就和 `output.filename` 保持一致：
```html
<script
src="bundle.js"></script>
```
---
### ✅ 5. 在 `main.js` 中添加调试信息
在 `
src/main.js`
开头加一行日志：
```js
console.log('✅ main.js is loaded and executed!');
alert('Loaded');
// 可临时用于确认是否执行
```
👉 如果这个都没触发 → 说明 JS 完全没执行。
---
### ✅ 6. 检查 DevTools 的 Sources 面板
进入 Chrome DevTools → **Sources** tab：
- 展开 `localhost:8080` → `webpack:
//` → `./
src/`
- 能看到 `main.js` 吗？
- 点进去能断点调试吗？
🟢 如果能看到 → 说明已
加载，只是可能逻辑出错
🔴 如果看不到 → 很可能没参与构建
---
### ✅ 7. 检查构建输出日志
终端运行 `npm run dev` 后查看输出：
```bash
Entrypoint app 123 KiB = bundle.js
[webpack] Compiled successfully
```
你应该能看到类似内容。如果没有 JS 输出，说明 entry 找不到。
常见错误日志：
```
Module not found: Error: Can't resolve './
src/main.js'
```
→ 解决方法：修正路径或创建文件。
---
### ✅ 8. 示例：最小可运行结构
```
project/
├──
src/
│ └── main.js
├── public/
│ └── index.html
├── webpack.config.js
└── package.json
```
`
src/main.js`:
```js
console.log('🎉 main.js is running!');
document.getElementById('app').innerHTML = '<h1>Hello from main.js</h1>';
```
`public/index.html`:
```html
<!DOCTYPE html>
<html>
<head><title>Demo</title></head>
<body><div id="app"></div></body>
</html>
```
`webpack.config.js`:
```js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './
src/main.js',
output: { filename: 'bundle.js' },
devServer: { static: { directory: './public' } },
plugins: [new HtmlWebpackPlugin()]
};
```
启动后
访问 `http:
//localhost:8080`，应该能看到文字和控制台日志。
---
## ✅ 总结：如何确认 `main.js` 是否
加载？
| 检查项 | 方法 |
|-------|------|
| 文件是否存在 | `ls
src/main.js` |
| 是否被构建 | 终端是否有编译成功日志 |
| 是否生成 bundle | Network 面板看是否有 `bundle.js` 请求 |
| 是否插入 HTML | 查看页面源码是否有 `<script
src="bundle.js">` |
| 是否执行 | 控制台是否有 `console.log` 输出 |
| 是否可调试 | Sources 面板能否找到 `main.js` |
---
本文介绍了“相对协议”在网页中的使用方式及其优势。通过省略http:或https:前缀，以//开头的链接能根据网站当前使用的协议自动加载CDN上的资源。文中还提到了在爬虫项目中抓取到此类链接时如何处理以确保图片正常加载。
扫一扫
6579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
