在 webpack 中托管多个 html 页面

Question

My question, simply put is: How do I host multiple .html pages with webpack?

我是 Webpack 的新手，不太了解它是如何工作的。我试过阅读文档无济于事。

我正在为 OWA 和 Outlook 2016 创建我的第一个 Outlook 加载项 .我使用 Yeoman Generator 通过 React 和 TypeScript 构建我的项目。还有一个自动生成的配置文件夹，其中包含 webpack.common.js 和其他 Webpack 文件。来自 package.json 的 Webpack 依赖项：

"devDependencies": {...
"webpack": "2.3.1",
"webpack-dev-server": "2.4.2",
"webpack-merge": "4.1.0"
}

我正在尝试让我的加载项启动一个 AsyncDialog（在新对话框 window 中本地托管 .html，自动重定向到 Office 365 登录页面）以连接到共享点。
我尝试在我的 /src 文件夹中的 dialog.html 页面和 index.html 打开对话框，但 我发现自己无法引用除默认 index.html 之外的任何内容（引用 index.html 有效，但没有别的）。如果我尝试通过网络浏览器导航到 dialog.html，问题仍然存在，这让我相信这可能是一个 Webpack 问题。

我是运行一个 webpack-dev-server out of localhost 和 https://localhost:3000/index.html 工作但 https://localhost:3000/dialog.html 不工作（显示：Cannot GET /index.html）。
可能的相关信息来自 webpack.common.js:

const entry = {
    vendor: './vendor.ts',
    app: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './main.tsx',
    ]
};
const output = {
    path: path.resolve('dist'),
    filename: '[name].[hash].js',
    chunkFilename: '[id].[hash].chunk.js'
};

有什么想法吗？

感谢任何和所有意见。

Answer 1

从您的问题来看，您似乎也无法访问加载项框架之外的 https://localhost:3000/dialog.html。如果那是正确的，那么首先尝试修复它，不幸的是我不是 web pack 方面的专家，所以无法在那里提供太多帮助。如果我的理解不正确，请告诉我们。

谢谢

Answer 2

事实证明这是一个基本要求，使用 html-webpack-plugin 可以轻松解决！ Under "Generating multiple HTML files"，我很惊讶我没有早点看到它，我一定已经看了六遍那个文档了。希望这对以后的另一个菜鸟有帮助：/

感谢你们帮助我:)

在 webpack 中托管多个 html 页面

Hosting multiple html pages in webpack

outlook

outlook-addin

webpack

outlook-web-addins

html-webpack-plugin