WebPack ---> [4.x] можно понять WebPack инициализации проекта

Описание:

• Эта статья в основном сделать следующие вещи:

1. Создание базовой webpack4.x проекта
2. [Ошибка]: The 'mode' option has not been set, webpack will fallback to 'production' for this value
3. [Ошибка]: ERROR in Entry module not found: Error: Can not resolve './src' in 'D:\L-react\HeiMa\01.webpack-base'
4. [Плагин]:webpack-dev-server
5. [Плагин]: html-webpack-plugin

• Исходный код проекта

---

Создание базового проекта webpack4.x

• 1. Быстрая инициализация проекта: npm init -y
• 2. Создание проекта в корневой директории srcкаталога исходного кода и distкаталог продукции
• 3. Создайте каталог Srcindex.html
• 4. cnpm установка WebPack, пробегcnpm i webpack -D
• 5. Используйте cnpm установленного WebPack-консоль, работаетcnpm i webpack-cli -D

---

webpackОбщая ошибка

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

• Причиной этого является отсутствиеmode
• 4.x добавляется mode. Свойство Production, сжатие файлов по умолчанию.

---

ERROR in Entry module not found: Error: Can not resolve './src' in 'D:\L-react\HeiMa\01.webpack-base'

• файл запись не была найдена, в WebPack 4.x, ни запись файла конфигурации, правила конфигурации по умолчанию принята Конвенция о больше, чем впускные пути упакованы в исходные тексты -.> index.js.

• По умолчанию договорились
• Файл начального пакета ./src/index.js
• Выходной файл упакован ./dist/main.js

---

Новый webpack.config.js

• Воздействие внешних членов: mopdule.exportsилиexport default

---

После настройки режим и доступ к файлам

• Js файлы вручную введены в начале страницы

<script src="../dist/main.js"></script>

---

WebPack-DEV-сервер

• cnpm i webpack-dev-server -D
• Каждый готовый пакет вручную кода вызывает WebPACK код слишком громоздкий, использование WebPack-DEV-сервер для автоматической конструкции упаковки
• Использование webpack-dev-serverзапуска.
• Project is running at http://localhost:8080: 8080 Проект порта в настоящее время работают (в это время небольшой сервер)
• webpack output is served from /: Хостинг каталога является корневым путем, т.е. в этом проекте :. 01.webpack базе
• Пакет генерируется WebPack-DEV-сервер main.js Для повышения производительности, она помещается в памяти.

[Поступать]

1. При сохранении автоматически генерировать пакет main.js в памяти (обратите внимание, а не на диске)
2. --openАвтоматически открыть браузер
3. --port 3000Порт
4. --hot: Горячее обновление
5. --progress: Упаковка записи
6. --compress: Сжатие
7. --host 127.0.0.1Укажите IP узла сети

---

HTML-WebPack-плагин

• cnpm i html-webpack-plugin -D
• HTML-WebPack-плагин домашней страницы не настроен на диске выше скорости чтения памяти диска лучше
• использование

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const htmlPlugin = new HtmlWebpackPlugin({
  template: path.join(__dirname, './src/index.html'),   // 源文件
  filename: 'index.html'  // 生成在内存中首页的名称
})

module.exports = {
  mode： 'development',
  plugins: [
    htmlPlugin
  ]
}

[Поступать]:

1. В соответствии с данным шаблоном для создания страницы памяти в данном пути
2. Автоматически добавлять<script type="text/javacript" src="main.js"></script>

---

Краткое описание:

1. Основная идея двух плагинов выше, являются: для уменьшения дисковых операций, связанных, использование быстрой памяти
2. React DOM виртуальной памяти также использовать объекты для описания реального DOM