Webpack 4 + Material-UI: как минификация JSS работает в производственном режиме?

Я работаю над проектом с использованием Webpack 4.10.2 и Material-UI v1.1.0. MUI docs говорит о генераторе имени класса, а я Я в порядке с результатом сокращения имен классов, но есть кое-что, чего я не понимаю в процессе сборки, мне, вероятно, не хватает модуля или подключаемого модуля Webpack (например, я просто использую babel-loader, а не подключаемый модуль). Я просто пробовал множество комбинаций с UglifyJsPlugin (через optimizer.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>

Что мне не хватает, чтобы это работало? Спасибо


webpack reactjs material-ui jss
person Bro    schedule 02.06.2018    source источник
comment
На основе этого github.com/cssinjs/jss/blob/master / src / utils / может потребоваться определить переменную NODE_ENV. Конечно, -d и -p не устанавливают NODE_ENV. На мобильном так сложно подтвердить. webpack.js.org/plugins/environment-plugin   -  person jens    schedule 02.06.2018
comment
Спасибо, Дженс! это решило проблему :)   -  person Bro    schedule 03.06.2018

Ответы (1)


arrow_upward
1
arrow_downward

У меня такая же проблема. В моем случае я исключал node_modules из серверного пакета, поэтому Webpack не заменял process.env.NODE_ENV в файлах модуля, в то время как в моем клиентском пакете, куда были включены node_modules, это было сделано. Таким образом, чтобы также минимизировать CSS на сервере, вам нужно будет либо включить node_modules в пакет, либо установить переменную среды NODE_ENV в сеансе командной строки, из которого вы запускаете пакет сервера.

Лучший (не зависящий от платформы) способ, который я мог найти, - это запустить "npm start --production" или добавить его как скрипт в package.json. Это автоматически установит для переменной среды NODE_ENV сеанса узла, запускаемого сценарием, значение production.

person András Geiszl    schedule 02.10.2018