2

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

问题:

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

发展模式

在开发模式下构建我的项目时一切都很好,使用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>

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

4

1 回答 1

1

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

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

于 2018-10-02T15:29:09.627 回答