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

Question

我正在使用 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

Answer 1

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

无论如何，如果你还想这样做，那么你可以使用 filename 属性.

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

Answer 2

这可以通过以下 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`,
    }
  },
}

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

How to put a static name for files generated in the bundle?

bundle

webpack

vue.js

vue-cli