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

Question

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

IMAGE: Code showing in webpack folder after build

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

reactjs.org 也一样：

Airbnb.io 也是如此，带有 TODO cmets：

您在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。

要了解更多信息：

• https://www.gatsbyjs.org/docs/add-custom-webpack-config/

• https://webpack.js.org/configuration/devtool/