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

Question

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

我有以下目录结构：

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

我想设置webpack，以便它处理component.source.js中从src目录到component.dist.js的{​​{1}}。这很容易。另外，我想为我的组件提供演示应用程序（build）。此演示应用需要我的组件（demo.js）和component.dist.js的dist版本。 Webpack应该react并输出捆绑到demo.js，然后我在app.js的脚本标记中使用。

我不知道如何通过热重装来设置webpack和webpack-dev-server来正确处理这种情况。我尝试了什么：

1. 使用webpack-dev-server，但我不知道如何在index.html中导入/要求component.dist.js，因为dev-server将捆绑包保留在内存中。我尝试使用demo.js，但显然它仅在html页面中生效，而不是在js文件中生效。

2. 将webpack与output.publicPath选项一起使用。在这种情况下，当构建演示应用程序时，--watch会出现demo.js无法解决的错误。

Answer 1

好像你正在做两个版本？一个用于component.dist.js，另一个用于app.js.你可以简单地从demo.js中获取component.source.js，因为这个文件总是可用的，并且有demo.js作为你的条目，app.js作为你的输出。 您可以使用react-hot-loader

设置热重写