Question

我想将生成的文件名从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')删除密钥，但这会引发错误。

这是我被卡住的原因。是否有人建议删除或重命名输入键？

Answer 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

更新moduleNameMapper中的jest.config.js

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

可以解决问题。现在，生成的文件称为plugin.<hash>.js。

在vue-cli 3中使用webpack-chain更改生成文件的名称

1 个答案: