webpack.config.js移入子文件夹后webpack无法正常运行如何解决？

问题根因 #

1. webpack启动时默认只会在执行命令的工作目录（也就是package.json所在的项目根目录）查找webpack.config.js配置文件，你将配置放到webpack/子目录后，webpack找不到你编写的自定义配置，会直接用内置默认配置执行打包，因此你写的babel-loader、css-loader等规则全部不会生效。
2. 就算手动指定了配置文件路径，你现有配置中所有路径都用__dirname做基准拼接，__dirname指向的是配置文件自身所在的目录，配置移到webpack/子目录后__dirname值为<项目根目录>/webpack，原有的路径拼接逻辑会全部错位，找不到入口文件、输出位置也会出错。

修复步骤 #

1. 修改package.json的启动脚本，手动指定配置文件路径 #

在webpack命令后加--config参数，指向你存放配置文件的完整路径：

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development --watch --config webpack/webpack.config.js",
    "build": "webpack --mode production --config webpack/webpack.config.js"
  }
}

2. 修正webpack.config.js中的路径拼接逻辑 #

所有基于__dirname拼接的路径都需要向上回退一层（加../），回到项目根目录再寻址对应文件：

const path = require("path");
const webpack = require("webpack");
const { merge } = require('webpack-merge')

module.exports = {
  entry: {
      // 回退到根目录再找src目录
      main: path.resolve(__dirname,"../src/js/index.js"),
    },
  output: {
    // 回退到根目录再输出到STATIC目录
    path: path.resolve(__dirname, "../STATIC/frontend"),
    filename: "js/[name].js",
  },
  // 其余loader、插件、优化配置不需要改动
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
            {
                loader: 'style-loader',
            },
            {
                loader: 'css-loader',
            },
        ]
      },
      {
        test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|svg)(\?.*)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
            },
        },
      },
    ],
  },
  optimization: {
    minimize: true,
    splitChunks:{
      chunks:'all',
      name:'vendors',
  }
  },
  plugins: [
    new webpack.ProvidePlugin({
      $:"jquery",
      jQuery:'jquery',
      Popper:['@popperjs/core','default']
  }),
  ],
};

可选补充 #

如果你项目根目录下有单独的.babelrc或者babel.config.json等Babel配置文件，babel-loader可能会因为配置文件路径变更找不到配置，可在babel-loader的配置中显式指定配置文件路径：

{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: {
    loader: "babel-loader",
    options: {
      configFile: path.resolve(__dirname, '../.babelrc')
    }
  },
}

内容的提问来源于stack exchange，提问作者Stephen Koplin