Question

我正在将项目从使用Grunt迁移到使用Webpack。该项目使用jQuery。我注意到即使我尚未将jQuery添加到package.json中，捆绑的代码也能正常工作，这似乎很奇怪。

看着webpack --mode=development --display-modules的输出，我看到了：

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

也就是说，似乎在某个时候我运行了npm install --global jquery，而Webpack正在导入该jQuery。我不希望发生这种情况，因为我的队友/服务器不会在$HOME中安装jQuery。

一个明显的解决方案是对我来说，只是从我的$HOME/node_modules中删除jQuery（不知道它如何到达那里），这将导致Webpack失败，直到我按预期将其添加到package.json中。

但是我想知道：

为什么 Webpack使用$HOME/node_modules？我知道这是Node包解析器的默认行为，但由于我想象许多其他开发人员会将他们的项目嵌套在$HOME下，因此这似乎很容易出错。
如何指定Webpack尝试解析模块的范围？

（我看过Webpack的documentation on 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（以及所有与此相关的节点解析器）将继续搜索您的树，直到找到具有node-modules目录的目录。然后它将在其中检查jquery。它会继续执行此操作，直到找到所需的内容或到达文件系统的根为止。

Webpack正在从我的机器的全局`node_modules`中导入模块。如何获取仅从项目的`node_modules`导入的内容？

1 个答案: