如何为捆绑包中生成的文件设置静态名称？答案

【问题标题】：How to put a static name for files generated in the bundle?如何为捆绑包中生成的文件设置静态名称？
【发布时间】：2020-06-26 19:34:37
【问题描述】：

我正在使用 Vue CLI 开发 MPA 应用程序，并且在我制作捆绑包的那一刻，Webpack 会自动生成文件。输出文件列表是这样的：

chunk-vendors.7f809fbd.js
chunk-common.aae8cb13.js
home.f85a21ab.js
chunk-common.9113b70b.css
etc...

是否可以手动定义这些生成文件的名称？我想要这样的文件名：

chunk-vendors.my-standard.js
chunk-common.my-standard.js
home.my-standard.js
chunk-common.my-standard.css

【问题讨论】：

标签： vue.js webpack bundle vue-cli

【解决方案1】：

这可以通过以下 Vue CLI 配置（来自 vuejs/vue-cli#1967）来完成：

// vue.config.js
const chunkPrefix = '[name].my-standard'

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => Object.assign({}, options, { name: `${chunkPrefix}.[ext]` }));
  },
  css: {
    extract: {
      filename: `${chunkPrefix}.css`,
      chunkFilename: `${chunkPrefix}.css`,
    },
  },
  configureWebpack: {
    output: {
      filename: `${chunkPrefix}.js`,
      chunkFilename: `${chunkPrefix}.js`,
    }
  },
}

【讨论】：

【解决方案2】：

不这样做的原因有很多，这就是它不是默认行为的原因。

无论如何，如果您仍然想这样做，那么您可以使用filename 属性。

您可以按照文档中的说明对其进行微调。

【讨论】：

谢谢老哥的回答！你能告诉我是什么原因吗？或者给我一篇解释的文章？我对打包程序没有太多经验，我想更好地理解:)