Проблемы с началом работы с webpack 4

Я следую учебнику точно так, как указано здесь. Но я поражен тем, что документы выглядят устаревшими. например

npx webpack src/index.js dist/bundle.js не работает:

CLI переместился в отдельный пакет: webpack-cli. Пожалуйста, установите "webpack-cli" в дополнение к самому webpack для использования CLI. → При использовании npm: npm install webpack-cli -D → При использовании пряжи: пряжа добавить webpack-cli -D

Если я установлю webpack-cli и повторю попытку, я вижу эту ошибку:

Hash: af9bc06fd641eb0ffd1e Версия: webpack 4.0.0 Время: 3865ms Построено по: 2018-2-26 05:10:45 1 объект Entrypoint main = main.js 1 (webpack)/buildin/module.js 519 bytes {0} [встроенный ] 2 (webpack)/buildin/global.js 509 bytes {0} [built] [3]./src/index.js 212 байтов {0} [built] [4] multi./src/index.js dist/bundle.js 40 байт {0} [встроенный] + 1 скрытый модуль

ПРЕДУПРЕЖДЕНИЕ в конфигурации Опция "режим" не установлена. Установите параметр "mode" в "development" или "production", чтобы включить настройки по умолчанию для этой среды.

ERROR в multi./src/index.js dist/bundle.js Модуль не найден: ошибка: не удается разрешить 'dist/bundle.js' в '/var/app/webpack_demo' @multi./src/index.js DIST/bundle.js

Надеюсь, я не делаю что-то безумное, учитывая популярность webpack, документация должна отражать фактическое поведение. Дайте мне знать, если я что-то делаю неправильно.

редактировать

Подробное описание обновления до webpack 4, что может быть полезно

Ответ 1

Вы можете передать параметр mode в конфигурацию webpack или команду cli.

Config: mode: 'development' или mode: 'production'

CLI: разработка webpack --mode development или webpack --mode production

Ответ 2

Команда Webpack работает над обновлением документов пакета как можно скорее. Новые руководства и документы доступны на официальном сайте webpack.js.org.

Тем временем вы также можете читать связанные сообщения на носителе:

Проверьте GitHub этот проект Webpack-Demo, предназначенный для изучения Webpack 4. Предыдущие и другие ссылки на полезные ресурсы, используемые в конфигурациях webpack, включены в проект Readme. Он имеет две сборки с нулевой конфигурацией (с использованием нового режима mode webpack, который включает в себя набор значений по умолчанию), а еще два - с использованием настраиваемых конфигураций.


Начиная с , CLI перемещается в webpack-cli поэтому вам необходимо также установить этот пакет в devDependencies. Кроме того, ожидает, что новая конфигурация mode будет установлена либо в прогоне CLI, либо в файле конфигурации.

Использование CLI в ваших сценариях npm:

"scripts": {
    "dev": "webpack --mode development",
    "prod": "webpack --mode production"
}

Свойство "Установить mode в вашем конфигурационном файле webpack:

{
    mode: 'production' // | 'development' | 'none'
}

Если значение режима не указано, webpack использует production значение (опция по умолчанию). Но предупреждает вас на выходе:

ПРЕДУПРЕЖДЕНИЕ в конфигурации

Опция "режим" не установлена. Установите параметр "mode" в "development" или "production", чтобы включить настройки по умолчанию для этой среды.

mode Webpack уменьшает необходимую конфигурацию для полезной сборки, используя набор значений по умолчанию (значения по умолчанию для свойств конфигурации в зависимости от значения mode):

  • production позволяет оптимизировать все виды оптимизации для оптимизации пакетов
  • development позволяет получать полезные сообщения об ошибках и оптимизируется для скорости
  • none - скрытый режим, который отключает все

Подробнее о примечаниях к выпуску и журнале изменений

Ответ 3

Он будет обновлен очень скоро, см. Эту ссылку для информации

Мы очень близки к тому, чтобы завершить руководство по миграции и дополнения к документам V4! Чтобы отслеживать прогресс или раздавать руку помощи, зайдите в наш репозиторий документации, проверьте следующую ветку и помогите!

Ответ 4

Получил ту же проблему и после небольшого исследования нашел, что проблема исправлена, как вы можете видеть в этой нити Github

Один из вариантов:

Внутри package.json устанавливаются scripts либо в режиме development либо в режиме production

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

И теперь, когда вы запустите npm run dev он даст вам bundle.js но не будет уменьшен.

Но когда вы запустите npm run build, вы получите мини-пакет

Ответ 5

Документы Webpack 4 еще не готовы. Недавно я перешел с webpack 3 на 4, и мне потребовалось некоторое время, чтобы разобраться во всех проблемах.

Вот мой пример репо, который вы можете использовать в качестве ссылки для перехода с webpack 3 на 4.

https://github.com/flexdinesh/react-redux-boilerplate

Там одна фиксация предназначена для миграции. Взгляните на это для получения дополнительной информации.