记一次webapck4 配置文件无效的解决历程

关于“记一次webapck4 配置文件无效的解决历程”的解决历程攻略，我会在下文中详细阐述方案和问题原因，并给出两个示例说明。

问题描述

最近在使用webpack4打包Vue项目时，我修改了webpack.config.js配置文件，并执行npm run build打包命令，但是发现修改的配置并没有生效，还停留在默认配置的状态。

解决方案

经过对问题的排查，我得出了一个解决方案，那就是使用--config选项手动指定配置文件路径。在执行打包命令时，可以使用命令：

webpack --config path/to/webpack.config.js
// 或
npx webpack --config path/to/webpack.config.js

命令中的path/to/webpack.config.js是你的webpack.config.js文件的绝对路径。

这个方案可以解决我遇到的问题，但是为什么会出现这个问题呢？

问题原因

问题的原因是，在webpack4的默认配置中，指定了一个默认的配置文件路径，如果你的配置文件名不是webpack.config.js，就需要手动使用--config选项指定文件路径。

在webpack4 的默认配置文件 node_modules/webpack-cli/bin/config-**.js中可以看到以下代码段:

const options = {
  config: {
    alias: 'c',
    type: 'string',
    describe: 'Provide path to a webpack configuration file',
    default: 'webpack.config.js'
  }
}

可以看到，这里指定了一个默认的配置文件名为webpack.config.js。如果你的配置文件名不是这个，就需要手动指定。

示例说明

在我的项目中，我把配置文件名命名为mywebpack.config.js，然后在执行打包命令时不加上--config选项，导致配置没有生效。使用手动指定配置文件路径的方式来解决这个问题。

而下面的例子则是演示，如果命令行中指定了--config选项，即使你的配置文件名不是webpack.config.js，也可以正常生效。

# 使用mywebpack.config.js文件进行打包
npx webpack --config webpack-config/mywebpack.config.js

# 使用webpack.config.js文件进行打包
npx webpack --config webpack-config/webpack.config.js

以上就是我解决webpack4 的配置文件无效的历程，希望对你有所帮助。