Webpack：将 webpack.config.js 移动到文件夹会破坏 webpack答案

【问题标题】：Webpack: Moving webpack.config.js to a folder breaks webpackWebpack：将 webpack.config.js 移动到文件夹会破坏 webpack
【发布时间】：2021-10-11 15:12:49
【问题描述】：

我最近花了一天多的时间试图弄清楚为什么 webpack 不能正常工作（它正在适当地捆绑，但没有运行任何像 babel 这样的模块），结果证明我试图变得花哨并把我的webpack.config.js 文件在名为 webpack/ 的文件夹中。

我将它移回根目录（带有package.json 文件的目录，现在它工作正常，但它困扰着我很多我无法弄清楚如何让 webpack 正常运行时我把它在一个文件夹中。

我错过了什么？如何让 Webpack 从根目录中的文件夹正确运行？

这是我当前的代码 webpack.config.js：

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



module.exports = {
  entry: {
      main: path.resolve(__dirname,"src/js/index.js"),
    },
  output: {
    path: path.resolve(__dirname, "STATIC/frontend"),
    filename: "js/[name].js",
  },
  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']
  }),
  ],
};

package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "babel-loader": "^8.2.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "webpack": "^5.58.1",
    "webpack-cli": "^4.9.0",
    "vue-loader": "^15.9.8",
    "vue-router": "^3.5.2",
    "vue-template-compiler": "^2.6.14",
    "webpack-dev-server": "^4.3.1"
  },
  "dependencies": {
    "@popperjs/core": "^2.10.2",
    "core-js": "^3.18.2",
    "jquery": "^3.6.0",
    "vue": "^2.6.14"
  }
}

【问题讨论】：

标签： node.js webpack

【解决方案1】：

您应该可以使用--config 将自定义配置路径传递给 webpack：source

"dev": "webpack --mode development --watch --config webpack/webpack.config.js",
"build": "webpack --mode production --config webpack/webpack.config.js"

注意：如果在构建时遇到错误，您可能需要将 webpack.config.js 中的路径调整到新位置。

【讨论】：