web-dev-qa-db-ja.com

webpack-dev-serverで特定のnode_modulesの変更を監視する方法

私は現在、monorepoアーキテクチャを実験しています。

私がしたいことは、webpack開発サーバーを実行する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
    }
};

ローダーは通常含まれているものです

webpack-dev-server
16
noherczeg

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リンクモジュールは依存関係を見つけられません

14
Elhay Avichzer

この質問はNext.jsや特定のフレームワークに関するものではないので、他の人と同じようにGoogleからここに到着したので、Next.jsに関する回答をここに投稿します。

これが私の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([\\]+|\/)+(?!my-node-module)/,
      /\my-node-module([\\]+|\/)node_modules/
    ];
    return config;
  },
  // ...
}

これはElhayの答えに基づいています。

0
Chad Johnson