我目前正在尝试使用monorepo架构。
我想要做的是在我的web包中运行webpack dev服务器我希望它能够观察某些node_modules(符号链接的本地包)以进行更改并触发“重建”。
这样我就可以单独构建依赖项,我的浏览器会对这些更改做出反应。
我的webpack配置如下:
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
}
};
装载机只是包含的常用内容。
答案 0 :(得分:10)
您可以在webpack.config文件或WebpackDevServer选项中进行配置,以监视node_modules中的更改(我认为默认情况下webpack会监视所有文件中的更改)
https://webpack.js.org/configuration/watch/#watchoptions-ignored
在以下示例中,webpack忽略了node_modules文件夹中除特定模块之外的所有更改。
watchOptions: {
ignored: [
/node_modules([\\]+|\/)+(?!some_npm_module_name)/,
/\some_npm_module_name([\\]+|\/)node_modules/
]
}
ignored[0]
=正则表达式忽略所有未以some_npm_module_name启动的node_module
ignored[1]
=正则表达式忽略some_npm_module_name中的所有node_modules
答案 1 :(得分:4)
由于这个问题与Next.js或任何特定框架无关,因此我想在这里发布与Next.js相关的答案,因为我也是从Google来到这里的。
这是我的next.config.js中对我有用的东西:
module.exports = {
// ...
webpackDevMiddleware: config => {
// Don't ignore all node modules.
config.watchOptions.ignored = config.watchOptions.ignored.filter(
ignore => !ignore.toString().includes('node_modules')
);
// Ignore all node modules except those here.
config.watchOptions.ignored = [
...config.watchOptions.ignored,
/node_modules\/(?!@orgname\/.+)/,
/\@orgname\/.+\/node_modules/
];
return config;
},
// ...
}
这针对软件包的特定组织。如果您只需要定位特定的程序包:
module.exports = {
// ...
webpackDevMiddleware: config => {
// Don't ignore all node modules.
config.watchOptions.ignored = config.watchOptions.ignored.filter(
ignore => !ignore.toString().includes('node_modules')
);
// Ignore all node modules except those here.
config.watchOptions.ignored = [
...config.watchOptions.ignored,
/node_modules([\\]+|\/)+(?!my-node-module)/,
/\my-node-module([\\]+|\/)node_modules/
];
return config;
},
// ...
}
这是基于Elhay的答案。