如何使用 webpack-dev-server 观察某些 node_modules 变化 [英] How to watch certain node_modules changes with webpack-dev-server
问题描述
我目前正在试验 monorepo 架构.
I'm currently experimenting with a monorepo architecture.
我想做的是在我的 web 包中运行 webpack 开发服务器我希望它监视某些 node_modules(符号链接的本地包)的更改并触发重建".
What I would like to do is in my web package where I run webpack dev server I'd like it to watch certain node_modules (symlinked local packages) for changes and trigger a "rebuild".
这样我就可以单独构建依赖项,而我的浏览器会对这些更改做出反应.
This way I'd be able to build dependencies separately and my browser would react to those changes.
我的 webpack 配置如下:
My webpack config is the following:
var loaders = require('./../../../build/loaders-default');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: ['./src/index.ts'],
output: {
filename: 'build.js',
path: path.join(__dirname, 'dist')
},
resolve: {
extensions: ['.ts', '.js', '.json']
},
resolveLoader: {
modules: ['node_modules']
},
devtool: 'inline-source-map',
devServer: {
proxy: [
{
context: ['/api-v1/**', '/api-v2/**'],
target: 'https://other-server.example.com',
secure: false
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
inject: 'body',
hash: true
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.jquery': 'jquery'
})
],
module:{
loaders: loaders
}
};
加载器只是通常包含的东西.
推荐答案
您可以在 webpack.config 文件或 WebpackDevServer 选项中进行配置,以监视 node_modules 中的更改(我认为默认情况下 webpack 会监视所有更改文件)
You can config in in webpack.config file or in WebpackDevServer option, to watch for changes also in node_modules (i think that by default webpack watching for changes in all files)
https://webpack.js.org/configuration/watch/#watchoptions-忽略
在以下示例中,webpack 忽略了 node_modules 文件夹中除特定模块之外的所有更改.
in the following example webpack ignored all changes in node_modules folder except specific module.
watchOptions: {
ignored: [
/node_modules([\\]+|\/)+(?!some_npm_module_name)/,
/\some_npm_module_name([\\]+|\/)node_modules/
]
}
ignored[0]
= Regex 忽略所有不以 some_npm_module_name 开头的 node_modules
ignored[0]
= Regex to ignore all node_modules that not started with some_npm_module_name
ignored[1]
= 正则表达式忽略 some_npm_module_name 中的所有 node_modules
ignored[1]
= Regex to ignore all node_modules inside some_npm_module_name
您也可以使用此链接 npm 链接的模块找不到它们的依赖项
这篇关于如何使用 webpack-dev-server 观察某些 node_modules 变化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!