Меню

Настройка webpack dev server



Настройка babel7 и webpack dev server

В этом курсе мы настроим шаблон Webpack 4, подключим babel 7, а также разберемся с webpack dev server. Подключим js библиотеки на примере vue.js и bootstrap, настроим loaders. Ниже более полное видео по Webpack dev server и настройки babel7, в статье мы пробежимся по основным моментам из видео.

Что важно понимать?

  • Сборку мы пишем единожды и далее мы переиспользуем ее из проекта в проект.
  • Вебпак можно использовать как угодно. Например, в верстке сайтов или создании полноценного SPA. Также вебпак (и именно его) используют при сборки приложений для десктопа и мобильных приложений (используя, конечно-же, фреймворки)

Webpack и gulp отличия

Для начала нужно поговорить про отличия gulp и webpack. Во превых в вебпаке есть точка входа в которую мы складируем все наши библиотеки, скрипты, css файлы и так далее. В галпе такого файла нету это не очень удобно.

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

Что в этом плане делает вебпак? Вы все также устанавливаете библиотеку через нпм. Далее вам не нужно останавливать сервер и следовать четкому порядку вебпак сам все подключит и сделает это правильно, раставив в конечном файле app.js все библиотеки в нужном порядке.

Что быстрее webpack или gulp?

Вебпак собирается в разы быстрее благородя входной точке js и тому, что папку dist вебпак хранит в памяти, в отличии от других сборщиков, которым нужно собирать каждый раз эту папку по новой.

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

Инициализация вебпака

далее нужно следовать тому, что скажет npm либо просто набрать

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

Установка webpack-dev-server

Эта команда установит все необходимые пакеты для дальнейшей работы

После этого в файле package.json появится следующее:

Создание dev и build ярлыков для сборки webpack

Теперь можно создать 2 ярлыка для сборки и дев разработки. В файле package.json описываем эти ярлыки:

Создание файла webpack.config.js

Опишем начальный конфиг в файле webpack.config.js который нужно создать.

В файле index.html также нужно прописать путь к нашему app.js

Создание точки входа

Теперь создадим точку входа, про которую говорили выше. для этого создадим папку src в которой будет файл index.js это и есть наша точка входа (пока что единственная). Подключим в нее сторонний срипт common.js и создадим его в новой папке js.

Файл inxex.js будет выглядить так:

Файл common (который мы импортируем из папки js) будет следующим:

То есть — обычная стрелочная функция, которая в дальнейшем перекомпилируется в ES4 или ES5 (по желанию) и сделаем это для того, чтобы наш код работал даже в старике IE или базовом браузере мозилы.

Установка и настройка bable 7

Babel это js компилятор, который позволяет перегонять новый синтаксис js в старый. Потому что иначе, если этого не сделать, то наш супер навороченный код отвалиться в половине браузеров.

Для установки в консоли пропишем

Обработка файлов js через babel-loader

В конфигурациях вебпака прописываем

В этом регулярном выражении мы обрабатываем все js файлы через. babel-loader при этом исключая папку node_modules

Теперь создаем файл .babelrc в который прописываем

Вот и все, теперь наш js код обрабатывается бейблом и перегоняется в старый, валидный, синтаксис.

Источник

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

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

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

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

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

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

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

Так же необходимо установить webpack-dev-server, который понадобится для разработки и отладки приложения.

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

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

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

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

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

Загрузчики

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

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

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

Для использования babel-loader необходимо установить babel/core. Также установим пресет babel/preset-env, который компилирует ES2015+ в ES5 путем автоматического определения необходимых Babel плагинов и полифайлов. Далее создадим файл .babelrc и в него добавим ранее установленный пресет.

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

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

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

Плагины

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

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

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

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

Пример конфигурации с добавленными плагинами:

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

Источник

DevServer

webpack-dev-server can be used to quickly develop an application. See the development guide to get started.

This page describes the options that affect the behavior of webpack-dev-server (short: dev-server).

Options that are compatible with webpack-dev-middleware have 🔑 next to them.

