如何使用 webpack-dev-server 观察某些 node_modules 变化

Question

我目前正在试验 monorepo 架构。

我想做的是在我的 web 包中，我运行 webpack 开发服务器我希望它观察某些 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
    }
};

加载程序只是包含的常用内容。

Answer 1

您可以在 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_modules 的正则表达式

ignored[1] = 正则表达式忽略 some_npm_module_name

中的所有 node_modules

你也可以用这个linknpm linked modules don’t find their dependencies

Answer 2

虽然这个问题与 Next.js 或任何特定框架无关，但我想 post 一个与 Next.js 相关的答案，因为我是从 [=23= 来到这里的] 其他人也可能如此。

这是在我的 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 的回答之上。

如何使用 webpack-dev-server 观察某些 node_modules 变化

How to watch certain node_modules changes with webpack-dev-server

webpack-dev-server