Как установить webpack 4

Installation

This guide goes through the various methods used to install webpack.

Prerequisites

Before we begin, make sure you have a fresh version of Node.js installed. The current Long Term Support (LTS) release is an ideal starting point. You may run into a variety of issues with the older versions as they may be missing functionality webpack and/or its related packages require.

Local Installation

The latest webpack release is:

To install the latest release or a specific version, run one of the following commands:

npm install --save-dev webpack # or specific version npm install --save-dev webpack@version>

tip

Whether to use —save-dev or not depends on your use cases. Say you’re using webpack only for bundling, then it’s suggested that you install it with —save-dev option since you’re not going to include webpack in your production build. Otherwise you can ignore —save-dev .

If you’re using webpack v4 or later and want to call webpack from the command line, you’ll also need to install the CLI.

npm install --save-dev webpack-cli

Installing locally is what we recommend for most projects. This makes it easier to upgrade projects individually when breaking changes are introduced. Typically webpack is run via one or more npm scripts which will look for a webpack installation in your local node_modules directory:

"scripts":  "build": "webpack --config webpack.config.js" >

tip

To run the local installation of webpack you can access its binary version as node_modules/.bin/webpack . Alternatively, if you are using npm v5.2.0 or greater, you can run npx webpack to do it.

Global Installation

The following NPM installation will make webpack available globally:

npm install --global webpack

warning

Note that this is not a recommended practice. Installing globally locks you down to a specific version of webpack and could fail in projects that use a different version.

Bleeding Edge

If you are enthusiastic about using the latest that webpack has to offer, you can install beta versions or even directly from the webpack repository using the following commands:

npm install --save-dev webpack@next # or a specific tag/branch npm install --save-dev webpack/webpack#

warning

Take caution when installing these bleeding edge releases! They may still contain bugs and therefore should not be used in production.

Основы настройки Webpack

Для начала установим webpack, делается это с помощью команд:

yarn add webpack webpack-cli -D , если используете менеджер пакетов yarn
npm i webpack webpack-cli —save-dev , для менеджера пакетов npm

Настраивается Webpack с помощью конфигурационного файла webpack.config.js , который хранится в корневой директории проекта.

Пример конфигурационного файла:

const path = require('path') module.exports = < watch: true, entry: "./src/index.js", output: < filename: "bundle.js", path: path.resolve(__dirname,'build'), publicPath: "/" >>;

Начальная конфигурация представляет собой следующее:

• watch — заставляет webpack отслеживать изменения в файлах и заново выполнять сборку;
• entry — Указывает на точку входа в проект, и откуда нужно начать построение графа внутренних зависимостей проекта;
• output — Указывает путь, где будет располагаться создаваемый файл и как он будет называться;

yarn add webpack-dev-server для менеджера пакетов yarn или
npm i webpack-dev-server если используется npm

Для настройки webpack-dev-server добавим devServer в нашем конфигурационном файле.

Параметры для webpack-dev-server:

module.exports = < //. devServer: < port: 8000, historyApiFallback: true, hot: true, >, >;

Также нам нужно добавить/заменить в нашем package.json файле скрипт запуска проекта:

"start": "webpack-dev-server --mode development", 

и скрипт для сборки билда:

"build": "webpack --mode production"

Загрузчики

Загрузчики (loaders) — это специальные модули, которые используются для «загрузки» других модулей. Так же они позволяют предварительно обрабатывать файлы по мере их импорта или «загрузки».

Загрузчики могут преобразовывать файлы, например TypeScript в JavaScript, sass в css. Они могут даже позволить нам делать такие вещи, как импорт файлов CSS и HTML непосредственно в наши модули JavaScript. Для их использования необходимо прописать нужные загрузчики в разделе module.rules файла конфигурации.

• babel-loader — использует babel для загрузки файлов ES2015.
• file-loader — для загрузки различных файлов (изображения, музыкальные дорожки и т.д.) в выходную директорию
• style-loader — используется для загрузки стилей
• css-loader — включает загрузку файлов стилей
• @svgr/webpack — лоадер, позволяющий использовать svg изображения как jsx элементы

