Webpack 是目前前端项目中最常用的打包工具之一，它可以将项目中的多个模块打包成一个或多个文件，使得前端项目代码结构更加清晰且易于维护。但是，有时候我们会遇到一些问题，其中之一是打包出来的文件路径不对。
问题
当我们执行 webpack 命令进行打包时，有时候会发现打包出来的文件路径不是我们想要的，例如：
dist ├── js │ ├── main.3346b.js └── index.html
上面的例子中，我们希望文件都被打到 dist/js 目录下，但是 index.html 却被放到了 dist 目录下。
原因
Webpack 打包出来的文件路径由我们的配置文件决定，我们需要检查我们的配置文件中有没有写错路径，或者有没有配置好相关插件。
以下是一个简单的 Webpack 配置文件：
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};上面的配置文件中，我们将打包后的文件输出到 dist 目录下。如果我们想要将打包的 JavaScript 文件放到 dist/js 下，可以这样配置：
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/bundle.js',
path: path.resolve(__dirname, 'dist')
}
};解决方法
如果我们发现 Webpack 打包出来的文件路径不对，可以检查一下我们的配置文件中是否正确配置了输出路径。
另外，我们可以使用 html-webpack-plugin 这个插件来生成 HTML 文件，并将其输出到我们指定的目录下。以下是一个使用 html-webpack-plugin 配置的示例：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
--------- ---------------
----- ----------------------- -------
--
-------- -
--- -------------------
--------- -------------------
--------- -------------
------- ----
--
-
--上面的示例中，我们使用 html-webpack-plugin 来生成 HTML 文件。我们将打包后的 JavaScript 文件放到 dist/js 目录下，并将生成的 HTML 文件命名为 index.html 并放到 dist 目录下。
结论
Webpack 打包出来的文件路径不正确，可能是由于我们的配置文件中的输出路径有误，或者缺少相关插件造成的。我们可以通过检查配置文件来解决这个问题，并使用 html-webpack-plugin 等插件来实现更多的功能，例如生成 HTML 文件等。
希望本文对你有所帮助，祝你使用 Webpack 打包愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee289e77d675cfffd40446