在构建 Gatsby 站点时如何丑化代码？

Question

我正在使用 Gatsby 和 netlify 进行部署，但是我可以在“源”选项卡中看到完整的原始代码。我希望我可以丑化它并使其更加模糊。有没有办法丑化这个 webpack 文件夹？谢谢！

IMAGE: Code showing in webpack folder after build

PS: 即使是 Gatsby 官方网站也出现了原始代码，不确定这是否是他们的设计选择，以使其更易于访问。

reactjs.org 相同：

Airbnb.io 相同，TODO 注释：

您在 Gatsby Showcase 中看到的大多数网站都在 webpack/./src 中公开了它们的代码。

Answer 1

您可以添加自定义 webpack 配置以在生产中禁用源映射。

1 - 删除 /public 文件夹，以确保删除之前创建的源映射

2- 将以下内容添加到您的 gatsby-node.js 文件中：

exports.onCreateWebpackConfig = ({ actions, stage }) => {
  if (stage === 'build-javascript') {
    actions.setWebpackConfig({
      devtool: false
    })
  }
};

或者，如果你更愿意使用 gatsby 插件，你可以使用这个： https://www.gatsbyjs.org/packages/gatsby-plugin-no-sourcemaps/ 基本上做完全相同的事情。

（看看它的作用https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-no-sourcemaps/gatsby-node.js）

确保先删除 /public 文件夹，然后运行 gatsby build。

要了解更多信息：

在构建 Gatsby 站点时如何丑化代码？

How do I uglify code when building Gatsby sites?

reactjs

webpack

gatsby

uglifyjs

reactjs.org 相同：

Airbnb.io 相同，TODO 注释：