Webpack 的 entry 配置到底该怎么写才对？

Des.芸菡提问于 2026-03-25 11:53:20 阅读 13

工具

我刚学 Webpack，看到文档说 entry 是入口文件，但我试了好几种写法都不行。比如我写了 entry: './src/index.js'，打包后页面一片空白，控制台还报错说找不到模块。

我的项目结构很简单，src 下就一个 index.js 和一个 main.js，想从 index.js 开始打包。是不是还要配 output？下面是我的配置：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode: 'development'
};

HTML 里我是用 <script src="./dist/bundle.js"></script> 引入的，但根本没反应，这到底哪里错了？

Loader Plugin Webpack

我来解答赞 1 收藏

反馈

1 条解答

小爱敏 Lv1

你的配置看起来基本没问题，但是有几个地方可以检查一下。首先确认一下你的项目路径和文件名是不是真的如你所说，有时候拼写错误会导致找不到模块的问题。

其次，确保你的 index.js 文件里面确实有东西，哪怕是简单的 console.log('Hello!') 也好，这样至少能验证一下脚本是否正常加载了。

然后，检查一下你的 HTML 文件是不是正确地引入了 bundle.js。路径要对，而且确保浏览器加载的是打包后的文件而不是旧版本。有时候缓存问题也会导致页面一片空白，可以尝试清除浏览器缓存或者使用无痕模式看看有没有变化。

最后，虽然你已经配置了 output，但为了保险起见，可以再检查一下路径和文件名是否正确。你的配置里 output.path 设置为 dist 文件夹，filename 设置为 bundle.js，看起来是对的，但是有时候小细节也会出问题。

如果以上都没有问题，试着在 webpack.config.js 里加上 watch: true，这样修改文件后会自动重新打包，有时候可以避免一些手动操作导致的疏漏。

如果问题依然存在，可以考虑在 webpack.config.js 里添加一些调试信息，比如 stats: 'verbose'，这会输出详细的打包过程，有助于找出问题所在。希望这些提示能帮到你，优化一下配置应该就能解决了。

2026-03-25 12:10