devServer

This set of options is picked up by webpack-dev-server and can be used to change its behavior in various ways. Here’s a simple example that gzips and serves everything from our dist/ directory in the project root:

webpack.config.js

When the server is started, there will be a message prior to the list of resolved modules:

that will give some background on where the server is located and what it’s serving.

If you’re using dev-server through the Node.js API, the options in devServer will be ignored. Pass the options as a second parameter instead: new WebpackDevServer(compiler, <. >) . See here for an example of how to use webpack-dev-server through the Node.js API.

You cannot use the second compiler argument (a callback) when using WebpackDevServer .

Be aware that when exporting multiple configurations only the devServer options for the first configuration will be taken into account and used for all the configurations in the array.

If you’re having trouble, navigating to the /webpack-dev-server route will show where files are served. For example, http://localhost:9000/webpack-dev-server .

If you want to manually recompile the bundle, navigating to the /invalidate route will invalidate the current compilation of the bundle and recompile it for you via webpack-dev-middleware. Depending on your configuration, URL may look like http://localhost:9000/invalidate .

HTML template is required to serve the bundle, usually it is an index.html file. Make sure that script references are added into HTML, webpack-dev-server doesn’t inject them automatically.

devServer.after

function (app, server, compiler)

Provides the ability to execute custom middleware after all other middleware internally within the server.

webpack.config.js

devServer.allowedHosts

This option allows you to whitelist services that are allowed to access the dev server.

webpack.config.js

Mimicking django’s ALLOWED_HOSTS , a value beginning with . can be used as a subdomain wildcard. .host.com will match host.com , www.host.com , and any other subdomain of host.com .

webpack.config.js

To use this option with the CLI pass the —allowed-hosts option a comma-delimited string.

devServer.before

function (app, server, compiler)

Provides the ability to execute custom middleware prior to all other middleware internally within the server. This could be used to define custom handlers, for example:

webpack.config.js

devServer.bonjour

This option broadcasts the server via ZeroConf networking on start

webpack.config.js

Usage via the CLI

devServer.clientLogLevel

string = ‘info’: ‘silent’ | ‘trace’ | ‘debug’ | ‘info’ | ‘warn’ | ‘error’ | ‘none’ | ‘warning’

none and warning are going to be deprecated at the next major version.

When using inline mode, the console in your DevTools will show you messages e.g. before reloading, before an error or when Hot Module Replacement is enabled.

devServer.clientLogLevel may be too verbose, you can turn logging off by setting it to ‘silent’ .

webpack.config.js

Usage via the CLI

devServer.compress

Enable gzip compression for everything served:

webpack.config.js

Usage via the CLI

devServer.contentBase

boolean: false string [string] number

Tell the server where to serve content from. This is only necessary if you want to serve static files. devServer.publicPath will be used to determine where the bundles should be served from, and takes precedence.

It is recommended to use an absolute path.

By default, it will use your current working directory to serve content. To disable contentBase set it to false .

webpack.config.js

It is also possible to serve from multiple directories in case you want to serve static content at multiple URLs with contentBasePublicPath :

webpack.config.js

Usage via the CLI

devServer.contentBasePublicPath

Tell the server at what URL to serve devServer.contentBase static content. If there was a file assets/manifest.json , it would be served at /serve-content-base-at-this-url/manifest.json

webpack.config.js

Provide an array of strings in case you have multiple static folders set in contentBase .

webpack.config.js

devServer.disableHostCheck

When set to true this option bypasses host checking. THIS IS NOT RECOMMENDED as apps that do not check the host are vulnerable to DNS rebinding attacks.

webpack.config.js

Usage via the CLI

devServer.filename 🔑

This option lets you reduce the compilations in lazy mode. By default in lazy mode, every request results in a new compilation. With filename , it’s possible to only compile when a certain file is requested.

If output.filename is set to ‘bundle.js’ and devServer.filename is used like this:

webpack.config.js

It will now only compile the bundle when /bundle.js is requested.

filename has no effect when used without lazy mode.

devServer.headers 🔑

Adds headers to all responses:

webpack.config.js

devServer.historyApiFallback

boolean = false object

When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. Enable devServer.historyApiFallback by setting it to true :

webpack.config.js

By passing an object this behavior can be controlled further using options like rewrites :

webpack.config.js

When using dots in your path (common with Angular), you may need to use the disableDotRule :

webpack.config.js

Usage via the CLI

For more options and information, see the connect-history-api-fallback documentation.

devServer.host

Specify a host to use. If you want your server to be accessible externally, specify it like this:

webpack.config.js

Usage via the CLI

devServer.hot

webpack.config.js

Note that webpack.HotModuleReplacementPlugin is required to fully enable HMR. If webpack or webpack-dev-server are launched with the —hot option, this plugin will be added automatically, so you may not need to add this to your webpack.config.js . See the HMR concepts page for more information.

devServer.hotOnly

Enables Hot Module Replacement (see devServer.hot ) without page refresh as a fallback in case of build failures.

webpack.config.js

Usage via the CLI

devServer.http2

Serve over HTTP/2 using spdy. This option is ignored for Node 10.0.0 and above, as spdy is broken for those versions. The dev server will migrate over to Node’s built-in HTTP/2 once Express supports it.

If devServer.http2 is not explicitly set to false , it will default to true when devServer.https is enabled. When devServer.http2 is enabled but the server is unable to serve over HTTP/2, the server defaults to HTTPS.

HTTP/2 with a self-signed certificate:

webpack.config.js

Provide your own certificate using the https option:

webpack.config.js

To pass your own certificate via CLI, use the following options

devServer.https

By default, dev-server will be served over HTTP. It can optionally be served over HTTP/2 with HTTPS:

webpack.config.js

With the above setting, a self-signed certificate is used, but you can provide your own:

webpack.config.js

This object is passed straight to Node.js HTTPS module, so see the HTTPS documentation for more information.

Usage via the CLI

To pass your own certificate via the CLI use the following options

devServer.index

The filename that is considered the index file.

webpack.config.js

devServer.info — CLI only

Output cli information. It is enabled by default.

devServer.injectClient

boolean = false function (compilerConfig) => boolean

Tells devServer to inject a client. Setting devServer.injectClient to true will result in always injecting a client. It is possible to provide a function to inject conditionally:

devServer.injectHot

boolean = false function (compilerConfig) => boolean

Tells devServer to inject a Hot Module Replacement. Setting devServer.injectHot to true will result in always injecting. It is possible to provide a function to inject conditionally:

Make sure that devServer.hot is set to true because devServer.injectHot only works with HMR.

devServer.inline

Toggle between the dev-server’s two different modes. By default, the application will be served with inline mode enabled. This means that a script will be inserted in your bundle to take care of live reloading, and build messages will appear in the browser console.

It is also possible to use iframe mode, which uses an under a notification bar with messages about the build. To switch to iframe mode:

webpack.config.js

Usage via the CLI

Inline mode is recommended for Hot Module Replacement as it includes an HMR trigger from the websocket. Polling mode can be used as an alternative, but requires an additional entry point, ‘webpack/hot/poll?1000’ .

devServer.lazy 🔑

When devServer.lazy is enabled, the dev-server will only compile the bundle when it gets requested. This means that webpack will not watch any file changes. We call this lazy mode.

webpack.config.js

Usage via the CLI

watchOptions will have no effect when used with lazy mode.

If you use the CLI, make sure inline mode is disabled.

devServer.liveReload

By default, the dev-server will reload/refresh the page when file changes are detected. devServer.hot option must be disabled or devServer.watchContentBase option must be enabled in order for liveReload to take effect. Disable devServer.liveReload by setting it to false :

webpack.config.js

Usage via the CLI

devServer.mimeTypes 🔑

Allows dev-server to register custom mime types. The object is passed to the underlying webpack-dev-middleware . See documentation for usage notes.

webpack.config.js

devServer.noInfo 🔑

