Question

我正在使用 Webpack 4.10.2 和 Material-UI v1.1.0 开展项目。 MUI docs正在讨论类名生成器，我对缩短类名的结果很满意，但是在构建过程中有一些我不理解的东西，我可能错过了一个Webpack模块或插件（我是例如，只使用babel-loader而没有Plugin）。我只是尝试了很多与 UglifyJsPlugin （通过optimization.minimizer）压缩和 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>

我错过了什么才能让它发挥作用？感谢

Answer 1

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

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

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

开发模式

生产模式

1 个答案: