使用 webpack-chain 和 vue-cli 3 更改生成文件的名称答案

【问题标题】：Using webpack-chain with vue-cli 3 to change the name of the generated file使用 webpack-chain 和 vue-cli 3 更改生成文件的名称
【发布时间】：2018-11-18 20:07:55
【问题描述】：

我想将生成文件的名称从app.<hash>.js 更改为plugin.<hash>.js。 webpack 入口点键的名称用于确定名称。 vue-cli 3 默认使用 app 作为 webpack 入口点键。所以我需要改变它。使用 vue inspect > webpack.config.resolved.js 我可以看到 vue-cli 解析的整个 webpack 文件。

解析的 webpack 文件的最后一部分是。

  }
  ...
  entry: {
    app: [
      './src/main.js'
    ]
  }

我可以通过将以下内容添加到vue.config.js 来否决该值。

module.exports = {
  chainWebpack: config => {
    // Remove the old entry and add the new one
    config
      .entry('app')
      .clear()
      .add('./plugin/index.js')
  },
  ...
}

这是解析后的 webpack 文件中的结果。

{
  ...
  entry: {
    app: [
      './plugin/index.js'
    ]
  }
}

我还想将app 键重命名为plugin。我以为我可以使用config.entry.delete('app') 删除密钥，但这会引发错误。

这是我被卡住了。有人建议删除或重命名条目键吗？

【问题讨论】：

标签： webpack vue-cli-3

【解决方案1】：

好的，我想通了。您必须使用低级别的config.entryPoints 而不是config.entry。

module.exports = {
  chainWebpack: config => {
    // Remove the old 'app' entry
    config
      .entryPoints
      .delete('app')
    // Add the new 'plugin' entry
    config
      .entry('plugin')
      .add('./plugin/index.js')
    config
      .resolve
      .alias
      .set('@', path.resolve(__dirname, 'plugin'))
  },
  ...
}

如果您想进行此更改，您必须执行以下步骤：

将src 目录重命名为plugin（可选，但我喜欢）
使用上面的代码添加vue.config.js 文件，包括将别名从src 调整为plugin

更新jest.config.js中的moduleNameMapper

...
moduleNameMapper: {
  '^@/(.*)$': '<rootDir>/plugin/$1'
},
...

这样就可以了。现在生成的文件名为plugin.<hash>.js。

【讨论】：