Question

我的问题，简单地说就是：如何使用webpack托管多个.html页面？

我是 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 （本地托管的.html，该窗口会自动重定向到Office 365登录页面）连接到sharepoint 我尝试在我的/ src文件夹中的dialog.html页面以及index.html打开对话框，但我发现自己无法引用除默认index.html之外的任何内容 （引用index.html有效，但没有其他内容）。如果我尝试通过Web浏览器导航到dialog.html，这会导致我认为这可能是 Webpack 问题，问题仍然存在。

我正在运行webpack-dev-server本地主机和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

原来这是一个基本要求，可以通过html-webpack-plugin轻松解决！ Under "Generating multiple HTML files"，我发现令人惊讶的是，我没有早点看到它，我必须经历了六次这样的文件。希望这有助于将来的另一个菜鸟：/

感谢你们两个人试图帮助我：）

Answer 2

从您的问题看来，您似乎无法访问加载项框架之外的https://localhost:3000/dialog.html。如果这是正确的，那么首先尝试解决这个问题，不幸的是我不是网络包的专家，因此无法在那里提供太多帮助。如果我的理解不正确，请告诉我们。

由于

在webpack中托管多个html页面

2 个答案: