Vue-cli webpack 项目中 webpack 配置文件的位置是什么？

Question

我用 cli 创建了一个 vue.js 项目，并使用了 webpack 模板。我已经在上面工作了几天，一切运转良好。

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

- Ragas

Answer 1

如果您使用新的vue-cli 3（@vue/cli）创建您的项目，将在您的项目根目录中拥有一个名为vue.config.js的文件。这意味着您可以通过更改vue.config.js来自定义您的Webpack自定义设置，并且该文件已自动包含在您的项目根目录中，操作如下：

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

好简单！新的vue-cli方法万岁！

- Lindoélio Lázaro

---

如果您在根目录中找不到vue.config.js，那是因为它是一个可选文件。如果没有这个文件，您可以直接创建它。 - Matt Parkins

Answer 2

webpack-simple 模板的根目录下直接包含了 webpack-config.js 文件。

看起来您正在使用 webpack 模板。如需更改 webpack 配置，请进入 build 文件夹。

在那里，您将找到与 webpack 配置相关的 3 个文件；

1. webpack.base.conf.js
2. webpack.dev.conf.js
3. webpack.prod.conf.js

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

- Vamsi Krishna

---

每次运行npm build，这都会被重写吗？ - Anoop Thiruonam

@Anoop.P.A 不会被重写...它们是静态配置文件。 - Vamsi Krishna

@Vasmi，谢谢！但是我在项目中没有这个文件。看起来vue-cli-3把它放在别的地方了。 - Anoop Thiruonam

Vue CLI 3 使用动态方式在运行时创建 webpack 配置文件。因此，如果您想调整由 Vue CLI 3 创建的项目中的 webpack 配置，则应使用 vue.config.js 文件。 - Vamsi Krishna

Vue CLI 4 (@vue/cli@4.3.1) 看起来没有 webpack 文件，据我所知。 - PatS