Зачем нужно собирать фронтенд

Webpack 2.2.1

Мы будем рассматривать Webpack версии 2.2.1. В новой версии появился ряд важных нововведений, связанных не только с новым функционалом, но и с некоторыми изменениями в синтаксисе.

Будьте осторожны при просмотре видеоуроков и прочтении статей, посвященных первой версии Webpack. Техники, описанные в них, могут быть не только устаревшими, но и ошибочными (применительно ко второй версии Webpack).

Несовместимость

Некоторые плагины Webpack могут быть полностью или частично несовместимы с Webpack 2. Некоторые — с node.js_7. Внимательно читайте документацию!

ES6-модули в Webpack 2

В Webpack 2 встроена поддержка ES6-модулей. Поэтому если мы используем babel, нужно его предупредить, что ES6-модули Webpack не нужно переделывать в CommonJS.

PHP

{
presets:
]
}

1 2 3 4 5

{ presets «es2015»,{«modules»false} }

На этом первый видеоурок курса по изучению Webpack 2 завершится.

Приятного всем просмотра! Учитесь с удовольствием!

ツПолезные ссылки к видеоуроку:
Исходники на GitHub
Видеоурок по Yarn
Получить профессию «Веб-разработчик»
Прокачаться на «Продвинутом курсе по веб-разработке»
Подписывайтесь на канал, новые видео выходят каждую неделю.

Global Assets

The coolest part of everything mentioned above, is that loading assets this way allows you to group modules and assets in a more intuitive way. Instead of relying on a global directory that contains everything, you can group assets with the code that uses them. For example, a structure like this can be useful:

This setup makes your code a lot more portable as everything that is closely coupled now lives together. Let’s say you want to use in another project, copy or move it into the directory over there. As long as you’ve installed any external dependencies and your configuration has the same loaders defined, you should be good to go.

However, let’s say you’re locked into your old ways or you have some assets that are shared between multiple components (views, templates, modules, etc.). It’s still possible to store these assets in a base directory and even use to make them easier to .

Upgrade webpack 4 and its plugins/loaders

1. Как очистить кэш dns на компьютере windows, mac и зачем это нужно делать

   Upgrade 4 to the latest available version.

   • When using webpack >= 4, upgrading to the latest webpack 4 version should not require additional guidance.

   • If you are using webpack version less than 4 please see the webpack 4 migration guide.

2. Upgrade to the latest available version (when used)

3. Upgrade all used Plugins and Loaders to the latest available version

   Some Plugins and Loaders might have a beta version that has to be used in order to be compatible with webpack 5.

Make sure your build has no errors or warnings

There might be new errors or warnings because of the upgraded versions of , , Plugins and Loaders. Keep an eye for deprecation warnings during the build.

You can invoke this way to get stack traces for deprecation warnings to figure out which Plugins and Loaders are responsible.

As webpack 5 removes all deprecated features, make sure there’s no webpack deprecation warnings during the build in order to proceed.

Update outdated options

Update the following options to their new version (if used):

• →
• →
• →
• →
• →
• →
• →
• →
• →
• →
• → is removed in favor of
• (deprecated since v3) → /

Test webpack 5 compatibility

Try to set the following options in your webpack 4 configuration and check if build still works correctly.

You have to remove these options again when upgrading your configuration for webpack 5.

Маппинг исходных файлов тестового кода

Тестовая сборка готова, но есть один нюанс, касающийся тестирования кода. Если запустить Mocha для файла и один из этих тестов не пройдёт, как это будет выглядеть? Давайте сделаем тест формулы расстояния в ошибочным:

Выполните и вот что получится:

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

Код с ошибкой находится в строке 8 в файле , но Mocha запускается для файла , поэтому, с точки зрения Mocha, ошибка находится в строке 116. К счастью, Webpack поддерживает source maps, которые покажут, какая строка кода соответствует ошибке. Source maps (или карты кода) — это файлы исходного кода, которые показывают точное соответствие элементов готового рабочего кода проекта и вашего кода разработки. Выполняется своего рода проход декодером по пакетному файлу , чтобы получить исходные строки кода, которые соответствуют связному коду. Давайте обновим оператор в файле :

Затем в объект добавим строку:

Теперь в тестировочных сборках каталог будет содержать файл типа source maps. Выполните и каталог будет содержать файл в дополнение к пакету .

Чтобы Mocha мог использовать эту source map при запуске тестов, необходимо установить ещё один пакет:

