如何配置Webpack让Vue项目构建生成自定义命名的静态文件？

当然可行！Vue项目里Webpack默认给打包后的文件加上随机哈希，是为了实现浏览器缓存优化——用户下次访问时，只有文件内容变化才会重新下载。但如果你有固定文件名的需求，完全可以通过配置调整实现。

下面分两种常见的Vue项目类型来给出具体操作：

一、Vue CLI 3+（包括Vue CLI 4/5，当前主流版本） #

这类项目默认没有暴露Webpack配置文件，我们可以通过根目录的vue.config.js来修改打包规则：

1. 如果项目根目录还没有vue.config.js，先创建这个文件
2. 添加如下配置：

module.exports = {
  // 全局关闭文件名哈希
  filenameHashing: false
}

执行npm run build后，你会发现原来带哈希的app.xxxxxx.js变成了简洁的app.js，CSS文件同理会变成app.css。

更精细的控制（仅修改主入口文件命名） #

如果你只想固定主入口app.js的名称，同时保留其他chunk文件的哈希，可以通过chainWebpack来精细调整Webpack的输出规则：

module.exports = {
  chainWebpack: config => {
    // 针对生产环境配置
    if (process.env.NODE_ENV === 'production') {
      // 设置主入口JS文件的命名为[name].js（[name]对应入口名称，默认是app）
      config.output.filename('js/[name].js')
      // 如果有异步分割的chunk，也可以按需设置命名规则
      // config.output.chunkFilename('js/[name].js')
    }
  }
}

二、旧版Vue CLI 2.x #

如果你的项目是基于Vue CLI 2创建的，直接修改项目根目录的webpack.prod.conf.js（生产环境配置文件）：
找到output节点，修改filename和chunkFilename：

module.exports = {
  // ...其他配置
  output: {
    filename: '[name].js',
    chunkFilename: '[name].js'
  }
}

注意事项 #

• 移除哈希后，要注意浏览器缓存问题：如果文件内容更新，但文件名没变，用户浏览器可能会加载旧的缓存文件。可以考虑在服务器端配置缓存控制策略（比如设置较短的缓存过期时间），或者手动给文件名加版本号（比如app.v2.js）来规避这个问题。
• 如果你的项目用到了代码分割（比如异步加载组件），统一设置[name].js可能会导致不同chunk的命名冲突，这种情况下可以给chunk加前缀或id，比如js/[name]-[id].js。

这样调整之后，每次执行npm run build，主JS文件就会稳定输出为app.js啦！

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