时间戳

首页 > 解决方案 > Webpack 4 + Material-UI：JSS 的缩小如何在生产模式下工作？

reactjs - Webpack 4 + Material-UI：JSS 的缩小如何在生产模式下工作？

问题描述

我正在使用Webpack 4.10.2和Material-UI v1.1.0开发一个项目。MUI 文档正在讨论类名生成器，我对缩短类名的结果感到满意，但是在构建过程中有一些我不明白的东西，我可能缺少 Webpack 模块或插件（例如，我只是使用 babel-loader 并且没有插件）。我刚刚尝试了许多与UglifyJsPlugin的组合（通过 optimization.minimizer）compress和mangle但没有任何效果。

问题：

文档样式标签中注入的类名被缩短，但正文中对应的类不被缩短：

发展模式

在开发模式下构建我的项目时一切都很好，使用webpack -d：

<style type="text/css" data-jss="" data-meta="LayoutNavBar">
    .LayoutNavBar-flex-4 {
      flex: 1;
    }
</style>

在正文中，相应的类

<h2 class="LayoutNavBar-flex-4">Title</h2>

生产方式

当我在生产模式下构建时，样式被破坏了，我有带有缩短类名的内联样式（这很好）：

<style type="text/css" data-jss="" data-meta="LayoutNavBar">
    .jss4 {
      flex: 1;
    }
</style>

但在正文中，CSS 类仍然使用它们的长名称：

<h2 class="LayoutNavBar-flex-4">Title</h2>

而不是：

<h2 class="jss4">Title</h2>

我缺少什么让它工作？谢谢

标签： reactjswebpackmaterial-uijss

解决方案

我有同样的问题。在我的情况下，我node_modules从服务器包中排除，因此 Webpack 不会process.env.NODE_ENV在模块文件中替换，而在我的客户端包中node_modules，它包含在哪里。因此，要在服务器上缩小 CSS，您需要包含node_modules在包中，或者NODE_ENV在运行服务器包的命令行会话中设置环境变量。

我能找到的最好的（与平台无关的）方法是运行“npm start --production”，或者将其作为脚本添加到package.json. 这将自动将NODE_ENV脚本运行的节点会话的环境变量设置为production.

推荐阅读