Теперь, чтобы его использовать, нужно обновить скрипт Mocha в разделе файла :

Флаг требует пакет , это означает, что Mocha будет использовать source map, если она доступна. Теперь, если вы выполните и получите ошибку, вы увидите, в какой строке она находится, и сможете исправить код (Commit 8).

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

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

Перевод статьи Webpack: From 0 to automated testing

Rule.generator

Rule.generator.dataUrl

When is used as an object, you can configure two properties:

• encoding: When set to , module source will be encoded using Base64 algorithm. Setting to false will disable encoding.
• mimetype: A mimetype for data URI. Resolves from module resource extension by default.

webpack.config.js

When used a a function, it executes for every module and must return a data URI string.

Rule.generator.emit

Opt out of writing assets from Asset Modules, you might want to use it in Server side rendering cases.

• Type:

• Available: 5.25.0+

• Example:

The same as but for specific rule. Overrides and works only with and module types.

webpack.config.js

Loading Images

So now we’re pulling in our CSS, but what about our images like backgrounds and icons? As of webpack 5, using the built-in Asset Modules we can easily incorporate those in our system as well:

webpack.config.js

Now, when you , that image will be processed and added to your directory and the variable will contain the final url of that image after processing. When using the css-loader, as shown above, a similar process will occur for within your CSS. The loader will recognize this is a local file, and replace the path with the final path to the image in your directory. The html-loader handles in the same manner.

Let’s add an image to our project and see how this works, you can use any image you like:

project

src/index.js

src/style.css

Let’s create a new build and open up the file again:

If all went well, you should now see your icon as a repeating background, as well as an element beside our text. If you inspect this element, you’ll see that the actual filename has changed to something like . This means webpack found our file in the folder and processed it!

optimize

Note that all plugins under namespace should only be used when set to . Otherwise you might get into trouble where plugins are applied twice.

LimitChunkCountPlugin

Merge chunks limit chunk count is lower than .

The overhead for each chunks is provided by or defaults to 10000. Entry chunks sizes are multiplied by (or 10).

Chunks that reduce the total size the most are merged first. If multiple combinations are equal the minimal merged size wins.

RealContentHashPlugin

When option is enabled, webpack will apply to compiler internally.

Hook

provides a 5.8.0+ hook for customizing hash updating:

iAziz786 EugeneHlushko ooflorent Legends chenxsan

UseEntry

It must have a property being a string. It is resolved relative to the configuration with the loader resolving options ().

It can have an property being a string or object. This value is passed to the loader, which should interpret it as loader options.

For compatibility a property is also possible, which is an alias for the property. Use the property instead.

Note that webpack needs to generate a unique module identifier from the resource and all loaders including options. It tries to do this with a of the options object. This is fine in 99.9% of cases, but may be not unique if you apply the same loaders with different options to the resource and the options have some stringified values.

It also breaks if the options object cannot be stringified (i.e. circular JSON). Because of this you can have a property in the options object which is used as unique identifier.

webpack.config.js

A can also be a function which receives the object argument describing the module being loaded, and must return a non-function object. This can be used to vary the loader options on a per-module basis.

The object parameter has the following fields:

• : The current webpack compiler (can be undefined)
• : The path to the module that is importing the module being loaded
• : Always the path to the module being loaded
• : The path to the module being loaded, it is usually equal to except when the resource name is overwritten via in request string

webpack.config.js

Настройка Webpack с помощью файла webpack.config.js

То, что можно сделать с помощью команды , является стандартным режимом работы Webpack. Если выполнить , то он создаст граф зависимостей из входного файла и выдаст пакетный файл . Но задать расположение точек входа и выхода программы можно, настроив файл конфигурации. Поместите следующий код в файл с именем :

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

Если в файле конфигурации изменить путь вывода на что-то вроде  , то при повторном выполнении команды пакетный файл будет помещён в  (Commit 5).

Файл конфигурации предназначен не только для настройки расположения входных и выходных файлов. Также можно настроить что именно Webpack делает, когда встречает файлы разных типов, используя специальные загрузчики, которые на самом деле являются JavaScript-программами, преобразующими ваш код. Например, в файле конфигурации может быть правило, определяющее, что, если Webpack встречает файл TypeScript в своём графе зависимостей, этот файл отправляется в загрузчик, который преобразует его из TypeScript в обычный JavaScript.

Загрузчик, который будет использоваться далее, — это Babel. Если вы не использовали его раньше, Babel — это инструмент, который берёт код JS, использующий современные функции, и преобразует его в эквивалент, совместимый со старыми версиями JavaScript. Это позволяет вашему приложению работать в старых браузерах или в браузерах, которые ещё не поддерживают некоторые новые функции JavaScript. В конце концов, некоторые ленивцы не обновляли свои браузеры с 2009 года. Некоторая часть написанного кода не будет работать в браузере 2009 года:

Здесь используется стрелочная функция и старые браузеры её не воспринимают. Поэтому используем загрузчик и отправим эту функцию в прошлое. Для начала выполним следующее:

Затем в файле добавим следующий код в :

Этот код добавит новое правило в ваш Webpack. Если в дереве зависимостей Webpack встречает файл, который заканчивается на (например, ), и этот файл отсутствует в папке (например, jQuery), то к этому файлу применяется данное правило.

Любой файл, который соответствует этому правилу, проходит через все загрузчики в блоке (в данном случае только через загрузчик babel). Таким образом, файлы и пройдут через загрузчик, что приведёт к удалению стрелочной функции в , а затем Webpack продолжит свой путь сборки. Тем временем, как только Webpack встречает jQuery, он просто загружает этот код как он есть без загрузчиков, поскольку jQuery находится в каталоге .

Теперь, если выполнить и посмотреть исходный код в , фрагмент, соответствующий вашей функции сортировки, использует ключевое слово , а не стрелочную функцию (Commit 6).

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

Обратите внимание на то, как выше мы используем стрелочную функцию, а ниже присутствует уже знакомое браузеру 2009 года ключевое слово

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

Concepts

Name	Status	Install Size	Description
mini-css-extract-plugin	Extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.
compression-webpack-plugin	Prepares compressed versions of assets to serve them with Content-Encoding
html-webpack-plugin	Simplifies creation of HTML files () to serve your bundles

Loaders are activated by using prefixes in statements,
or are automatically applied via regex from your webpack configuration.

Files

Name	Status	Install Size	Description
raw-loader	Loads raw content of a file (utf-8)
val-loader	Executes code as module and considers exports as JS code
url-loader	Works like the file loader, but can return a Data Url if the file is smaller than a limit
file-loader	Emits the file into the output folder and returns the (relative) url

Transpiling

Name	Status	Install Size	Description
	Loads ES2015+ code and transpiles to ES5 using Babel
	Loads TypeScript like JavaScript
	Loads CoffeeScript like JavaScript

Templating

Name	Status	Install Size	Description
	Exports HTML as string, requires references to static resources
	Loads Pug templates and returns a function
	Compiles Markdown to HTML
	Loads and transforms a HTML file using PostHTML
	Compiles Handlebars to HTML

Styling

Name	Status	Install Size	Description
	Add exports of a module as style to DOM
	Loads CSS file with resolved imports and returns CSS code
	Loads and compiles a LESS file
	Loads and compiles a Sass/SCSS file
	Loads and compiles a Stylus file

Frameworks

Name	Status	Install Size	Description
	Loads and compiles Vue Components
	Process HTML & CSS with preprocessor of choice and Web Components like first-class modules
	Loads and compiles Angular 2 Components
	Riot official webpack loader

Performance

webpack uses async I/O and has multiple caching levels. This makes webpack fast
and incredibly fast on incremental compilations.

Module Formats

webpack supports ES2015+, CommonJS and AMD modules out of the box. It performs clever static
analysis on the AST of your code. It even has an evaluation engine to evaluate
simple expressions. This allows you to support most existing libraries out of the box.

webpack allows you to split your codebase into multiple chunks. Chunks are
loaded asynchronously at runtime. This reduces the initial loading time.

webpack can do many optimizations to reduce the output size of your
JavaScript by deduplicating frequently used modules, minifying, and giving
you full control of what is loaded initially and what is loaded at runtime
through code splitting. It can also make your code chunks cache
friendly by using hashes.

Четыре базовые концепции Webpack

Рассмотрим базовые концепции Webpack. Их всего четыре.

Entry

Webpack создает граф зависимостей вашего приложения. Стартовая точка в этом графе называется — “точкой входа” (“entry point”). Точка входа указывает вебпаку, где ваше приложение берет начало и далее следует по графу зависимостей, чтобы понять, что включить в бандл. Проще говоря, точка входа — это первый файл, с которого начинается ваше приложение.

PHP

module.exports = {
entry: ‘./path/to/my/entry/file.js’
};

1 2 3

module.exports={ entry’./path/to/my/entry/file.js’ };

Output

После того как вебпак собрал все исходники (“assets”) вашего приложения вместе, ему нужно знать, куда их положить и как назвать.

PHP

output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘my-first-webpack.bundle.js’
}

1 2 3 4

output{ pathpath.resolve(__dirname,’dist’), filename’my-first-webpack.bundle.js’ }

Loaders

Webpack может работать с любыми файлами, как с модулями. Однако сам он “из коробки” понимает только javascript-файлы. Чтобы вебпак мог работать с CSS, html, jpg и пр. ему понадобится помощь. “Лоадеры” трансформируют все эти файлы ( .css, .html, .scss, .jpg, и пр.) в модули, совершают над ними определённые действия (например компилируют SCSS в CSS) и добавляют их в граф зависимостей.

Рассмотрим пример

Обратите внимание на то, что лоадеры выполняются снизу вверх

PHP

module: {
rules: [{
test: /\.scss$/,
include: paths,
use:
}]
}

1 2 3 4 5 6 7 8 9 10 11

module{ rules{ test\.scss$, includepaths, use ‘style-loader’, ‘css-loader’, ‘sass-loader’ } }

В этом примере мы говорим: “Эй, вебпак, если ты встретишь .scss-файлы в нашем приложении, объявленные как модули, то, сначала, скомпилируй SCSS в CSS (sass-loader), затем помоги вебпаку их загрузить и добавить в граф (css-loader), после чего научи вебпак добавлять стили в DOM-дерево при помощи тега ˂style˃ (style-loader).”

Plugins

Плагины могут влиять непосредственно на процесс сборки (компиляции) бандлов.

PHP

plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: ‘./src/index.html’})
]

1 2 3 4

plugins newwebpack.optimize.UglifyJsPlugin(), newHtmlWebpackPlugin({template’./src/index.html’})

Они могут минифицировать javascript или, например, генерировать html-файлы (в том числе работать с шаблонами).

Rule.resolve

Resolving can be configured on module level. See all available options on .
All applied resolve options get deeply merged with higher level .

For example, let’s imagine we have an entry in , and a to demonstrate the module level resolve.

./src/index.js

./src/footer/default.js

./src/footer/overridden.js

webpack.js.org

When creating a bundle with this configuration, will output ‘default footer’. Let’s set for files, and alias to .

webpack.js.org

When creating a bundle with updated configuration, will output ‘overridden footer’.

When enabled, you should provide the file extension when ing a module in files or any other files when their nearest parent file contains a field with a value of , otherwise webpack would fail the compiling with a error. And webpack won’t resolve directories with filenames defined in the , you have to specify the filename yourself.

webpack.config.js

Добавление тестовых сценариев в сборку

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

Затем создайте новый каталог и новый файл , содержащий следующий фрагмент:

Теперь у вас есть тестовые сценарии для функций и , устанавливающие, что вычисляет формулу расстояния, а сортирует массивы координат с помощью формулы расстояния, используя наборы тестов Mocha и установки Chai. Довольно стандартная тестовая настройка.

Однако, если выполнить , будет ошибка «Код JavaScript недопустим», потому что он содержит ключевое слово , которое Node в данный момент не поддерживает. Но что если обойти это ограничение, используя Webpack для управления зависимостями тестового кода?

Прим.: это можно легко исправить, просто используя вместо в тестовых файлах. Но тестовый код также будет проходить через процесс сборки, если вы тестируете JavaScript-код типа Flow, который использует аннотации, или веб-приложения Vue.js, которые используют файлы . Все они должны быть преобразованы в обычный JavaScript.

Список тестовых инструкций:

1. Webpack строит граф зависимостей, начинающийся с тестовых файлов, а не с файлов приложения.
2. Webpack создаёт файл JavaScript, содержащий весь тестовый код и его зависимости без ключевого слова .
3. Выполняются тесты, запуская Mocha для этого JavaScript-файла.

Всё это будет выглядеть следующим образом:

Как можно увидеть, будут происходить две отдельные сборки. Одна из которых содержит код приложения в качестве точки входа и папку в качестве выходной директории, а другая — тестовые файлы в качестве точки входа и папку в качестве выходного каталога. Итак, давайте обновим конфигурационный файл, чтобы Webpack поддерживал вторую сборку:

Давайте разберёмся, что этот код делает. В строке 4 есть оператор , который  выполняется, если системная переменная имеет непустое значение. Так что, если вы выполните , то вам придётся вводить оператор , но это не потребуется, если просто выполнить .

Внутри оператора происходит выбор, какой JS-файл является точкой входа. Вместо уже установленного выходного каталога будет папка . А вместо точки входа — массив файлов, соответствующих глобальному выражению . Другими словами, это все файлы, которые находятся в каталоге и имеют путь, заканчивающийся на .

Новая точка входа и выходной путь передаются в объект , затем запускается Webpack для создания тестовой сборки. Конфигурация Webpack представляет собой обычный код JavaScript, поэтому можно использовать стандартную библиотеку Node и операторы для её настройки. Если выполнить , то можно увидеть каталог . А если запустить , то можно увидеть, как выполняются ваши тесты.

Наконец, в разделе вашего добавьте следующую строку:

Это означает, что когда вы выполняете , создаётся каталог (каталог сборки тестирования) с помощью Webpack, затем запускается Mocha для этой сборки, и, наконец, код удаляет каталог , поскольку он больше не используется (Commit 7).

Special Thanks to

(In chronological order)

• @medikoo for modules-webmake, which is a similar project. webpack was born because I wanted Code Splitting for modules-webmake. Interestingly the Code Splitting issue is still open (thanks also to @Phoscur for the discussion).
• @defunctzombie for the browser-field spec, which makes modules available for node.js, browserify and webpack.
• Every early webpack user, which contributed to webpack by writing issues or PRs. You influenced the direction…
• @shama, @jhnns and @sokra for maintaining this project
• Everyone who has written a loader for webpack. You are the ecosystem…
• Everyone I forgot to mention here, but also influenced webpack.

Entry Points

This is by far the easiest and most intuitive way to split code. However, it is more manual and has some pitfalls we will go over. Let’s take a look at how we might split another module from the main bundle:

project

another-module.js

webpack.config.js

This will yield the following build result:

As mentioned there are some pitfalls to this approach:

• If there are any duplicated modules between entry chunks they will be included in both bundles.
• It isn’t as flexible and can’t be used to dynamically split code with the core application logic.

The first of these two points is definitely an issue for our example, as is also imported within and will thus be duplicated in both bundles. Let’s remove this duplication in next section.

Работа со скриптами

Мы рассмотрим, как перенести ES6 в ES5-совместимый код, который работает во всех браузерах. Начнем с выполнения приведенной ниже команды:

npm run dev -- --devtools false

Затем откроем файл main.bundle.js:

/***/ "./src/component.js":
/*!**************************!*
  !*** ./src/component.js ***!
  **************************/
/*! обеспечение экспорта: по умолчанию */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* экспорт по умолчанию */ __webpack_exports__ = ((text = "Hello webpack") => {
  const element = document.createElement("p");

  element.innerHTML = text;

  return element;
});

/***/ })

Современные функции из стандарта JavaScript ES6 (стрелочная функция и объявление const) из модуля component.js по умолчанию не преобразованы в ES5-совместимый код. Чтобы код работал в более старых браузерах, необходимо добавить загрузчик Babel:

npm install babel-loader @babel/core @babel/preset-env --save-dev

Затем в файле webpack.config.js добавьте module после свойства output:

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
},

При определении правил для загрузчика webpack нужно установить три основных свойства:

• test – описывает, какие файлы следует трансформировать.
• exlude – определяет, какие файлы из загрузчика не следует обрабатывать.
• use – указывает, какой загрузчик следует использовать для сопоставленных модулей.

Еще раз введите приведенную ниже команду:

npm run dev -- --devtools false

На этот раз код в файле main.bundle.js компилируется в следующий:

/***/ "./src/component.js":
/*!**************************!*
  !*** ./src/component.js ***!
  **************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* экспорт по умолчанию */ __webpack_exports__ = (function () {
  var text = arguments.length > 0 && arguments !== undefined ? arguments : "Hello webpack";
  var element = document.createElement("p");
  element.innerHTML = text;
  return element;
});

/***/ })

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

Module Contexts

These options describe the default settings for the context created when a dynamic dependency is encountered.

Example for an dynamic dependency: .

Example for an dynamic dependency: .

Example for an dynamic dependency: .

Here are the available options with their defaults:

webpack.config.js

A few use cases:

• Warn for dynamic dependencies: .
• should include the whole directory:
• should not include subdirectories by default:
• makes missing exports an error instead of warning
• Set the inner regular expression for partial dynamic dependencies :

Contributors

sokra skipjack jouni-kantola jhnns dylanonelson byzyk pnevares fadysamirsadek nerdkid93 EugeneHlushko superburrito lukasgeiter skovy smelukov opl- Mistyyyy anshumanv chenxsan

Prefetching/Preloading modules

webpack 4.6.0+ adds support for prefetching and preloading.

Using these inline directives while declaring your imports allows webpack to output “Resource Hint” which tells the browser that for:

• prefetch: resource is probably needed for some navigation in the future
• preload: resource will also be needed during the current navigation

An example of this is having a component, which renders a component which then on demand loads a component after being clicked.

LoginButton.js

This will result in being appended in the head of the page, which will instruct the browser to prefetch in idle time the file.

Preload directive has a bunch of differences compared to prefetch:

• A preloaded chunk starts loading in parallel to the parent chunk. A prefetched chunk starts after the parent chunk finishes loading.
• A preloaded chunk has medium priority and is instantly downloaded. A prefetched chunk is downloaded while the browser is idle.
• A preloaded chunk should be instantly requested by the parent chunk. A prefetched chunk can be used anytime in the future.
• Browser support is different.

An example of this can be having a which always depends on a big library that should be in a separate chunk.

Let’s imagine a component which needs a huge . It displays a when rendered and instantly does an on demand import of :

ChartComponent.js

When a page which uses the is requested, the charting-library-chunk is also requested via . Assuming the page-chunk is smaller and finishes faster, the page will be displayed with a , until the already requested finishes. This will give a little load time boost since it only needs one round-trip instead of two. Especially in high-latency environments.

Getting Started

To begin, you’ll need to install :

requires you to install either Dart Sass or Node Sass on your own (more documentation can be found below).

This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.

Chain the with the css-loader and the style-loader to immediately apply all styles to the DOM or the mini-css-extract-plugin to extract it into a separate file.

Then add the loader to your Webpack configuration. For example:

app.js

style.scss

webpack.config.js

Finally run via your preferred method.

Resolving at-rules

Webpack provides an advanced mechanism to resolve files.

The uses Sass’s custom importer feature to pass all queries to the Webpack resolving engine. Thus you can import your Sass modules from .

Using is deprecated and can be removed from your code (we recommend it), but we still support it for historical reasons. Why can you remove it? The loader will first try to resolve as a relative path. If it cannot be resolved, then the loader will try to resolve inside .

Prepending module paths with a tells webpack to search through .

It’s important to prepend it with only , because resolves to the home directory. Webpack needs to distinguish between and because CSS and Sass files have no special syntax for importing relative files. Writing is the same as

Problems with

Since Sass implementations don’t provide url rewriting, all linked assets must be relative to the output.

• If you pass the generated CSS on to the , all urls must be relative to the entry-file (e.g. ).
• If you’re just generating CSS without passing it to the , it must be relative to your web root.

You will be disrupted by this first issue. It is natural to expect relative references to be resolved against the / file in which they are specified (like in regular files).

Thankfully there are a two solutions to this problem:

• Add the missing url rewriting using the resolve-url-loader. Place it before in the loader chain.
• Library authors usually provide a variable to modify the asset path. bootstrap-sass for example has an .

Зачем нужен Webpack?

В командной строке запустите open public/index.html. Вы должны увидеть желтую кнопку. При нажатии кнопка должна вывести сообщение в вашу консоль. Если вы нажмете кнопку 10 раз, должно появиться сообщение о том, что вы выиграли! Супер! Все сделано!

Шучу. Посмотрите на файл index.html. Что произойдет, если вы не включите ключевое слово defer в строки 7 и 8? Как насчет того, чтобы переупорядочить файлы JavaScript?

<!-- remove 'defer' from lines 7 and 8 -->
<!-- re-order 'game.js' and 'main.js' -->
  <script src="../src/main.js"></script>
  <script src="../src/game.js"></script>

Вы увидите что-то подобное в своей консоли.

Э-э-э. ** Помните ту вещь, которую я сказал вначале о сценариях, выполняемых по порядку? Атрибут defer говорит вашему браузеру не запускать определенный файл JavaScript до тех пор, пока HTML-файл не будет полностью загружен. Без этой задержки ваш JavaScript начнет выполняется, как только начнет загружаться HTML. И тогда код в вашем файле ‘main.js’ запуститься перед кодом ‘game.js’. То есть ваша программа попытается запустить функцию ‘click()’ до того, как она будет определена.

Вот почему у вас сейчас есть ошибка в вашей консоли.