重命名 webpack/gatsby 块映射字符串答案

【问题标题】：Rename webpack/gatsby chunkmapping strings重命名 webpack/gatsby 块映射字符串
【发布时间】：2020-02-11 20:13:05
【问题描述】：

在 Gatsby 中构建我们的生产应用程序时，我看到如下内容：

window.___chunkMapping={
  "app":[],
  "component---src-templates-page-tsx":[],
  "component---src-templates-pages-newsletter-tsx":[]
}

是否可以散列这些路径而不是打印出来？我们不想暴露太多背后发生的事情。

我尝试在 webpack 中设置这些配置：

output: {
  filename: `[chunkhash:2][contenthash:5].js`,
  chunkFilename: `[chunkhash:2][contenthash:5].js`,
},

它成功地散列了.js 文件，但不是模板路径。

【问题讨论】：

标签： javascript node.js webpack gatsby

【解决方案1】：

当我第一次看到这个问题时，我赞成，我认为它绝对应该在生产构建中完成。

不幸的是，componentChunkName（有问题的模板路径）是由 Gatsby 在createPage 中生成的，而不是由 webpack 处理的。

生成componentChunkName的代码在这里：github

我尝试修改代码如下：

    const { kebabCase } = require(`lodash`)
    const path = require(`path`)
+   const uuidv5 = require(`uuid/v5`)
    const { store } = require(`../redux`)

    const generateComponentChunkName = componentPath => {
      const program = store.getState().program
      let directory = `/`
      if (program && program.directory) {
        directory = program.directory
      }
      const name = path.relative(directory, componentPath)

-     return `component---${kebabCase(name)}`
+     return process.env.NODE_ENV === `production`
+       ? `component---${uuidv5(name, uuidv5.URL)}`
+       : `component---${kebabCase(name)}`
    }

    exports.generateComponentChunkName = generateComponentChunkName

这成功地隐藏了生产构建中的所有组件名称：

app: Array [ "/app-e593b3d93932ed3a0363.js" ]
"component---11d478fe-6a55-579c-becf-625ab1e57cf4": Array [ "/component---11d478fe-6a55-579c-becf-625ab1e57cf4-76c90ae50035c52657a0.js" ]
"component---15c76861-b723-5e0a-823c-b6832aeeb0a0": Array [ "/component---15c76861-b723-5e0a-823c-b6832aeeb0a0-18eb457ba6c147e1b31b.js" ]
...

没有一个本地单元测试失败，我的 click-around-until-something-breaks 测试也没有产生任何错误。我可能会在今天晚些时候提交 PR，看看维护人员是否对为什么这不是一个好主意有一些见解。

编辑：我打开了一个问题：github，您可以订阅该问题以查看它是如何解决的。

【讨论】：