如何使用webpack-dev-server观察特定的node_modules更改

Question

如何使用webpack-dev-server观察特定的node_modules更改

webpack-dev-server

39

我目前正在尝试使用单体仓库架构。

我的想法是在运行webpack dev server的web包中，我想让它监视某些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
    }
};

加载器只是通常包含的东西。

- noherczeg

3个回答

11

更新：我目前正在使用Next.js 11，似乎这不再必要。

虽然这个问题与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 的回答基础上进一步发展的。

- Chad Johnson

你救了我的一天！谢谢！！ - sergimbo

@sergimbo 欢迎！我刚刚添加了一些改进的正则表达式到这个答案中。 - Chad Johnson

3

`snapshot.managedPaths`

A common use case for managedPaths would be to exclude some folders from node_modules, e.g. you want webpack to know that files in the node_modules/@azure/msal-browser folder are expected to change, which can be done with a regular expression like the one below:
module.exports = {
  snapshot: {
    managedPaths: [
      /^(.+?[\\/]node_modules[\\/](?!(@azure[\\/]msal-browser))(@.+?[\\/])?.+?)[\\/]/,
    ],
  },
};

- laggingreflex

如果这个答案能解释一下它是如何与watchOptions.ignored交互的，那就更好了。而且(@.+?[\\/])?.+?)[\\/]/的目的也不太清楚。 - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Elhay Avichzer · Accepted Answer

你可以在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

您还可以使用此链接npm linked modules don’t find their dependencies。