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

【问题标题】：Webpack 4 + Material-UI: How minification of JSS works in Production Mode?Webpack 4 + Material-UI：JSS 的缩小如何在生产模式下工作？
【发布时间】：2018-11-12 07:50:03
【问题描述】：

我正在开发一个使用 Webpack 4.10.2 和 Material-UI v1.1.0 的项目。 MUI docs 正在谈论类名生成器，我对缩短类名的结果感到满意，但是在构建过程中有一些我不明白的东西，我可能缺少 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>

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

【问题讨论】：

基于此github.com/cssinjs/jss/blob/master/src/utils/…，可能需要定义 NODE_ENV 变量。很确定 -d 和 -p 不会设置 NODE_ENV。在手机上很难确认。 webpack.js.org/plugins/environment-plugin
谢谢詹斯！解决了问题:)

标签： reactjs webpack material-ui jss

【解决方案1】：

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

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

【讨论】：