Как настроить Webpack +2.0 с нуля в 2017 году

Глава 5, о Webpack - что вы принесете на этот раз? Проще говоря - мы прочитали целую короткую книгу, но эй - это круто, мы учимся.

Мы раскрыли многое из того, что есть в волшебном веб-паке. У нас еще есть пара «основных» функций, которые я хотел бы объяснить.

"Глава 4"

"Глава 3"

"Глава 2"

"Глава 1"

Изображений!

Ага. Я слышал, что сейчас популярны картинки и гифки с котиками. Но как мы можем использовать изображения с веб-пакетом? Оказывается, это совсем не сложно.

Что мне нравится делать (и вам, наверное, тоже следует), так это организовывать наш проект. Давайте создадим специальный каталог с именем assets, в котором будут храниться такие вещи, как stylesheets icons images fonts

Теперь переместим наш styles.scss внутрь assets/stylesheets

Нам требуется наш style.scss, но мы просто переместили его на другой путь. Имеет смысл обновить путь, в котором нам также требуется style.scss!

Давайте сделаем нашу демонстрацию более красивой. Я собираюсь использоватьSCSS переменных, довольно простые вещи.

Откройте свой любимый браузер (сейчас все неплохо), и вы это увидите!

Думаю, мы готовы к изображениям.

Конечно, нам понадобятся погрузчики, как вы думаете?

Нам нужен image-webpack-loader для изображений и -

Разрешите представить новую концепцию! React, React, Reaaaact! Обожаю Reactjs, он классный. Я тоже люблю Vuejs! - они оба великолепны. Я уверен, что Angular и Polymer тоже хороши, просто у меня лично есть опыт работы с React и Vue.

Эти фреймворки / библиотеки позволяют нам более плавно писать одностраничные приложения и снова делать их интересными.

Теперь я знаю, о чем вы думаете ... наверное. О боже, неужели это превратится в одну из тех хипстерских "I prefer to write my code without a monitor" ситуаций? Уверяю вас, что нет, я пытаюсь представить новые концепции веб-пакетов.

Пожалуйста, будьте открыты и позвольте мне расширить ваш блестящий ум.

React - БИБЛИОТЕКА JAVASCRIPT ДЛЯ ПОСТРОЕНИЯ ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОВ

Это все еще руководство по веб-пакетам - не волнуйтесь, если вы не знакомы с какими-либо из этих фреймворков - я собираюсь сосредоточиться на веб-пакетах 95% времени!

Хорошо, без лишних слов - давайте установим загрузчики и зависимости!

npm i image-webpack-loader file-loader --save-dev

Включите загрузчики в файл webpack.config.js и вперед!

Если вы заблудились или столкнулись с ошибками: вот исходный код, если вы хотите сравнить

Наш малыш растет. Вскоре нам придется разделить его на множество разных файлов, но пока нет. Давайте дадим ему больше расцвести! Мы еще не достигли критических 200 строк. Обычно вы хотите, чтобы файлы не превышали 200 строк (в большинстве случаев).

Также не забывайте перезапускать веб-пакет каждый раз, когда вы вносите в него изменения!

Затем нам нужно внести изменения в наш .babelrc loader, поскольку мы хотим использовать реакцию!

Но сначала - установите зависимости

npm i react react-dom babel-preset-react --save-dev

и все, что нам нужно сделать, это добавить "react" в наш .babelrc файл.

Хорошо, у нас есть все необходимое. Теперь нам просто нужно связать их вместе.

Нам нужно привязать наш посадочный элемент к реальной DOM, поскольку React использует виртуальную DOM. К сожалению, это выходит за рамки нашей компетенции (вы всегда можете сообщить мне, если вас интересуют серии React или Vue).

Затем нам нужно импортировать react и reactDOM и подключить их к нашему корневому элементу. Давайте также создадим новый каталог внутри src с именем app, а внутри app создадим файл с именем App.jsx

src/app - вот где лежит наша основная логика пользовательского интерфейса. Мы почти закончили, и я могу начать демонстрировать свои мысли - файлы image-webpack-loader и .jsx.

Давайте откроем наш App.jsx и напишем это вместе со мной. Не волнуйтесь, я не углублюсь в React.

Откройте наш браузер, и мы должны увидеть привет от нашего компонента реакции, подтверждающий его работу.

Ух ты! Оно работает! Сейчас мы используем React! Как это круто? То, что раньше было магией, теперь кристально ясно. Мы незаметно используем загрузчики, чтобы превратить наш .jsx в обычный старый js

На данный момент мы знаем, что наш jsx загрузчик работает. А как насчет изображений, наконец?

Что ж ... давай узнаем ... Я представлю новую концепцию ... снова ... мы будем импортировать файлы и использовать их непосредственно в наших <image src="" /> тегах. Вот так

Я также посыпал их немного SCSS, чтобы они выглядели красиво для демонстрации.

Но вот что мы получим.

Прохладный! Он работает как задумано.

Но меня беспокоит одно. Вы видите это? Это чертовски длинные файлы импорта.

import dogs from '../assets/images/dogs.gif';

Как мы могли бы это исправить? Что ж ... есть способ ... на самом деле это потрясающе круто.

Псевдонимы

У нас может быть кратчайший путь к нашим путям. Webpack поможет вам. Давайте добавим новый объект с именем resolve под resolve. Мы определим наши ярлыки, также известные как alias

Пока мы там, давайте укажем или расширения файлов, чтобы не вводить их вручную. Webpack достаточно умен, чтобы заполнить их, если вы дадите ему возможность выбирать.

Перезапустите webpack, и давайте очистим пути импорта.

Ух ты! Это потрясающе. Больше не ../../../../../../images/cat.jpg, но вместо этого мы можем использовать images/cat

Как охренительно круто?

Если вы запустите npm run start, изображения будут автоматически сжиматься на лету. Webpack достаточно умен, чтобы определять, сжаты ли изображения и

Прохладный! Думаю, в этот раз мы сделали очень много. Я рада, что ты дошел так далеко. На самом деле есть еще кое-что ... но я думаю, что для начала подойдет.

Вы узнали о изображениях, немного о React и о том, как работать с длинными путями. У вас все отлично. Продолжайте учиться и начинайте строить!

Не стесняйтесь купить мне кофе -

Vaulty
Vaulty.io - Принимайте ВСЕ криптовалюты по одной ссылке www.vaulty.io

Куда мне идти дальше? Я рекомендую узнать больше о javascript - вот несколько фантастических курсов по javascript, которые вы можете пройти.

Обновление от 11 мая 2017 г .:

Я добавил для стилей поддержку Hot-module-reloading. Мы добавляем один дополнительный загрузчик и реорганизуем наш загрузчик стилей.

Установите пакет под названием css-hot-loader

npm i css-hot-loader -D

-D означает зависимость от разработки (сокращение от --save-dev)

Давайте теперь реорганизуем наш загрузчик стилей. Мы добавили css-hot-loader и объединили его с загрузчиками стилей.

{
  test: /\.scss$/, // files ending with .scss
  use: ['css-hot-loader'].concat(ExtractTextWebpackPlugin.extract({
  
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader'],
        
  })),
},