Всех с Новым Годом (уже поздно)! Как вы сейчас? Я использую webpack, который является системой 1, но я видел несколько статей и документов для webpack2. Такие как …



webpack
Посредством взносов, пожертвований и спонсорства вы способствуете процветанию webpack. Ваши пожертвования напрямую поддерживают офис…webpack.js.org





Начало работы с Webpack 2
Бета-версия Webpack 2 выйдет из стадии бета-тестирования после завершения документации. Но это не значит, что вы не можете начать использовать…blog.madewithenvy.com





Конфигурация Webpack 2 Tree Shaking
Tree Shaking, современный алгоритм устранения мертвого кода для ECMAScript 2015+, является одной из самых ожидаемых функций на…medium.com



Я думаю, что веб-пакет - относительно новая библиотека. Когда я узнал о существовании webpack2, то очень удивился, потом попытался сделать пример приложения на GitHub.

Осторожность

webpack2 — это бета-версия. Убедитесь, что ваша версия webpack2. В это время я использовал ниже…

Хорошо, поехали!

пример webpack2 для веб-дизайна

Цель этого примера — создание статического веб-сайта с помощью webpack2. Кроме того, код этого примера находится на GitHub. если вы хотите увидеть код этого примера, убедитесь, что мой репозиторий.



takahiro-saeki/webpack2-web-design
webpack2-web-design — этот репозиторий является примером webpack2 для веб-дизайнера.github.com



И это пример страницы.



пример webpack2
Lorem ipsum dolor sit amet, postulant petentium no eam, cu detracto scriptorem.takahiro-saeki.github.io



Конфигурация

Я хотел бы описать несколько моментов, на которые следует обратить внимание. Прежде всего, приведенный выше модуль одинаков для webpack1 и webpack2, но производительность ниже совершенно разная. В webpack2 мы должны использовать ключ «правила» в объекте модуля. Это точка перелома. после добавления «правил» в ваш файл конфигурации вы можете добавить свою конфигурацию загрузчика. В этом случае я добавил 3 типа загрузчика, такие как babel-loader (style-loader, css-loader, postcss-loader), ejs-compiled-loader. Если вы добавляете несколько загрузчиков в объект правил, вы должны использовать объект «использовать». но если вы добавите только один загрузчик, вам не нужно использовать объект «использовать».

ключевым моментом является postcss-loader. пожалуйста, посмотрите на объект «ident», это самое важное, если вы хотите использовать параметры в postcss-loader. вы должны использовать объект «ident», иначе вы столкнетесь с ошибкой в ​​своей консоли.

‘new HtmlWebpackPlugin()’ визуализирует html-файл и может прецессировать файл EJS. Конечно, вы можете включить свой EJS-файл при загрузке EJS-файла в ‘new HtmlWebpackPlugin()’, позвольте мне показать вам пример…

«htmlWebpackPlugin.options.title» отображает вашу конфигурацию заголовка в «новом HtmlWebpackPlugin()». также вы можете включить шаблоны EJS, как показано ниже.

Ну наконец то

Образец изображения здесь.

Вывод

Как вам эта статья? Я ожидал webpack2, когда узнал об этом. Теперь, это зависит от версии, webpack2 не стабилен, но я могу сказать, что это действительно хорошая библиотека, и я не могу дождаться официального объявления о выпуске. Я продолжаю проверять его.

Вот и все! хорошего дня!