Webpack 正在從我機器的全局“node_modules”導入模塊。 如何讓它只從我的項目的 `node_modules` 導入？

Question

我正在將一個項目從使用 Grunt 遷移到使用 Webpack。 本項目使用 jQuery。 我注意到捆綁的代碼運行良好，即使我還沒有將 jQuery 添加到package.json ，這看起來很奇怪。

查看 webpack webpack --mode=development --display-modules的 output ，我看到：

[../../../../../../../node_modules/jquery/dist/jquery.js] /Users/rothomas/node_modules/jquery/dist/jquery.js 274 KiB {index} [built]

那就是：似乎在某些時候我運行了npm install --global jquery ，並且 Webpack 正在導入 ZF593E1439188E478349D52476506C22EZ 我不希望這種情況發生，因為我的隊友/服務器不會在$HOME中安裝 jQuery 。

The obvious solution is for me to just remove jQuery from my $HOME/node_modules (no idea how it got there anyway), which will cause Webpack to fail until I add it to package.json , as expected.

但我想知道：

1. 為什么Webpack 使用$HOME/node_modules ？ 我知道這是 Node package 解析器的默認行為，但它似乎很容易出錯，因為我想許多其他開發人員將他們的項目嵌套在$HOME下。

2. 如何指定 Webpack 應該嘗試解析模塊的 scope？

（我查看了 Webpack關於 resolvers 的文檔，但對我來說不是很清楚。）

這是我當前的 Webpack 配置：

const path = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

function pathTo(filepath) {
    return path.join(__dirname, filepath);
}

module.exports = function (env, argv) {
    return {
        entry: {
            'index': [
                pathTo('src/scripts/index.js'),
                pathTo('src/scss/index.scss'),
            ]
        },
        module: {
            rules: [
                {
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/env'
                        ]
                    },
                    test: /\.js$/,
                },
                {
                    test: /\.(scss|css|sass)$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                url: false,
                            },
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sassOptions: {
                                    outputStyle: 'expanded',
                                },
                            },
                        },
                    ],
                },
            ],
        },
        output: {
            filename: '[name].js',
            path: pathTo('web'),
        },
        plugins: [
            new MiniCssExtractPlugin()
        ],
    }
}

Answer 1

問題是您的應用程序位於具有全局node_modules目錄的目錄中。

Webpack（以及所有節點解析器）將繼續搜索您的樹，直到找到具有節點模塊目錄的目錄。 然后它將在那里檢查 jquery。 它會繼續這樣做，直到找到它正在尋找的東西，或者它到達文件系統的根目錄。