Question

这是一个非常奇怪的问题。我有一个项目，其中包含用于不同虚拟主机的多个文件夹，并且我已经在其中一个虚拟主机文件夹中设置了 npm 来运行 webpack 构建。所以我在 package.json 中有通常的 node_modules 文件和 /project/virtual-hosts/example.com 文件夹。文件夹层次结构中没有更高层的 npm 或 webpack 内容。

该文件夹内更深的几层是 package.json，属于我在那里添加的主题。我不需要那个文件：我没有在那个级别初始化 npm，也没有 node_modules 文件夹或任何 webpack 配置文件。

只要我将该文件留在那个内部文件夹中，我的 webpack 构建就可以正常运行。但是一旦我删除它，构建就会失败

ERROR in ./themes/my-theme/js/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/preset-react'

我已经删除了这第二个 package.json 的所有内容，只留下了 {}，但这种情况仍然发生。我尝试清空我的 node_modules，删除我上层文件夹中的 package-lock.json 文件，删除不需要的 package.json，然后才初始化 npm 并重新安装所有软件包，但我仍然得到相同的结果.

有没有其他人遇到过这种奇怪的事情？

/project/virtual-hosts/example.com/package.json：

{
  // ...
  "scripts": {
    "build-dev": "webpack --config webpack.development.config.js",
    "build-prod": "webpack --config webpack.production.config.js"
  },
  "devDependencies": {
    "@babel/core": "^7.13.14",
    "@babel/preset-env": "^7.13.12",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.2.0",
    "mini-css-extract-plugin": "^1.4.0",
    "node-sass": "^5.0.0",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.7.0",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.30.0",
    "webpack-cli": "^4.6.0"
  }
}

/project/virtual-hosts/example.com/webpack.config.js：

const path = require( 'path' );

const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

const common = {
    mode: 'development',
    watch: true,

    module: {
        rules: [

            // JavaScript
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [ 'babel-loader' ],
            },

            // Images
            {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                type: 'asset/resource',
            },

            // Fonts and SVGs
            {
                test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
                type: 'asset/inline',
            },

            // CSS
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    'sass-loader'
                ],
            },

        ],
    },

    plugins:
        [
            new CleanWebpackPlugin(),
            new MiniCssExtractPlugin( {
                filename: '[name].min.css',
                chunkFilename: '[id].min.css',
            } ),
        ],
};

const mainConfig = Object.assign( {}, common, {
        entry: {
        main: path.resolve( __dirname, './themes/my-theme/js/index.js' ),
    },

    output: {
        path: path.resolve( __dirname, './themes/my-theme/dist' ),
        filename: '[name].min.js',
    },
});

module.exports = [ mainConfig ];

/project/virtual-hosts/example.com/themes/my-theme/package.json：

{}

当我从更下方的文件夹中删除空的 package.json 文件时，Webpack 构建会中断

0 个答案: