How to configure webpack 4 with vuejs : a complete guide

Установка

Установите Vue CLI 3.

npm i -g @vue/cli

Набрав vue в терминале, вы получите результат, приведенный ниже.

vue

  Usage: vue  

  Options:

    -V, --version                         output the version number
    -h, --help                            output usage information

  Commands:

    create             create a new project powered by vue-cli-service
    add            install a plugin and invoke its generator in an already created project
    invoke         invoke the generator of a plugin in an already created project
    inspect            inspect the webpack config in a project with vue-cli-service
    serve                 serve a .js or .vue file in development mode with zero config
    build                 build a .js or .vue file in production mode with zero config
    ui                           start and open the vue-cli ui
    init    generate a project from a remote template (legacy API, requires @vue/cli-init)
    config                inspect and modify the config


  Run vue  --help for detailed usage of given command.

Using source maps

When webpack bundles your source code, it can become difficult to track down errors and warnings to their original location. For example, if you bundle three source files (, , and ) into one bundle () and one of the source files contains an error, the stack trace will simply point to . This isn’t always helpful as you probably want to know exactly which source file the error came from.

In order to make it easier to track down errors and warnings, JavaScript offers source maps, which map your compiled code back to your original source code. If an error originates from , the source map will tell you exactly that.

There are a lot of different options available when it comes to source maps. Be sure to check them out so you can configure them to your needs.

For this guide, let’s use the option, which is good for illustrative purposes (though not for production):

webpack.config.js

Now let’s make sure we have something to debug, so let’s create an error in our file:

src/print.js

Run an , it should compile to something like this:

Now open the resulting file in your browser. Click the button and look in your console where the error is displayed. The error should say something like this:

We can see that the error also contains a reference to the file () and line number (2) where the error occurred. This is great because now we know exactly where to look in order to fix the issue.

Vue-cli

Последнее обновление: 05.10.2018

Vue-cli представляет инструмент для быстрого создания проектов под Vue.js. Такие проекты уже имеют некоторую готовую начальную структуру,
установленную конфигурацию, в частности, конфигурацию для Webpack, а также ряд базовых файлов. Текущая верся cli 3.0.

Для использования vue-cli вначале его надо установить. Для в консоли или терминале нужно выполнить команду:

npm install -g @vue/cli

Если ранее был установлен vue-cli других версий, например, 2.х или 1.х, то их предварительно надо удалить с помощью команды

Проверить текущую версию vue cli можно с помощью команды

vue --version

После установки vue-cli создадим на жестком диске какую-нибудь папку, где будут находиться проекта Vue.js и с помощью команды cd перейдем к этой папке.

cd C:\vuejs

Затем выполним в консоли следующую команду:

vue create cliapp

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

После ввода команды консоль отобразит две опции для выбора:

Здесь предоставляется на выбор две опции:

  • : проект с настройками по умолчанию, который включает функциональность Babel и Eslint.

  • : это опция позволяет вручную выбрать компоненты, которые будут добавлены в проект.

С помощью клавиш вверх-вниз можно перемещаться между опциями. К примеру выберем опцию Manually select features.
После этого нам надо будет отметить те компоненты, которые мы хотим включить в проект:

Опять же с помощью клавиш вверх-вниз можно перещаться между компонентами. Если надо выбрать все или, наоборот, снять
выделение со всех, то можно использовать клавишу A.

К примеру, НЕ выберем ни одного компонента, чтобы создаваемый проект был предельно минималистичен, и нажмем на Enter.

Далее будет предложено указать, как будет храниться конфигурация:

Здесь доступны две опции:

  • : хранение конфигурации в отдельных файлах.

  • : хранение всей конфигурации в package.json.

Выберем опцию In package json.

Далее будет предложено сохранить конфигурацию. И затем будет создан проект, который уже будет содержать базовую функциональность.

Созданный проект буде иметь следующую структуру:

Стоит отметить, что по умолчанию создается скрытый епозиторий git для проекта. Если он нам не нужен, то при создании проекта надо использовать флаг -n (сокращение от —no-git):

vue create -n cliapp

Если мы обратимся к файлу package.json, то увидим, что он уже содержит определение команд для запуска и построения приложения:

{
  "name": "cliapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "@vue/cli-service": "^3.0.4",
    "vue-template-compiler": "^2.5.17"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie 

Так, в секции scripts определена команда «serve», которая, используя инфраструктуру CLI, запускает проект. Перейдем к этой папке и выполним
эту команду в консоли:

Консоль отобразит адрес, по которому можн обратиться к запущенному проекту. Например, в моем случае это http://localhost:8081/.

Также стоит отметить, что доступен графический функционал для создания объекта. Для этого надо выполнить к консоли команду

vue ui

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

НазадВперед

Валидация входных параметров

Компоненты могут указывать требования к своим входным параметрам, такие как определение типа, которые вы уже видели. Если эти требования не выполнены — Vue предупредит вас сообщением в JavaScript-консоли браузера. Это особенно полезно при разработке компонента, который предназначен для использования другими.

Чтобы указать валидации входного параметра, вы можете предоставить в объект с валидациями для проверки значения, вместо массива строк. Например:

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

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

Проверка типа

Значением может быть один из следующих нативных конструкторов:

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

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

Вы можете использовать:

чтобы проверить, что значение входного параметра было создано с помощью .

Передача обычных атрибутов

Обычные атрибуты — это атрибуты, передаваемые в компонент, но не имеющие определения соответствующего входного параметра в компоненте.

Хотя явно определённые свойства предпочтительны для передачи информации дочернему компоненту, авторы библиотек компонентов не всегда могут предвидеть все контексты, в которых будут использованы их компоненты. Вот почему компоненты могут принимать произвольные атрибуты, которые добавляются в корневой элемент компонента.

Например, представьте, что мы используем сторонний компонент с плагином Bootstrap, который требует указания атрибута на элементе . Мы можем добавить этот атрибут к нашему экземпляру компонента:

И атрибут будет автоматически добавлен в корневой элемент .

Замена/Объединение существующих атрибутов

Представьте, что это шаблон для :

Чтобы добавить тему для нашего плагина выбора даты, нам может понадобиться добавить определённый класс, например:

В этом случае определены два разных значения для :

  • , который задаётся компонентом в его шаблоне
  • , который передаётся компоненту его родителем

Для большинства атрибутов значение, предоставляемое компоненту, будет заменять значение, заданное компонентом. Например, передача будет заменять и, вероятно, ломать всё! К счастью, работа с атрибутами и немного умнее, поэтому оба значения будут объединены в итоговое: .

Отключение наследования атрибутов

Если вы не хотите, чтобы корневой элемент компонента наследовал атрибуты, вы можете установить в опциях компонента. Например:

Это может быть особенно полезно в сочетании со свойством экземпляра , которое содержит имена атрибутов и значения, переданные компоненту, например:

С помощью и вы можете вручную определять к какому элементу должны применяться атрибуты, что часто требуется для :

Обратите внимание, что опция не влияет на биндинги и. Этот шаблон позволяет вам использовать базовые компоненты больше как обычные HTML-элементы, не беспокоясь о том, какой элемент будет у него корневым:

Этот шаблон позволяет вам использовать базовые компоненты больше как обычные HTML-элементы, не беспокоясь о том, какой элемент будет у него корневым:

##company## — ##description##

Отредактируйте эту страницу на GitHub!

Соединяем фронт с бэком.

В vue из коробки не встроен пакет для работы с ajax запросами. Поэтому, нужно установить какой-нибудь (я предпочитаю axios):

Флаг -S я добавил, чтобы модуль зафиксировался в качестве зависимости проекта в package.json.

Теперь нам нужно очистить файл static/src/App.vue от лишнего кода:

добавить переменную для хранения списка языков:

и отредактировать шаблон:

Если перезагрузить страницу, то мы ничего не увидим. Это потому, что список языков пустой. Воспользуемся библиотекой axios, чтобы получить список языков:

Так как мы используем фронт-сервер, он автоматически обновит код по мере его изменения, и сразу запросит список языков с сервера. Получим такую картинку:

Создание проекта Vue

С помощью Vue CLI вы можете создать новое приложение, выполнив следующую команду:

vue create example-vue-project

example-vue-project – это название проекта. Вы можете изменить его.

Затем нужно выбрать вариант установки проекта. Вариант по умолчанию установит два плагина: Babel и ESLint. Также вы можете вручную выбрать расширения, необходимые для вашего проекта из набора плагинов:

  • Babel.
  • TypeScript.
  • Progressive Web App support.
  • Vue Router.
  • Vuex (библиотека для управления состоянием Vue);
  • Препроцессоры CSS (PostCSS, CSS modules, Sass, Less, Stylus).
  • Модуль юнит-тестов Mocha или Jest.
  • Модуль E2E-тестов Cypress или Nightwatch.

Теперь рассмотрим другие варианты обслуживания проекта, доступные в Vue CLI. Для этого перейдите в папку проекта:

cd example-vue-project

Затем выполните следующую команду:

npm run serve

Она запустит локальный сервер разработки по адресу http://localhost:8080. Если вы перейдёте по этому адресу в своём браузере, то увидите следующую страницу:

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

И когда вы закончите разработку своего проекта, то можете использовать следующую команду для создания сборки:

npm run build

Эта команда сохранит собранный код в папку dist проекта. Об этой процедуре вы можете прочитать здесь.

Что такое служба Vue CLI?

Служба Vue CLI – это зависимость (@vue/cli-service), которая предоставляет конфигурации по умолчанию. Служба может быть обновлена, настроена и расширена с помощью плагинов. Она предоставляет несколько скриптов для работы с Vue-проектами. Например, serve, build и inspect.

Мы уже видели сценарии serve и build в действии. Скрипт inspect позволяет проверить конфигурацию веб-пакета в проекте с помощью vue-cli-service. Попробуйте выполнить его:

vue inspect

Анатомия проекта

Проект Vue, созданный с помощью CLI, имеет предопределенную структуру. Если вы решите установить дополнительные плагины (например, маршрутизатор Vue), CLI также создаст файлы, необходимые для использования и настройки этих библиотек.

Файлы и папки в проекте Vue:

  • public – папка содержит общедоступные файлы, такие как html и favicon.ico. Размещенные здесь статические ресурсы будут скопированы и не упакованы в веб-пакет.
  • src – папка содержит исходные файлы проекта.
  • src/assets – папка содержит ресурсы проекта, такие как png.
  • src/components – папка содержит компоненты Vue.
  • src/App.vue – основной компонент Vue-проекта.
  • src/main.js – основной файл проекта, который загружает Vue-приложение.
  • config.js – файл конфигурации для Babel.
  • json – файл содержит список зависимостей проекта, а также параметры конфигурации для ESLint, PostCSS и поддерживаемых браузеров.
  • node_modules– папка содержит установленные пакеты npm.

Следующий скриншот отображает структуру проекта:

Кэширование и хеширование

О
´Ã½Ã° ø÷ ýðøñþûõõ ÃÂðÃÂÿÃÂþÃÂÃÂÃÂðýõýýÃÂàÿÃÂþñûõü ò ÃÂð÷ÃÂðñþÃÂúõ â ÃÂõðûø÷ðÃÂøàúÃÂÃÂøÃÂþòðýøÃÂ. ÃÂÃÂõýàòðöýþ ÿþýÃÂÃÂÃÂ, úðú ÃÂÃÂþ ÃÂðñþÃÂðõÃÂ, òõôàòàöõ ÃÂþÃÂøÃÂõ, ÃÂÃÂþñààòðÃÂøàÿþûÃÂ÷þòðÃÂõûõù òÃÂõóôð ñÃÂûð ÿþÃÂûõôýÃÂàòõÃÂÃÂøàúþôð.

ÃÂþÃÂúþûÃÂúàÃÂÃÂþàÿþÃÂà÷ðÃÂÃÂðóøòðõàóûðòýÃÂü þñÃÂð÷þü úþýÃÂøóÃÂÃÂðÃÂøàWebpack, â þôýøü ø÷ ÃÂðüÃÂàÿþÿÃÂûÃÂÃÂýÃÂàÃÂÿþÃÂþñþò ÃÂõÃÂõýøàÿÃÂþñûõü úõÃÂøÃÂþòðýøàÃÂòûÃÂõÃÂÃÂàôþñðòûõýøõ ÃÂõÃÂ-ýþüõÃÂð ò ðúÃÂøòýÃÂõ (ýðÃÂþôÃÂÃÂøõÃÂàò ÃÂð÷ÃÂðñþÃÂúõ) ÃÂðùûà(asset), ÃÂðúøõ úðú ø . ÃÂñ ÃÂÃÂþü üþöýþ ÿþÃÂøÃÂðÃÂà. Ã¥õÃÂøÃÂþòðýøõ ýõþñÃÂþôøüþ, ÃÂÃÂþñàñÃÂðÃÂ÷õàëýðÃÂÃÂøûÃÂÃÂû ÷ðÿÃÂðÃÂøòðÃÂàÃÂþûÃÂúþ ø÷üõýõýýÃÂõ ÃÂðùûÃÂ.

Webpack 4 øüõõàòÃÂÃÂÃÂþõýýÃÂõ ÃÂÃÂýúÃÂøø, ÃÂõðûø÷þòðýýÃÂõ ÃÂõÃÂõ÷ chunkhash. íÃÂþ üþöýþ ÃÂôõûðÃÂàÃÂûõôÃÂÃÂÃÂøü þñÃÂð÷þü:

àÃÂðùû ôþñðòÃÂÃÂõ:

á ÿþüþÃÂÃÂàÃÂðúþóþ ÃÂøýÃÂðúÃÂøÃÂð òðàÃÂðñûþý ëýðÃÂÃÂøÃÂÃÂÃÂû øÃÂÿþûÃÂ÷þòðÃÂàÃÂõÃÂøÃÂþòðýýÃÂõ ÃÂðùûÃÂ. íÃÂþ ýþòðàÃÂøÃÂð, ÃÂõðûø÷þòðýýðàÿþÃÂûõ òþ÷ýøúýþòõýøàÃÂÃÂþù ÿÃÂþñûõüÃÂ.

ÃÂàñÃÂôõü øÃÂÿþûÃÂ÷þòðÃÂàþÿøÃÂðýýÃÂù ÃÂðü .

âõÿõÃÂàò ýðÃÂõù ÿðÿúõ õÃÂÃÂàÃÂðùû :

à

ÃÂðûõõ, õÃÂûø üàýøÃÂõóþ ýõ ø÷üõýøü ò ÃÂðùûðàø ø ÷ðÿÃÂÃÂÃÂøü:

âþ ÃÂòøôøü, ÃÂÃÂþ, ýõ÷ðòøÃÂøüþ þàúþûøÃÂõÃÂÃÂòð ÷ðÿÃÂÃÂúþò, ÃÂøÃÂûð ò ÃÂõÃÂðàôþûöýàñÃÂÃÂàøôõýÃÂøÃÂýàò þñþøàÃÂðùûðÃÂ.

Циклические ссылки

Рекурсивные компоненты

Компоненты могут рекурсивно вызывать себя в своём собственном шаблоне. Однако, они могут делать это только с помощью опции :

Когда вы регистрируете компонент глобально с помощью , глобальный ID будет автоматически устанавливаться как параметр опции компонента.

Если вы не будете осторожны, рекурсивные компоненты также могут привести к бесконечным циклам:

Компонент, указанный выше, приведёт к ошибке «max stack size exceeded», поэтому убедитесь, что рекурсивный вызов определяется по условию (т.е. использует , который в конечном итоге будет ).

Циклические ссылки между компонентами

Предположим, что вы создаёте дерево каталога файлов, как например в Finder или File Explorer. У вас может быть компонент с таким шаблоном:

Затем компонент с этим шаблоном:

Когда вы присмотритесь, вы увидите, что эти компоненты фактически будут потомком _и_ предком в дереве отрисовки — парадокс! При регистрации компонентов глобально с помощью этот парадокс разрешается автоматически за вас. Если это ваш случай, можете не читать дальше.

Однако, если вы используете require/import для компонентов с помощью модульной системы, например через Webpack или Browserify, вы получите сообщение об ошибке:

Чтобы объяснить, что здесь происходит, давайте назовём наши компоненты A и B. Система модулей видит, что ей нужен A, но сначала A нуждается в B, но B нуждается в A, но A нуждается в B, и т. д. Она застревает в цикле, не зная, как полностью разрешить любой компонент без предварительного разрешения другого. Чтобы исправить это, нам нужно дать модульной системе точку, в которой она может сказать «A нуждается в B иногда, но нет необходимости разрешать B сначала».

В нашем случае давайте сделаем эту точку компонентом . Мы знаем, что потомок, создающий парадокс, является компонентом , поэтому мы подождём, пока не будет вызван хук жизненного цикла для его регистрации:

Или вы можете использовать асинхронный Webpack при локальной регистрации компонента:

Проблема решена!

Режимы Webpack 4 (Webpack modes)

Вам необходимо отредактировать скрипт, чтобы в нем появился флаг режима (mode flag):

Это значит, что Webpack ищет папку с файлом .  Давайте создадим директорию с файлом, например , и добавьте в него такой код:

Теперь запустите dev-скрипт:

Теперь у вас есть директория . Отлично, так как мы знаем, что код скомпилирован. Но что произошло?

Новый Webpack не требует наличия конфигурации, поэтому перед началом использования вам не нужно возиться с webpack.config.js. Из-за этого Webpack вынужден действовать по умолчанию, и он будет искать папку , а в ней и выводить в ; — это ваш скомпилированный файл с зависимостями.

Наличие двух конфигурационных файлов — распространенная практика в Webpack, особенно в крупных проектах. Обычно один файл используется для разработки, другой — для продакшена. В Webpack есть два режима: продакшен и разработка. Это избавляет от необходимости создавать два конфигурационных файла (для средних по размеру проектов).

Если вы сейчас проверите файл , то увидите, что он не изменился.

Примечание В данном примере я буду использовать build-скрипт, поскольку он уже “из коробки” обеспечивает множеством инструментов оптимизации и с этого момента можно свободно их использовать. Основное различие между скриптами build и dev в том, как они выводят файлы. Build создан для продакшен-кода, dev — для разработки: он поддерживает «горячую» замену модулей, webpack-dev-server и многие другие вещи, которые помогают разработчикам.

Вы легко можете переопределять значения по умолчанию в скриптах npm, просто используя флаги:

Это перепишет опции по умолчанию без каких-либо других настроек.

В качестве упражнения попробуйте также флаги:

флаг наблюдения watch для включения режима просмотра. Он будет следить за изменениями вашего файла и компилировать всякий раз при его изменении:

флаг входа. Работает так же, как и выход, но перезаписывает точку входа.

Основные понятия

Точка входа (entry)

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

Точка вывода (output)

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

Загрузчики (loaders)

В основном компилируют или транспилируют ваш код, например, postcss-loader будет проводить ваши стили через разные плагины.

Пишем бэкенд

Ставим себе Flask:

создаем файл app.py со следующим кодом:

Можно проверить работоспособность сервера, запустив его:

и убедившись, что 127.0.0.1:5000/api/languages возвращает список языков в виде json объекта. Пока нет смысла обращаться к 127.0.0.1:5000/, так как этот url предполагает наличие файла index.html в папке static. А у нас пока такого файла нет.

Интегрируем vue.js в проект

Создаем папку static и переходим в нее:

Далее, устанавливаем vue-cli, желательно глобально (подробнее можно почитать тут):

теперь инициализируем проект (я использую webpack-simple — шаблон инициализаци vue.js, потому что его очень удобно кастомизировать, в отличие от шаблона webpack, который заточен под nodejs разработку):

отвечаем на вопросы, например, так:

и запускаем установку пакетов:

Ждем установки всех зависимостей. Когда все установится, открываем файл package.json и смотрим содержимое. Нас интересует группа scripts, которая определяет пользовательские команды, вызываемые через:

По умолчанию нам предлагается две команды:

  • dev — запускает встроенный nodejs сервер для разработки с отслеживанием изменений в коде и автоматической перезагрузкой кода.

  • build — предназначена для сборки приложения для продакшена, то есть все, что можно будет минимизировать — будет минимизиованно, а вместо версии vue (для разработчиков), будет использованна «ужатая» версия.

Запустим сервер для разработки фронта:

Так как стоит флаг —open, то должен будет открыться браузер по адресу 127.0.0.1:8080/

А теперь в отдельном терминале запустим наш бэк:

Попробуем открыть список языков 127.0.0.1:8080/api/languages/. Как и ожидалось, никакого списка языков нам не пришло. Нас все время выбрасывает на страницу с Vue приветствием. Как вы наверное догадались это потому что бэк у нас на одном порту, а сервер для фронта на другом. Чтобы решить эту проблему мы настроим прокси у фронт-сервера.

Открываем файлик webpack.config.js, находим строчки

и добавляем настройки прокси сервера, чтобы все запросы начинающиеся на api обрабатывались flask-сервером, которые у нас на 5000 порту:

Теперь перезапустим сервер для фронт-разработки:

Если открыть http://localhost:8080/ то окажемся на странице vue приветствия, а если открыть http://localhost:8080/api/languages то увидем список языков в json формате.

Красота! Теперь можно убрать страницу по умолчанию и что-нибудь стянуть с сервера.

Альтернативные определения шаблонов

Inline-шаблоны

Если у компонента-потомка присутствует специальный атрибут , то содержимое элемента будет использовано не для распределения контента, а в качестве шаблона этого компонента. Это позволяет более гибко использовать шаблоны.

Все inline-шаблоны должны быть определены внутри элемента DOM, к которому присоединяется Vue.

Тем не менее, усложняют понимание области видимости вашего шаблона. В качестве наилучшей практики рекомендуется определять шаблоны внутри компонента с помощью опции или в теге в файле .

X-Templates

Другой способ определения шаблонов — указывать их внутри тега script с типом , а затем ссылаться на шаблон по id. Например:

Все шаблоны x-template должны быть определены вне элемента DOM, к которому присоединяется Vue.

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

Скаффолдинг приложения на Vue

Создайте каталог для размещения Vue-приложения. В моем случае он называется vue-ui. mkdir vue-ui Затем запустите Vue UI с помощью приведенной ниже команды. vue ui Данная команда открывает Vue GUI по адресу http://localhost:8001 в браузере, который используется в системе по умолчанию.

Эти три раздела интуитивно понятны, но мы все же уточним их назначение:

  • Projects – список проектов.
  • Create – позволяет создать новый проект на основе Vue.
  • Import – позволяет импортировать проект из каталога или из удаленного репозитория, расположенного на github.

В нижней части экрана, в строке статуса показывается расположение текущего каталога.

Создадим проект. Кликните по вкладке «Create» и нажмите кнопку «Create a new project here».

Появится всплывающее окно. Назовем проект scotch-vue.

Выберите npm в качестве менеджера пакетов, используемого по умолчанию, и инициализируйте git-репозиторий.

Нажмите «Next», чтобы перейти к шаблонам. Здесь задайте базовые конфигурации Vue-приложения. Выберите пункт «Manual» и нажмите «Next».

Если у вас есть сохраненные пресеты, они появятся на этой странице и их можно будет выбрать. Ниже показан пресет scotch-vue и пресет all-settings, которые я создал ранее.

Далее перейдите на страницу «Features», чтобы активировать нужные плагины. Я использовал следующие конфигурации: Babel, Router, CSS Preprocessor, Linter/Formatter, Unit Testing, Use Config Files.

У всех параметров есть ссылка «More Info», которая ведет в справочный раздел.

Нажмите «Next, чтобы настроить конфигурации функций, добавленных в предыдущем разделе.

Выберите SCSS/SASS в качестве препроцессоров.

Я использовал инструменты ESLint + Prettier, а также выбрал опцию «lint on save».

Затем выберите инструмент для модульного тестирования: Mocha и Chai.

Кликните по кнопке «Create Project». После этого задайте имя пресету: scotch-vue-preset. В следующий раз можно будет создать проект прямо из этого пресета.

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

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

Импорт HTML и CSS

Для начала в нашей папке создадим небольшой файл .

Как видите, здесь мы импортируем . Давайте настроим его! Как я уже упомянула, для Webpack у нас есть только одна точка входа. Так куда же мы поставим наш css?

Создаем в нашей папке :

Не забываем включить это в js-файл:

В Webpack создайте новое правило для файлов css:

В терминале запустите:

Необходимо использовать для компиляции нашего CSS. Как видите, для мы также добавили новое правило.

Краткое описание обычной работы правил:

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

Спойлер: в некоторых статьях пишут, что не работает с Webpack 4, но у меня он работал Это доказывает мою точку зрения о неоднородном поведении модулей при настройке. Если же у вас этот модуль не работает, вы можете переключиться на . Далее в этой статье я покажу вам, как настроить и его тоже.

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

Чтобы ее исправить, запустите:

Затем ваш css код должен скомпилироваться в .

На данном этапе dev-зависимости в моем выглядят так:

Обратите внимание, что иная комбинация может не работать, поскольку даже обновление может «сломать» ее. #justwebpackthings. Теперь ваш должен выводиться в папку :

Теперь ваш должен выводиться в папку :

Как теперь это исправить?

Перепробовав немало плагинов, якобы решающих эту проблему, я, наконец, пришла к двум типам решений:

Решение 1

Замените на простой в . Это было одно из решений проблемы. Это похоже на конфликт с webpack 4.3, в котором введена собственная переменная . Используйте его вместе с плагином webpack-md5-hash.

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

Далее протестируем js-файлы. Теперь оба файла меняют хеш.

Решение 2

Все еще могут остаться некоторые конфликты, поэтому теперь попробуем подключить плагин mini-css-extract.

Плагин Mini-CSS

Плагин Mini CSS предназначен для замены плагина extract-text и в дальнейшем для обеспечения лучшей совместимости.

Я реструктурировала свой Webpack-файл, чтобы скомпилировать с mini-css-extract-plugin, и у меня все работает.

Теперь, когда я редактирую , генерируется новый хеш для . Также, когда я редактирую css, меняются только хеши css, и, когда я редактирую , меняются только хеши !

Интегрирование PostCSS

Чтобы выходной css-файл был безупречным, мы можем добавить наверх PostCSS.

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

Спойлер: для рационального использования PostCSS вам не требуется Webpack, есть довольно приличный плагин post-css-cli, который позволяет вам использовать его в npm-скрипте.

Создайте , где вам требуюся соответствующие плагины, вставьте:

Теперь наш должен выглядеть так:

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

Загрузчик инициализирует плагины, начиная с самого последнего.

Вы можете протестировать autoprefixer, дополнив код в ваших scss-файлах и проверив вывод. Существует также способ исправить выход, указав, какой браузер вы хотите поддерживать в файле .

Я бы посоветовала вам PostCSS.parts для изучения плагинов, доступных для PostCSS, например:

  • utilities;
  • cssnano;
  • style-lint.

Я буду использовать для минимизации моего выходного файла и css-mqpacker для упорядочения медиа-запросов. Я также получила несколько подобных сообщений:

При желании можете попробовать .

Choosing a Development Tool

It quickly becomes a hassle to manually run every time you want to compile your code.

There are a couple of different options available in webpack that help you automatically compile your code whenever it changes:

  1. webpack’s Watch Mode
  2. webpack-dev-server
  3. webpack-dev-middleware

In most cases, you probably would want to use , but let’s explore all of the above options.

Using Watch Mode

You can instruct webpack to «watch» all files within your dependency graph for changes. If one of these files is updated, the code will be recompiled so you don’t have to run the full build manually.

Let’s add an npm script that will start webpack’s Watch Mode:

package.json

Now run from the command line and see how webpack compiles your code.
You can see that it doesn’t exit the command line because the script is currently watching your files.

Now, while webpack is watching your files, let’s remove the error we introduced earlier:

src/print.js

Now save your file and check the terminal window. You should see that webpack automatically recompiles the changed module!

The only downside is that you have to refresh your browser in order to see the changes. It would be much nicer if that would happen automatically as well, so let’s try which will do exactly that.

Using webpack-dev-server

The provides you with a simple web server and the ability to use live reloading. Let’s set it up:

Change your configuration file to tell the dev server where to look for files:

webpack.config.js

This tells to serve the files from the directory on .

Let’s add a script to easily run the dev server as well:

package.json

Now we can run from the command line and we will see our browser automatically loading up our page. If you now change any of the source files and save them, the web server will automatically reload after the code has been compiled. Give it a try!

The comes with many configurable options. Head over to the documentation to learn more.

Using webpack-dev-middleware

is a wrapper that will emit files processed by webpack to a server. This is used in internally, however it’s available as a separate package to allow more custom setups if desired. We’ll take a look at an example that combines with an express server.

Let’s install and so we can get started:

Now we need to make some adjustments to our webpack configuration file in order to make sure the middleware will function correctly:

webpack.config.js

The will be used within our server script as well in order to make sure files are served correctly on . We’ll specify the port number later. The next step is setting up our custom server:

project

server.js

Now add an npm script to make it a little easier to run the server:

package.json

Now in your terminal run , it should give you an output similar to this:

Now fire up your browser and go to . You should see your webpack app running and functioning!

Ссылка на основную публикацию