веб-пакет --optimize-минимизировать против -p

Question

Я выполняю рендеринг на стороне сервера внутри моего приложения реакции. Внутри приложения у меня есть несколько картинок, поэтому у меня есть загрузчик для них внутри webpack-config

      {
        test: /\.(gif|png|jpg)$/,
        loader: 'file-loader?name=assets/img/[name].[hash].[ext]',
      },

Если я запускаю свой код таким образом

cross-env NODE_ENV=production webpack --optimize-minimize --config webpack.config.prod.js,

Я получаю ошибку

Warning: Prop `src` did not match. Server: "assets/img/profilna.1b1788096b2a10afe508dff672e50072.jpg" Client: "/assets/img/profilna.1b1788096b2a10afe508dff672e50072.jpg"

но если я запустлю это так

cross-env NODE_ENV=production webpack --p --config webpack.config.prod.js,

все хорошо и работает отлично, как я хочу.

Почему это?

Пока я читаю -p эквивалентен

webpack --optimize-minimize --define process.env.NODE_ENV="'production'"

Поскольку я уже настраиваю производственную среду, мне не нужно --define

Answer 1

cross-env NODE_ENV=production

при этом вы устанавливаете Node process.env.NODE_ENV, но не «передаете» и не используете - при связывании - внутри приложения. По сути, вам нужно создать глобальные переменные для приложения и установить NODE_ENV на то, что вам нужно для веб-пакета. И это то, что ...

--define process.env.NODE_ENV="'production'"

... делает. Он будет использовать Webpack DefinePlugin для установки глобального process.env.NODE_ENV, который будет использоваться при объединении приложения.

Я знаю, что это звучит немного неясно, я изо всех сил пытался понять это сам, но, надеюсь, документация прояснит это.

Технически, NODE_ENV - это системная переменная среды, которая Node.js выставляет в запущенные скрипты. Это используется соглашением, чтобы определить Поведение dev-vs-prod серверными инструментами, сценариями сборки и на стороне клиента библиотеки. Вопреки ожиданиям, process.env.NODE_ENV не установлен "производство" в сценарии сборки

См. "Определение среды" для примера.