我有一个相当简单的webpack设置,但是有一点不同。我可以想到几种不同的方法来创建我的预期行为,但我想知道是否有更好的方法(我对webpack还比较陌生)。
我有一个基本的TypeScript/Scss应用程序,所有的src文件都存在于src
目录中。我还有一个组件库捆绑包,通过单独的构建过程(通过Node触发)动态生成。这个捆绑包也以src
的形式结束(它包含一些Sass变量和一些其他属于 src
的资源)。这是src/custom-library-bundle
。我当前的webpack设置使用CopyWebpackPlugin
将适当的bundle文件移动到public
(dist)目录中。我的webpack开发服务器会监视变化并按预期重新加载。这一切都运作得非常好。
现在来看这个变化。我已经设置了一个自定义的watcher以便在别处监视自定义组件库的捆绑包变化。当那里发生变化时,它会触发上面提到的定制build过程。这个过程(正如预期的那样)修改了src/custom-library-bundle
目录,并启动了多个监视器/重新加载器,因为bundle正在填充。在技术上它是工作的?行为也是预期的,但理想情况下,我希望能够告诉它等到自定义安装工作“完成”,然后才触发编译/重新加载。
哇,这不是一个容易解释的问题。以下是一个webpack配置,希望能够更清晰地说明:
devServer: {
contentBase: path.join(__dirname, 'public'),
port: 9000,
host: '127.0.0.1',
after: (app, server) => {
new MyCustomWatcherForOtherThings().watch(() => {
// invoked after the src/custom-library-bundle is done doing its thing (each time)
// now that I know it's done, I want to trigger the normal compilation/reload
})
},
watchOptions: {
ignored: [
/node_modules/
// I've been experimenting with the ignored feature a bit
// path.resolve(__dirname, 'src/custom-library-bundle/')
]
}
}
最理想的方法:在我最理想的情况下,我希望只需手动触发webpack dev server在我的自定义监视回调中执行其操作;直到我告诉它注意为止,它可以忽略src/custom-library-bundle
。然而,我似乎找不到这样的方法。这可能吗?
备选方案#1:我可以忽略src/custom-library-bundle
目录,将更新的文件移动到public
(不使用webpack方法),然后当我知道完成时仅触发重新加载。我不喜欢这个方案,因为我希望无论是监视还是进行一次性构建都能使用相同的流程(我希望所有内容最终都出现在public
目录中,因为webpack完成了这项工作,而不是因为我编写脚本在特定情况下将其放置在那里)。但是,假设我克服了这个问题,如何为dev server触发浏览器重新加载?这可能吗?
备选方案#2:这是我倾向于的方法,但感觉额外且不必要。我可以使我的自定义构建过程输出到另一个目录中(一个我的webpack设置完全不关心的目录)。一旦构建过程完成,我可以将所有文件移动到src/custom-library-bundle
,其中监视会检测到1个更改并进行单个编译/重新加载。这让我非常接近,但感觉添加了一个我不想要的步骤。
备选方案#3?你能想到更好的方法解决这个问题吗?
更新(包括版本):
- webpack
4.26.1
- webpack-dev-server
3.1.14