webpack的库和客户端应用程序配置

Library and client app configuration for webpack

本文关键字：应用程序 配置 客户端 webpack      更新时间：2023-09-26

我想创建合适的webpack设置，以便为该库开发我自己的react组件和演示应用程序。

我有以下目录结构：

.
├── build
│   ├── component.dist.js
├── demo
│   ├── demo.js
│   ├── app.js
│   └── index.html
├── package.json
├── src
│   └── component.source.js
└── webpack.config.js

我想设置webpack，以便它处理从src目录到build中的component.dist.js的构建component.source.js。这是最容易的部分。此外，我想为我的组件提供演示应用程序（demo.js）。这个演示应用程序需要我的组件（component.dist.js）和react的dist版本。Webpack应该使用demo.js并将bundle输出到app.js，然后我在index.html中的脚本标记中使用它。

我不知道如何通过热重新加载来设置webpack和webpack开发服务器来正确处理这种情况。我尝试过的：

  1. 使用webpack开发服务器，但我不知道如何在demo.js中导入/要求component.dist.js，因为开发服务器将捆绑包保存在内存中。我尝试过使用output.publicPath，但显然它只在html页面中有效，而在js文件中无效。

  2. 使用带有--watch选项的webpack。在这种情况下，当构建演示应用程序时，demo.js出现无法解决component.dist的错误。

您似乎正在进行两个构建？一个用于component.dist.js，另一个用于app.js。是否可以简单地从demo.js中要求component.source.js，因为这个文件总是可用的，并且将demo.js作为输入，将app.js作为输出。您可以使用react热加载程序设置热重新加载

相关文章：