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

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

工具

我刚学 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

我来解答赞 8 收藏

反馈

2 条解答

熙炫 Dev Lv1

看起来你的配置基本是对的，但有几个地方需要检查和调整。让我一步一步来帮你理清楚。

第一步是确认文件路径是否正确。你的项目结构简单，假设目录如下：

project

├── src

│   ├── index.js

│   └── main.js

└── webpack.config.js

你现在的 entry 配置 './src/index.js' 是正确的，因为相对路径是从 webpack.config.js 文件所在位置开始计算的。

第二步是看看你的 index.js 文件内容。有时候打包失败是因为入口文件里有错误。确保它至少包含一些简单的代码，比如：

console.log('Webpack is working!');

第三步检查输出路径。你的 output 配置也是对的，会把打包后的文件放到 dist 目录下，并命名为 bundle.js。记得在第一次运行 webpack 时，dist 文件夹可能不存在，webpack 会自动创建它。

第四步，你需要安装和使用 html-webpack-plugin 自动生成 HTML 文件。手动写 script 标签容易出错。安装这个插件：

npm install --save-dev html-webpack-plugin

然后修改你的 webpack.config.js 如下：

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');



module.exports = {

  entry: './src/index.js',

  output: {

    path: path.resolve(__dirname, 'dist'),

    filename: 'bundle.js'

  },

  plugins: [

    new HtmlWebpackPlugin({

      template: './src/index.html' // 假设你在 src 下有个 index.html

    })

  ],

  mode: 'development'

};

这里需要注意的是，你需要在 src 目录下创建一个简单的 index.html 文件，内容可以很简单：

<!DOCTYPE html>

<html lang="en">



  <meta charset="UTF-8">

  <title>My App</title>

</head>

<body>

  <h1>Hello Webpack</h1>

</body>

</html>

最后别忘了运行 webpack 打包命令。如果你没有全局安装 webpack-cli，可以在 package.json 中添加 scripts：

"scripts": {

  "build": "webpack"

}

然后用 npm run build 来打包。这样应该就能正常工作了。如果还有问题，建议先清理缓存再重新打包试试看，有时候旧文件会导致奇怪的问题。

2026-03-29 22:04

小爱敏 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