Tells dev-server to suppress messages like the webpack bundle information. Errors and warnings will still be shown.

webpack.config.js

devServer.onListening

Provides an option to execute a custom function when webpack-dev-server starts listening for connections on a port.

webpack.config.js

devServer.open

boolean = false string object

Tells dev-server to open the browser after server had been started. Set it to true to open your default browser.

webpack.config.js

Provide browser name to use instead of the default one:

webpack.config.js

If you want to use flags when opening the browser like opening an incognito window ( —incognito flag), you can set open to an object. The object accepts all open options, app property must be an array. The first element in the array must be the browser name and the other following elements are the flags you want to use. For example:

webpack.config.js

Usage via the CLI

The browser application name is platform dependent. Don’t hard code it in reusable modules. For example, ‘Chrome’ is ‘Google Chrome’ on macOS, ‘google-chrome’ on Linux and ‘chrome’ on Windows.

devServer.openPage

Specify a page to navigate to when opening the browser.

webpack.config.js

Usage via the CLI

If you wish to specify multiple pages to open in the browser.

webpack.config.js

Usage via the CLI

devServer.overlay

boolean = false object:

Shows a full-screen overlay in the browser when there are compiler errors or warnings. If you want to show only compiler errors:

webpack.config.js

If you want to show warnings as well as errors:

webpack.config.js

devServer.pfx

When used via the CLI, a path to an SSL .pfx file. If used in options, it should be the bytestream of the .pfx file.

webpack.config.js

Usage via the CLI

devServer.pfxPassphrase

The passphrase to a SSL PFX file.

webpack.config.js

Usage via the CLI

devServer.port

Specify a port number to listen for requests on:

webpack.config.js

Usage via the CLI

devServer.proxy

object [object, function]

Proxying some URLs can be useful when you have a separate API backend development server and you want to send API requests on the same domain.

The dev-server makes use of the powerful http-proxy-middleware package. Check out its documentation for more advanced usages. Note that some of http-proxy-middleware ‘s features do not require a target key, e.g. its router feature, but you will still need to include a target key in your configuration here, otherwise webpack-dev-server won’t pass it along to http-proxy-middleware ).

With a backend on localhost:3000 , you can use this to enable proxying:

webpack.config.js

A request to /api/users will now proxy the request to http://localhost:3000/api/users .

If you don’t want /api to be passed along, we need to rewrite the path:

webpack.config.js

A backend server running on HTTPS with an invalid certificate will not be accepted by default. If you want to, modify your configuration like this:

webpack.config.js

Sometimes you don’t want to proxy everything. It is possible to bypass the proxy based on the return value of a function.

In the function you get access to the request, response, and proxy options.

  • Return null or undefined to continue processing the request with proxy.
  • Return false to produce a 404 error for the request.
  • Return a path to serve from, instead of continuing to proxy the request.

E.g. for a browser request, you want to serve an HTML page, but for an API request you want to proxy it. You could do something like this:

webpack.config.js

If you want to proxy multiple, specific paths to the same target, you can use an array of one or more objects with a context property:

webpack.config.js

Note that requests to root won’t be proxied by default. To enable root proxying, the devServer.index option should be specified as a falsy value:

webpack.config.js

The origin of the host header is kept when proxying by default, you can set changeOrigin to true to override this behaviour. It is useful in some cases like using name-based virtual hosted sites.

webpack.config.js

devServer.progress — CLI only

Output running progress to console.

devServer.public

When using inline mode and you’re proxying dev-server, the inline client script does not always know where to connect to. It will try to guess the URL of the server based on window.location , but if that fails you’ll need to use this.

For example, the dev-server is proxied by nginx, and available on myapp.test :

webpack.config.js

Usage via the CLI

devServer.publicPath 🔑

The bundled files will be available in the browser under this path.

Imagine that the server is running under http://localhost:8080 and output.filename is set to bundle.js . By default the devServer.publicPath is ‘/’ , so your bundle is available as http://localhost:8080/bundle.js .

Change devServer.publicPath to put bundle under specific directory:

webpack.config.js

The bundle will now be available as http://localhost:8080/assets/bundle.js .

Make sure devServer.publicPath always starts and ends with a forward slash.

It is also possible to use a full URL.

webpack.config.js

The bundle will also be available as http://localhost:8080/assets/bundle.js .

It is recommended that devServer.publicPath is the same as output.publicPath .

devServer.quiet 🔑

With devServer.quiet enabled, nothing except the initial startup information will be written to the console. This also means that errors or warnings from webpack are not visible.

webpack.config.js

Usage via the CLI

devServer.serveIndex

Tells dev-server to use serveIndex middleware when enabled.

serveIndex middleware generates directory listings on viewing directories that don’t have an index.html file.

devServer.setup

function (app, server)

This option is deprecated in favor of devServer.before and will be removed in v3.0.0.

Here you can access the Express app object and add your own custom middleware to it. For example, to define custom handlers for some paths:

webpack.config.js

devServer.sockHost

Tells clients connected to devServer to use provided socket host.

webpack.config.js

devServer.sockPath

The path at which to connect to the reloading socket.

webpack.config.js

Usage via the CLI

devServer.sockPort

Tells clients connected to devServer to use provided socket port.

webpack.config.js

devServer.staticOptions

It is possible to configure advanced options for serving static files from contentBase . See the Express documentation for the possible options.

webpack.config.js

devServer.stats 🔑

string: ‘none’ | ‘errors-only’ | ‘minimal’ | ‘normal’ | ‘verbose’ object

This option lets you precisely control what bundle information gets displayed. This can be a nice middle ground if you want some bundle information, but not all of it.

To show only errors in your bundle:

webpack.config.js

This option has no effect when used with quiet or noInfo .

devServer.stdin — CLI only

This option closes the server when stdin ends.

devServer.transportMode

string = ‘sockjs’: ‘sockjs’ | ‘ws’ object

transportMode is an experimental option, meaning its usage could potentially change without warning.

Providing a string to devServer.transportMode is a shortcut to setting both devServer.transportMode.client and devServer.transportMode.server to the given string value.

This option allows us either to choose the current devServer transport mode for client/server individually or to provide custom client/server implementation. This allows to specify how browser or other client communicates with the devServer .

The current default mode is ‘sockjs’ . This mode uses SockJS-node as a server, and SockJS-client on the client.

‘ws’ mode will become the default mode in the next major devServer version. This mode uses ws as a server, and native WebSockets on the client.

When providing a custom client and server implementation make sure that they are compatible with one another to communicate successfully.

devServer.transportMode.client

To create a custom client implementation, create a class that extends BaseClient .

Using path to CustomClient.js , a custom WebSocket client implementation, along with the compatible ‘ws’ server:

devServer.transportMode.server

string path function

To create a custom server implementation, create a class that extends BaseServer .

Using path to CustomServer.js , a custom WebSocket server implementation, along with the compatible ‘ws’ client:

Using class exported by CustomServer.js , a custom WebSocket server implementation, along with the compatible ‘ws’ client:

Using custom, compatible WebSocket client and server implementations:

devServer.useLocalIp

This option lets the browser open with your local IP.

webpack.config.js

Usage via the CLI

devServer.watchContentBase

Tell dev-server to watch the files served by the devServer.contentBase option. It is disabled by default. When enabled, file changes will trigger a full page reload.

webpack.config.js

Usage via the CLI

devServer.watchOptions 🔑

Control options related to watching the files.

webpack uses the file system to get notified of file changes. In some cases, this does not work. For example, when using Network File System (NFS). Vagrant also has a lot of problems with this. In these cases, use polling:

webpack.config.js

If this is too heavy on the file system, you can change this to an integer to set the interval in milliseconds.

See WatchOptions for more options.

devServer.writeToDisk 🔑

boolean = false function (filePath) => boolean

Источник

Читайте также:  Настройка сервера на хостинге serva4ok
Adblock
detector