通过块映射字符串重命名webpack / gats

Question

在盖茨比（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文件，但没有哈希到模板路径。

Answer 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" ]
...

没有一个本地单元测试失败，我的单击直到出现断点测试也没有产生任何错误。我可能会在今天晚些时候提交PR，以查看维护者是否对为什么这不是一个好主意有一些见解。

编辑：我改为打开一个问题：github，您可以订阅此问题以查看其解决方案。