Теперь добавим загрузчик в нашу конфигурацию для преобразования файлов Javascript. Это позволит нам использовать синтаксис ES2015 + в нашем коде (который будет автоматически конвертироваться в ES5 в окончательной сборке).

Пример конфигурации с лоадером file-loader

Пример конфигурации для лоадера @svgr/webpack

Плагины

Плагины являются основой webpack, так как по сути вся его работа построена на системе плагинов. Они значительно расширяют возможности загрузчиков.

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

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

• html-webpack-plugin — используется для создания html файлов
• copy-webpack-plugin — копирует отдельные файлы или целые каталоги, которые уже существуют, в каталог сборки.
• definePlugin — позволяет создавать глобальные константы
• HotModuleReplacementPlugin — включает HMR режим, обновляет только ту часть, которая изменилась, не перезагружая полностью приложение.

plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.DefinePlugin(< 'process.env': JSON.stringify(process.env), >), new HtmlWebpackPlugin(< template: "./public/index.html", >), new CopyWebpackPlugin( < patterns: [ < from: './public/favicon.ico', to: './public'>] >), ], 

Также добавим плагин UglifyjsWebpackPlugin, который минимизирует js код, для этого нужно установить uglifyjs-webpack-plugin и добавить его в разделе optimization

optimization: < minimizer: [new UglifyJsPlugin()] >,

Webpack 4: обзор обновлений

На днях вышла новая версия популярной системы сборки Webpack 4.0. Команда опубликовала большой Changelog и восторженный пост на Medium с описанием обновлений системы.

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

Режимы сборки

Добавлен обязательный параметр —mode, определяющий один их трех режимов сборки: production, development и none, от которых зависят различные оптимизации и внешний вид бандла. Режим production оптимизирован под уменьшение размера сборки, а development — уменьшение времени сборки. В режиме none все оптимизации отключены.

А еще можно сконфигурировать собственный режим, отключив или включив определенные оптимизации с помощью опций optimization.* в конфиге. Доступные настройки отсутствуют в документации, зато их описал основатель Webpack Тобиас Копперс в блоге на Medium.

import() CommonJS-модулей

Больше нельзя подключать CommonJS-модули через import(). То есть либо используйте require, либо пишите модули по стандарту ES6 modules.

CommonJS

const a = require(«./a») module.exports = < a, b: 2 >

ESM

import a from «./a» export default < a, b: 2 >

Удаленные плагины

• NoEmitOnErrorsPlugin или NoErrorsPlugin (не создает сборку при ошибках). Доступен из коробки как optimization.noEmitOnErrors. Включен по умолчанию в production mode
• ModuleConcatenationPlugin (объединяет несколько модулей в одном замыкании, чем уменьшает бандл и ускоряет выполнение). Теперь это делается из коробки в production mode, либо включается настройкой optimization.concatenateModules
• NamedModulesPlugin (улучшает внешний вид имени модуля при Hot Module Replacement, который обновляет только изменившиеся части сборки). Теперь это опция optimization.namedModules, которая включена по умолчанию в режиме development
• NewWatchingPlugin (улучшает пересборку при изменениях) — больше не требуется
• CommonsChunkPlugin (выделяет общие части нескольких точек входа в отдельную сборку) — заменен на набор API `optimize.splitChunks`. Авторы даже написали пост, сделали ролик и опубликовали gist на эту тему.

Минификация

Отдельным пунктом про UglifyJsPlugin. Он, наконец, научился поддерживать ES6 модули, но в базовой конфигурации он больше не нужен — для минификации сборки используется опция optimization.minimize = true, которая по умолчанию включена в режиме production. Не используемый код (dead code) Webpack теперь тоже вырезает без помощи UglifyJs.

Плагин или функцию, которая будет заниматься минификацией, можно переопределить в optimization.minimizer.

Типы модулей

Изначально Webpack был ориентирован именно на сборку JavaScript-файлов. Но впоследствии его стали применять для сборки всего на свете: CSS, HTML, картинок и тд, в процессе испытывая боль с конфигурацией точек входа, лоадерами и плагинами. Теперь появились Module Types:

• javascript/auto — JavaScript-модуль в формате CommonJS, AMD или ESM
• javascript/esm — строго ES-модуль. По умолчанию применяется для .mjs файлов.
• javascript/dynamic — либо CommonJs, либо AMD
• json — JSON-файл, которые теперь можно подключать напрямую через require или import. По умолчанию включен для .json файлов
• webassembly/experimental — модуль WebAssembly, по умолчанию для .wasm файлов

Типы модулей определяются либо автоматически по расширению файла, либо задаются с помощью свойства module.rules[].type в конфиге.

По словам разработчиков, введение типов позволит им в следующих обновлениях Webpack добавить возможность создавать CSS, HTML и другие сборки, без точки входа на JavaScript.

Webpack-cli вынесен в отдельный проект

Это значит, что чтобы запускать сборку из командной строки или через менеджер пакетов, нужно установить webpack-cli вручную.

npm install —save-dev webpack-cli
yarn add —dev webpack-cli

Поддержка WebAssembly

Появилась возможность подключать WebAssembly-модули через import или require. Другими словами, в сборку можно подключать бинарные скрипты C++, C, Rust и другие, но для этого потребуются соответствующие лоадеры.

Сами модули WebAssembly тоже могут «реквайрить» другие .js и .wasm модули.

Поддержка sideEffects: false в package.json

Свойство sideEffects в файле package.json в значении false сообщает, что пакет не содержит действий, изменяющих состояние внешних переменных, DOM-узлов и тд.

Он упрощает встроенный Tree Shaking и оптимизирует сборку переиспользуемых частей кода.

sideEffects можно переопределить для каждого модуля в свойстве module.rules

Магические комментарии к динамическим импортам

В Webpack конструкции вида

modulesList.forEach( module => require(‘src/’ + module) );

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

Возможность создавать динамические импорты реализуется с помощью ContextReplacementPlugin, который заранее включает в сборку файлы по заданным паттернам. Еще один вариант динамических импортов — асинхронная подгрузка модулей через Code Splitting.

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

import( /* webpackExclude: «system.js» */ ‘module’ );

Больше информации при сборке

• Добавлена валидиция настроек плагинов. Поддерживаются не все, но какие — не уточняется.
• ProgressPlugin, включаемый опцией —progress, теперь выводит названия плагинов рядом с процентами прогресса сборки
• Опция Stats теперь выводит названия вложенных модулей
• Некорректное значение options.dependencies приводит к ошибке сборки
• Больше информации при ошибках подгрузки chunk-модулей.
• Более понятное сообщение о том, что какой-то плагин был удален

Работа с переменными окружения

Если раньше вы передавали чувствительные данные, хранящиеся в переменных окружения с помощью DefinePlugin, то теперь это можно сделать «из коробки» с помощью optimization.nodeEnv: true, тогда они автоматически попадут в proccess.env.NODE_ENV.*

Этой возможности нет в Changelog, но она есть в исходниках. И, видимо, в определенный момент появится в документации.

Source Maps

Опция devtools теперь поддерживает свойства include, test и exclude.

В режиме development по умолчанию генерируются source maps типа eval. Для более детальной настройки source maps разработчики рекомендуют использовать SourceMapDevToolPlugin.

Дефолтная конфигурация

Для простейшей сборки больше не требуется webpack.config.js, тк ряд обязательных параметров получил значения по умолчанию.

• Точка входа по умолчанию — ./src/index.js
• Output-директория, в которой окажется сборка — ./dist
• Режим сборки по умолчанию — production

Если вы занимаетесь разработкой лоадеров или плагинов для Webpack, обратите внимание на список изменений в API без обратной совместимости.

Troubleshooting

Если вы решили обновить версию Webpack, то начать лучше с удаления всех модулей и плагинов (а лучше — всей локальной папки node_modules), после чего установить новый Webpack и затем — поставить плагины заново. Это сэкономит время на решении проблем с совместимостью и обновлением зависимостей.

Дальше разбор некоторых частых ошибок.

The CLI moved into a separate package: webpack-cli. Please install ‘webpack-cli’ in addition to webpack itself to use the CLI. -> When using npm: npm install webpack-cli -D -> When using yarn: yarn add webpack-cli -D

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

— отключить плагин, заменить на optimization.minimize: true

WARNING in configuration The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment.

— передать —mode production (или development) при запуске скрипта webpack

npm WARN [email protected] requires a peer of webpack@^2.2.0 but none was installed.

— избавиться от ExtractTextWebpackPlugin (разработчики за полтора месяца тестирования беты Webpack 4 не предоставили обновления), либо, потратив N-времени в гугле, найти и установить нестабильную альфу.

npm i —save-dev [email protected]

Зачем это все

Шон Ларкин, технарь Microsoft Edge и один из ведущих разработчиков Webpack и Angular Cli, провел опрос в твиттере с предложением сравнить скорость сборки до и после обновления на 4 версию. По его словам, прирост составил до 98%

Что дальше

А дальше последуют патч-версии (читай, багфиксы), одна из которых вышла пока писался этот материал. Существенный прирост в скорости сборки во многом был обусловлен рефакторингом ядра, который позволит реализовать старые featue-реквесты и свежие идеи на обновленном API. Шон уже озвучил ряд нововведений, которые появятся либо в минорных обновлениях четвертой версии, либо, вероятнее всего, в Webpack 5.

• ESM Module Target
• Persistant-кэширование (видимо, не будет сбрасываться при остановке watch)
• Поддержка WebAssembly-модулей станет stable, добавление Tree Shaking
• Расширение 0CJS — то есть сборки без конфигурации. По сути — расширение пула дефолтных значений.
• «Многопоточная» сборка.
• CSS Module Type. Можно будет создавать отдельные CSS сборки со своей точкой входа. Шон попрощался с ExtractTextWebpackPlugin (и со всеми контрибьютерами этой разработки)
• То же самое с HTML Module Type
• URL/File Module Type. То есть в качестве точки входа скоро сможет выступить даже изображение.
• [Create-Your-Own] Module Type. Вот что назвается, рефакторинг.

Шон завершает публикацию словами о Ренессансе JavaScript и «переосмыслении» миссии Webpack.

А мы продолжаем работать.

If you like this article, share a link with your friends

Read more

We talk about interesting technologies and share our experience of using them.

maxfarseer / install-and-setup-webpack-4-for-pfoject-28.js

Clone via HTTPS Clone with Git or checkout with SVN using the repository’s web address.

Learn more about clone URLs

Код для статьи Установка и настройка Webpack 4 для работы с проектом 28

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

// webpack v4

const path = require ( ‘path’ ) ;

const ExtractTextPlugin = require ( ‘extract-text-webpack-plugin’ ) ;

const HtmlWebpackPlugin = require ( ‘html-webpack-plugin’ ) ;

module . exports =

entry : < main : './src/index.js' >,

output :

path : path . resolve ( __dirname , ‘dist’ ) ,

filename : ‘[name].[chunkhash].js’

> ,

module :

rules : [

test : / \. js $ / ,

exclude : / node_modules / ,

use :

loader : «babel-loader»

>

> ,

test : / \. scss $ / ,

use : ExtractTextPlugin . extract (

fallback : ‘style-loader’ ,

use : [ ‘css-loader’ , ‘sass-loader’ ]

> )

>

]

> ,

plugins : [

new ExtractTextPlugin (

) ,

new HtmlWebpackPlugin (

inject : false ,

hash : true ,

template : ‘./src/index.html’ ,

filename : ‘index.html’

> ) ,

]

> ;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment