Javascript 网页包：包括html文件及其js脚本以及独立的js脚本

我目前有一个项目遵循以下结构：

src/
├── browserAction/
│   ├── assets/
│   ├── index.html
│   ├── script.js
│   └── style.css
├── options/
│   ├── assets/
│   ├── index.html
│   ├── script.js
│   └── style.css
├── manifest.json
├── background_script.js
└── content_script.js

我目前有webpack设置，可以使用babel传输背景和内容脚本，并将清单作为独立文件复制，但我不知道如何捆绑这两个index.html文件（包含script.js和style.js的内容），并将文件结构保持在两个单独的文件夹中。我当前的网页包配置为：

const path=require（'path'）；
const CopyWebpackPlugin=require（'copy-webpack-plugin'）；
const{CleanWebpackPlugin}=require（'clean-webpack-plugin'）；
const是_PRODUCTION=process.env.NODE_env==='PRODUCTION'；
module.exports={
输出：{
文件名：'[name].js'，
path:path.resolve（uu dirname，'dist'），
},
上下文：path.resolve（uu dirname，'src'），
条目：{background\u script:'./background\u script.js'，content\u script:'./content\u script.js'}，
模块：{
规则：[
{
测试：/\.html$/i，
使用：[
“文件加载器”，
“提取加载程序”，
{
加载器：“html加载器”，
选项：{
最小化：是_生产，
},
},
],
},
{
测试：/\.css$/i，
用法：['style-loader'，'css-loader']，
},
{
测试：/\.m？js$/,，
排除：/node_模块/，
使用：[
{
加载器：“巴别塔加载器”，
选项：{
预设：['@babel/preset env']，
},
},
],
},
{
测试：/\（png | jpg | gif）$/i，
使用：[
{
加载器：“url加载器”，
选项：{
限额：8192，
},
},
],
},
],
},
插件：[新的CopyWebpackPlugin（{patterns:[{from:'manifest.json'，to:'.'.}]}），新的CleanWebpackPlugin（），
};

我的目的是将输出转换为dist匹配：

dist/
├── browserAction/
│   └── index.html
├── options/
│   └── index.html
├── manifest.json
├── background_script.js
└── content_script.js

我需要使用哪些装载机来实现这一点？我一直在尝试各种方法，但我无法得到我需要的结果。

您正在寻找。配置示例：

const HtmlWebpackPlugin=require（'html-webpack-plugin'）；
module.exports={
上下文：path.resolve（uu dirname，'src'），
条目：{
浏览器操作：'./browserAction/script.js'，
选项：'./options/script.js'，
背景脚本：'./背景脚本.js'，
content_script:“./content_script.js”
},
模块：{
//你的装载机
// ...
},
插件：[
新HtmlWebpackPlugin({
文件名：“browserAction/index.html”，
模板：“browserAction/index.html”，
块：['browser\u action']
}),
新HtmlWebpackPlugin({
文件名：“options/index.html”，
模板：“options/index.html”，
块：[“选项”]
})
]
}

---

顺便说一下，看起来您正在尝试编写浏览器扩展；我推荐一个已经配置了webpack的样板文件。

我自己也在玩它，但我得到了以下错误：

1子编译webpack 5.2.0中的错误，1702毫秒中有一个错误，错误命令失败，退出代码为1。

没有实际的消息，所以我不知道如何处理它。我看到了那个样板，但我想从头开始做，以便更好地理解webpack，那个还使用了不推荐的加载程序。@Jim在没有更详细的错误消息的情况下，很难说到底发生了什么。您可以尝试将

--stats verbose

添加到您的Web包调用中（或者将

stats:“verbose”

添加到您的配置中），希望能够进一步缩小问题的范围。