移动Webpack配置文件至根目录后模块找不到问题求助

项目结构变化 #

原结构 #

• Folder
  • SubFolder 1
  • react
    • webpack.config.json
    • package.json
    • package-lock.json
    • node_modules
    • src
      • somecode.js
      • somecode2.js

目标结构 #

• Folder
  • SubFolder 1
  • webpack.config.json
  • react
    • package.json
    • package-lock.json
    • node_modules
    • src
      • somecode.js
      • somecode2.js

原Webpack配置代码：

/// <binding />
"use strict";
const path = require("path");
const WebpackNotifierPlugin = require("webpack-notifier");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");
const AssetsPlugin = require('assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const outputPath = path.resolve(__dirname, "../Scripts/ReactScript");

const app = {
    entry: [
        'babel-polyfill',
        "./src/index.js"
    ],
    output: {
        path: outputPath,
        filename: "[name].[chunkhash].js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    },
    devtool: "inline-source-map",
    plugins: [
        new WebpackNotifierPlugin(),
        new BrowserSyncPlugin(),
        new AssetsPlugin({
            removeFullPathAutoPrefix: true,
            fileName: 'webpack.assets.json',
            path: outputPath
        }),
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [
                path.resolve(outputPath, '*.js'),
                path.resolve(outputPath, '*.js.map')
            ],
            dangerouslyAllowCleanPatternsOutsideProject: true,
        })
    ],
    resolve: {
        extensions: [
            '.js',
            '.jsx'
        ],
    },
};

if (process.env.NODE_ENV === 'development') {
    app.output.filename = '[name].js';
}
module.exports = app;

尝试添加context: path.resolve(__dirname, 'react')后，require语句无法正常工作，请问这种配置调整是否可行？是否需要同时移动package.json、package-lock.json和node_modules？

回答 #

完全可行，不需要移动package.json、package-lock.json和node_modules。问题出在配置文件自身的模块解析逻辑和Webpack的context适配，调整以下两点即可解决：

1. 让Node.js找到react目录下的依赖包 #

配置文件移到根目录后，Node.js默认会从根目录的node_modules找依赖，但你的所有依赖都安装在react/node_modules里。可以在配置文件最顶部添加模块搜索路径设置：

const path = require("path");
// 让Node.js优先去react目录的node_modules查找依赖
process.env.NODE_PATH = path.resolve(__dirname, 'react/node_modules');
// 清除模块缓存，确保新路径生效
require('module').Module._initPaths();

2. 正确配置Webpack的上下文和路径 #

context配置确实需要设置为react目录，同时检查相对路径的适配性：

• entry的相对路径会基于context解析，所以原来的./src/index.js无需修改
• 原配置中的outputPath是path.resolve(__dirname, "../Scripts/ReactScript")，现在__dirname指向根Folder，这个路径会跳出Folder目录，可根据实际需求调整为path.resolve(__dirname, "Scripts/ReactScript")

修改后的完整配置示例 #

/// <binding />
"use strict";
const path = require("path");

// 配置Node.js模块搜索路径，指向react目录下的node_modules
process.env.NODE_PATH = path.resolve(__dirname, 'react/node_modules');
require('module').Module._initPaths();

const WebpackNotifierPlugin = require("webpack-notifier");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");
const AssetsPlugin = require('assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// 根据实际需求调整输出路径，这里假设Scripts目录在根Folder下
const outputPath = path.resolve(__dirname, "Scripts/ReactScript");

const app = {
    // 设置Webpack的基础上下文为react目录
    context: path.resolve(__dirname, 'react'),
    entry: [
        'babel-polyfill',
        "./src/index.js"
    ],
    output: {
        path: outputPath,
        filename: "[name].[chunkhash].js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    },
    devtool: "inline-source-map",
    plugins: [
        new WebpackNotifierPlugin(),
        new BrowserSyncPlugin(),
        new AssetsPlugin({
            removeFullPathAutoPrefix: true,
            fileName: 'webpack.assets.json',
            path: outputPath
        }),
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [
                path.resolve(outputPath, '*.js'),
                path.resolve(outputPath, '*.js.map')
            ],
            dangerouslyAllowCleanPatternsOutsideProject: true,
        })
    ],
    resolve: {
        extensions: [
            '.js',
            '.jsx'
        ],
    },
};

if (process.env.NODE_ENV === 'development') {
    app.output.filename = '[name].js';
}
module.exports = app;

额外说明 #

• 如果不想修改NODE_PATH，也可以用绝对路径直接加载插件，比如const WebpackNotifierPlugin = require(path.resolve(__dirname, 'react/node_modules/webpack-notifier'))，但这种方式维护性较差，推荐使用NODE_PATH的方案
• 运行Webpack时，确保在根Folder目录下执行命令，或通过--config参数指定配置文件路径

内容的提问来源于stack exchange，提问作者Ricardo Alves