webpack 配置文件在 vue-cli webpack 项目中的位置？

Posted 2023-02-23

【中文标题】webpack 配置文件在 vue-cli webpack 项目中的位置？

【英文标题】：Location of webpack config file in vue-cli webpack project?

【发布时间】：2018-05-14 00:43:22

【问题描述】：

我使用 cli 创建了一个 vue.js 项目。我使用了 webpack 模板。我一直在研究它几天，它运行良好。

现在我需要在项目中添加一个 npm 包。这个包建议我对 webpack 配置进行一些更改。但是我的项目根目录下没有 webpack.config.js 文件。 webpack 配置文件在哪里。我是否需要像在某些框架中一样运行命令来发布它。

【参考方案1】：

如果您使用新的 vue-cli 3 (@vue/cli) 创建项目，项目根目录中将有一个名为 vue.config.js 的文件。这意味着您可以自定义您的 webpack 配置，只需更改 vue.config.js，它会自动包含在您的项目根目录中，如下所示：

module.exports = 
  configureWebpack: 
    // It will be merged into the final Webpack config
    plugins: [
      ... // Your plugins here...
    ]
  

这么简单！新的 vue-cli 方法寿命长！

【讨论】：

如果您在根目录中没有看到 vue.config.js，那是因为它是一个可选文件。如果你没有它，你可以继续创建它。

【参考方案2】：

webpack-simple 模板在项目文件夹的根目录中直接包含 webpack-config.js 文件。

看起来您正在使用webpack 模板。要更改 webpack 配置，请转到 build 文件夹。

在那里你会找到 3 个与 webpack 配置相关的文件；

webpack.base.conf.js webpack.dev.conf.js webpack.prod.conf.js

您可以在webpack.base.conf.js 文件或webpack.dev.conf.js（如果更改是针对开发时间配置）或webpack.prod.conf.js（如果用于生产构建配置）中进行您的包所需的更改

【讨论】：

这不是每次我们运行 npm build 时都要重写吗？

@Anoop.P.A 不，它们不会被重写...它们是静态配置文件

@Vasmi，谢谢！但我在项目中没有文件。似乎 vue-cli-3 将其保留在其他地方

vue cli 3 使用动态方法在运行时创建 webpack 配置文件。所以如果你想在 vue cli 3 创建的项目中调整 webpack 配置，你应该使用 vue.config.js 文件

vue cli 4 (@vue/cli@4.3.1) 据我所知，似乎没有 webpack 文件。