Webpack windows: Installation | webpack — Программирование на Python и Objective-C в Mac OS

Содержание

Установка webpack на Windows 10 Bash (Bash на Ubuntu на Windows). Продолжайте получать «webpack: команда не найдена»

Я работаю над этим учебником React/ Redux, и мне нужно установить webpack. Я работаю над Windows 10 bash shell. Вот команда npm, которую я использую для установки, и вывод установки:

~$ npm install --save-dev webpack webpack-dev-server
[email protected] /home/username/voting-client
+-- [email protected]
¦ +-- [email protected]
¦ +-- [email protected]
¦ +-- [email protected]
¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ +-- [email protected]
¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦   +-- [email protected]
¦ ¦   +-- [email protected]
¦ ¦   +-- [email protected]
¦ ¦   +-- [email protected]
¦ ¦   +-- [email protected]
¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ ¦ +-- [email protected]
¦ ¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ ¦ +-- [email protected]
¦ ¦ ¦ +-- [email protected]
¦ ¦ ¦ +-- [email protected]
¦ ¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ ¦ +-- [email protected]
¦ ¦ ¦ +-- [email protected]
¦ ¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ ¦ +-- [email protected]
¦ ¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦   +-- [email protected]
¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ +-- [email protected]
¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦   +-- [email protected]
¦ ¦   +-- [email protected]
¦ ¦   ¦ +-- [email protected]
¦ ¦   ¦ ¦ +-- [email protected]
¦ ¦   ¦ ¦ ¦ +-- [email protected]
¦ ¦   ¦ ¦ ¦ +-- [email protected]
¦ ¦   ¦ ¦ +-- [email protected]
¦ ¦   ¦ +-- [email protected]
¦ ¦   ¦ +-- [email protected]
¦ ¦   +-- [email protected]
¦ ¦   +-- [email protected]
¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦ +-- [email protected]
¦ ¦   +-- [email protected]
¦ ¦   ¦ +-- [email protected]
¦ ¦   +-- [email protected]
¦ ¦   +-- [email protected]
¦ ¦   +-- [email protected]
¦ ¦   ¦ +-- [email protected]
¦ ¦   +-- [email protected]
¦ ¦   +-- [email protected]
¦ ¦     +-- [email protected]
¦ ¦     ¦ +-- [email protected]
¦ ¦     ¦   +-- [email protected]
¦ ¦     ¦   +-- [email protected]
¦ ¦     +-- [email protected]
¦ +-- [email protected]
¦   +-- [email protected]
¦   +-- [email protected]
¦     +-- [email protected]
+-- [email protected]
  +-- [email protected]
  ¦ +-- [email protected]
  ¦ ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  +-- [email protected]
  +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ ¦ +-- [email protected]
  ¦ ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ ¦ +-- [email protected]
  ¦ ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ ¦ +-- [email protected]
  ¦ +-- [email protected]
  +-- [email protected]
  ¦ +-- [email protected]
  ¦ ¦ +-- [email protected]
  ¦ ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦   +-- [email protected]
  ¦   ¦ +-- [email protected]
  ¦   +-- [email protected]
  ¦   +-- [email protected]
  ¦   ¦ +-- [email protected]
  ¦   ¦ ¦ +-- [email protected]
  ¦   ¦ ¦   +-- [email protected]
  ¦   ¦ ¦   +-- [email protected]
  ¦   ¦ ¦   +-- [email protected]
  ¦   ¦ +-- [email protected]
  ¦   ¦ +-- [email protected]
  ¦   +-- [email protected]
  ¦   ¦ +-- [email protected]
  ¦   +-- [email protected]
  ¦   +-- [email protected]
  ¦   +-- [email protected]
  ¦   +-- [email protected]
  ¦   ¦ +-- [email protected]
  ¦   +-- [email protected]
  ¦   +-- [email protected]
  ¦   ¦ +-- [email protected]
  ¦   ¦ ¦ +-- [email protected]
  ¦   ¦ +-- [email protected]
  ¦   +-- [email protected]
  ¦   ¦ +-- [email protected]
  ¦   ¦ +-- [email protected]
  ¦   +-- [email protected]
  ¦     +-- [email protected]
  ¦     +-- [email protected]
  +-- [email protected]
  +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ ¦ +-- [email protected]
  ¦ +-- [email protected]
  +-- [email protected]
  ¦ +-- [email protected]
  ¦ ¦ +-- [email protected]
  ¦ ¦   +-- [email protected]
  ¦ +-- [email protected]
  +-- [email protected]
  ¦ +-- [email protected]
  ¦ ¦ +-- [email protected]
  ¦ ¦   +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦ +-- [email protected]
  ¦   +-- [email protected]
  +-- [email protected]
  +-- [email protected]
  ¦ +-- [email protected]
  +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]

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

~$ webpack
webpack: command not found

windows

bash

ubuntu

npm

webpack

Поделиться

Источник

Captain Stack

23 декабря 2016 в 02:56

3 ответа

Bash на Windows 10 не работает
Я планирую скомпилировать и запустить код в среде linux. Прежде чем перейти в среду linux, я хочу попробовать ее, virtual box и dual boot заберут мою память. Итак, после обновления моих юбилейных обновлений windows 10 я смог установить bash (ubuntu) изначально на мои функции windows 10 через…
sudo/apt-get команда не найдена в git bash
Я использую Windows 10 в своей машине и в настоящее время установил на нее git bash. Я хотел установить node и npm для своего приложения. когда я пытался : apt-get установка nodejs apt-get команда не найдена, Я попробовал Гугл и получил sudo установка nodejs sudo команда не найдена. Как…

Я думал, что это проблема с Windows Bash shell, но я подтвердил ту же проблему на Ubuntu VM и еще немного покопался. Установка глобально как суперпользователь заставила его работать:

sudo npm install i -g --save-dev webpack webpack-dev-server

Поделиться

Captain Stack

23 декабря 2016 в 06:12

tl;dr: попробуйте $ node_modules\.bin\webpack

Я предполагаю, что это не проблема bash, а для узла для windows в целом (и для любого пакета с cli).
(это потому, что у меня есть такие для любых снарядов). Чтобы решить эту проблему, проверьте некоторые моменты:

Убедитесь, что у вас установлен webpack: проверьте node_modules\.bin\webpack.cmd в папке проекта. Он должен существовать. ( примечание : если вы ввели его с -g , вам нужно проверить его в ...NodeJS\core\node_modules_global\
Как вы начинаете свой shell работать с узлом? В NodeJS\core есть nodevars.bat , который вам нужно запускать каждый раз, чтобы настроить некоторую среду перед работой с узлом (извините, я не знаком с вашим bash shell, поэтому вам нужно найти способ предварительно запустить этот файл bat)
Наконец, вам нужно убедиться, что у вас есть node_modules\.bin в вашем Path , это основная причина, по которой вы видите webpack: command not found . Просто добавьте этот путь (относительный как node_modules\.bin или абсолютный D:\your_project_path\node_modules\.bin ) в ваш Path var. (или попробуйте запустить его через node_modules\.bin\webpack.com

Поделиться

Oleg Pro

23 декабря 2016 в 16:59

У меня были те же проблемы, когда я установил webpack, как это:
«sudo npm install —save-dev webpack» он выдал мне ту же ошибку: «webpack: команда не найдена», я работаю над Ubuntu 16.04.
Установка его глобально исправила проблему: sudo npm install —save-dev webpack-g «

Поделиться

Alin Faur

23 декабря 2016 в 11:47

Windows 10: bash: behat: команда не найдена ошибка
Когда я запускаю behat -v (или любую другую команду Behat) в Git bash, я получаю следующую ошибку bash: behat: команда не найдена Он прекрасно работает в командной строке Windows. Я пробовал установить Git с различными опциями, такими как использовать Git только из Git Bash, использовать Git из…
Используйте Cmder с Bash на Ubuntu на Windows 10
Я новичок в bash и командной строке, друг посоветовал мне использовать Bash с Cmder, поэтому я скачал его здесь : http://cmder.net/ (mini) Проблема в том, что когда я открываю его, он эмулирует стандартную командную строку, а не Bash. Я не могу найти, где я могу настроить его. Когда я говорю Bash,…

Введение в Webpack для новичков. Что такое Webpack? | by Саша Азарова | NOP::Nuances of Programming

Webpack — это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл. Webpack также известен как сборщик модулей.

При большом количестве файлов он создает один объемный файл (или несколько файлов) для запуска вашего приложения.

Он также способен выполнять множество иных операций:

помогает собрать воедино ваши ресурсы
следит за изменениями и повторно выполняет задачи
может выполнить транспиляцию JavaScript следующего поколения до более старого стандарта JavaScript (ES5) с помощью Babel, что позволит использовать новейшие функции JavaScript, не беспокоясь о том, поддерживает их браузер или нет
может выполнить транспиляцию CoffeeScript в JavaScript
может конвертировать встроенные изображения в data:URI
позволяет использовать require() для CSS файлов
может запустить webpack-dev-server (в нём встроен локальный сервер и livereload (“живая перезагрузка браузера”))
может работать с Hot Module Replacement (замена горячего модуля)
может разделить выходной файл (output file) на несколько файлов, чтобы избежать медленной загрузки страницы из-за большого размера JS-файла
может выполнить Tree Shaking

Webpack не ограничивается одним лишь фронтендом, его также успешно применяют в бэкенд разработке на Node.js.

У Webpack есть предшественники, у которых он перенял многие идеи. Основное различие заключается в том, что те инструменты известны как task runners (такс-раннеры), в то время как Webpack ничто иное, как сборщик модулей.

Webpack — это более целенаправленный инструмент. Вам достаточно указать точку входа в ваше приложение (это может быть даже HTML-файл с тегами <script>), а webpack проанализирует файлы и объединит их в один выходной JavaScript-файл, содержащий все необходимое для запуска приложения.

Webpack может быть установлен глобально или локально для каждого проекта.

Глобальная установка

Глобальная установка с помощью Yarn:

yarn global add webpack webpack-cli

с помощью npm:

npm i -g webpack webpack-cli

Теперь мы можем запустить webpack:

webpack-cli

Локальная установка

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

Установка с помощью Yarn:

yarn add webpack webpack-cli -D

с помощью npm:

npm i webpack webpack-cli --save-dev

После этого добавьте эти строчки в свой package.json файл:

{ 
//... 
"scripts": { 
"build": "webpack" 
} 
}

Как только все будет сделано, вы можете запустить Webpack, набрав:

yarn build

в корневом каталоге проекта.

По умолчанию, Webpack (начиная с 4-й версии) не требует никакой настройки, если вы соблюдаете эти правила:

точкой входа вашего приложения является ./src/index.js
вывод (output) размещается в ./dist/main.js
Webpack работает в production mode (режим производства)

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

Точка входа

По умолчанию, точкой входа является ./src/index.js. Нижеприведенный пример использует файл ./index.js в качестве входной точки.

module.exports = {
/*...*/
entry: './index.js'
/*...*/
}

Вывод (output)

По умолчанию, вывод размещается в ./dist/main.js. В нижеприведенном примере, результат работы в Webpack генерируется в файле app.js:

module.exports = {
/*...*/
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
}
/*...*/
}

С помощью Webpack можно использовать оператор import или require в своем JavaScript коде для того, чтобы подключать файлы любого типа (например, CSS).

В Webpack загрузчики являются аналогами задач (tasks) в Grunt и Gulp. Они принимают содержимое файлов, а затем преобразуют его необходимым образом и включают результат преобразования в общую сборку. Например, они могут компилировать TypeScript, загружать компоненты Vue.js и многое другое.

Например, в своем коде вы можете использовать:

import 'style.css'

указав конфигурацию данного загрузчика в файле webpack.config.js:

module.exports = {
/*...*/
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
}]
}
/*...*/
}

Регулярное выражение применяет данный загрузчик только к CSS файлам.

У загрузчика есть параметры:

module.exports = {
/*...*/
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
/*...*/
}

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

module.exports = {
/*...*/
module: {
rules: [
{
test: /\.css$/,
use:
[
'style-loader',
'css-loader',
]
}
]
}
/*...*/
}

В этом примере css-loader интерпретирует директиву import 'style.css' в CSS. Затем style-loader внедряет этот CSS в DOM, используя тег <style>.

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

Так сколько всего существует загрузчиков? Очень много! Здесь вы сможете найти полный список.

Самым часто используемым загрузчиком является Babel — он используется для транспиляции современного JavaScript в ES5:

module.exports = {
/*...*/
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
/*...*/
}

Данный пример заставляет Babel предварительно обрабатывать все наши React/JSX файлы:

module.exports = {
/*...*/
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
resolve: {
extensions: [
'.js',
'.jsx'
]
}
/*...*/
}

Здесь вы можете увидеть параметры babel-loader.

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

Рассмотрим следующий пример:

module.exports = {
/*...*/
plugins: [
new HTMLWebpackPlugin()
]
/*...*/
}

Плагин HTMLWebpackPlugin автоматически создает HTML-файл с уже подключенным скриптом.

Здесь доступно множество плагинов.

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

module.exports = {
/*...*/
plugins: [
new CleanWebpackPlugin(['dist']),
]
/*...*/
}

Данные режимы (появившиеся в 4-й версии Webpack) настраивают среду, в которой будет работать Webpack. Режим может быть настроен на development или production (по умолчанию стоит production).

module.exports = {
entry: './index.js',
mode: 'development',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
}
}

Режим development:

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

Режим production работает медленнее, чем development, так как ему нужно создать более оптимизированный бандл. Полученный JavaScript файл меньше по размеру, поскольку многое из режима development в нем отсутствует.

Я написал небольшое приложение, которое выводит содержимое console.log.

Вот бандл production:

Вот бандл development:

Если Webpack установлен глобально, его можно вручную запустить из командной строки. Но, обычно, вы прописываете скрипт внутри файла package.json, который затем запускаете через npm или yarn.

Например, эти package.json скрипты, которые мы использовали ранее:

"scripts": {
"build": "webpack"
}

позволяют запускать webpack, набрав:

npm run build

или:

yarn run build

или просто:

yarn build

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

"scripts": {
"watch": "webpack --watch"
}

и запустите данную функцию:

npm run watch

или:

yarn run watch

или просто:

yarn watch

Одной из приятных особенностей watch mode (режима просмотра) является то, что бандл изменяется только в том случае, если в сборке нет ошибок. Если ошибки присутствуют, watch продолжит следить за изменениями и будет пытаться перестраивать бандл, но текущий, рабочий бандл не зависит от проблемных бандлов.

С помощью Webpack можно очень удобно работать с изображениями, используя загрузчик file-loader.

Эта простая конфигурация:

module.exports = {
/*...*/
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
/*...*/
}

Позволяет импортировать изображения в ваш JavaScript:

import Icon from './icon.png'const img = new Image()
img.src = Icon
element.appendChild(img)

Где img — это HTMLImageElement. Ознакомьтесь с документацией по Image().

file-loader может обрабатывать и другие типы ассетов, например, шрифты, CSV-файлы, XML и т.д.

Еще одним приятным инструментом для работы с изображениями является url-loader загрузчик.

В этом примере загружается любой PNG-файл размером менее 8 КБ в качестве data:URL.

module.exports = {
/*...*/
module: {
rules: [
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
/*...*/
}

Используйте sass-loader, css-loader и style-loader:

module.exports = {
/*...*/
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
}
/*...*/
}

С транспилированным кодом, зачастую, возникают проблемы при отладке кода в браузере или анализе ошибок. Так как транспилированный и трудночитаемый JavaScript, а не оригинальный код, затрудняет поиск и исправление ошибок. Source Map — это JSON-файл, который содержит информацию о том, как транспилировать код обратно в исходный код.

Source Maps можно сгенерировать, используя свойство конфигурации devtool:

module.exports = {
/*...*/
devtool: 'inline-source-map',
/*...*/
}

devtool имеет множество возможных значений, из которых наиболее часто используемые:

none: не добавляет Source Maps
source-map: идеально подходит для режима production, предоставляет отдельную Source Map, которую можно свернуть и добавляет ссылку в бандл, чтобы инструменты разработки знали о том, что Source Map доступна
inline-source-map: идеально подходит для режима development, встраивает Source Maps в качестве data:URL

Перевод статьи Flavio Copes: A beginner’s introduction to Webpack

javascript — Как я могу остановить сервер Webpack Dev из консоли Windows?

Я запускаю webpack-dev-server из консоли Windows с помощью команды:

webpack-dev-server —content-base ./build —inline —hot

После этого я вижу сообщение webpack: bundle is now VALID. и ничего не могу напечатать . Но если я что-то изменяю в webpack.config.js, мне нужно закрыть консоль, открыть ее снова и запустить webpack-dev-server для применения моих изменений. Как я могу остановить сервер веб-упаковки без закрытия консоли?

Rajab Shakirov

28 Апр 2016 в 20:28

7 ответов

Лучший ответ

Вам нужно всего лишь дважды нажать Ctrl + C

thitemple
28 Апр 2016 в 17:42

В моем случае достаточно было один раз нажать Ctrl + C. CTerateate пакетное задание (Да / Нет)?

После подтверждения первого отображается обычная командная строка. Но я должен еще раз написать удар «Y» и подтвердить, что подтверждает второе завершение фонового задания. В противном случае он останется сиротой.

Michal Filip
19 Апр 2017 в 08:29

Я запускаю webpack devserver, выполнив команду «npm start». Я обнаружил, что CTRL + C не работает для меня, а просто создает потерянный процесс. Я могу убить devserver, открыв диспетчер задач и уничтожив все запущенные процессы node.exe.

Другой способ сделать это из простой консоли Windows jane — найти идентификаторы процессов узла и уничтожить их.

tasklist /FI "IMAGENAME eq node.exe"

Image Name                     PID Session Name        Session#    Mem Usage
========================= ======== ================ =========== ============
node.exe                      4620 Console                    2     44,568 K
node.exe                     12452 Console                    2    486,260 K

Затем убейте их с помощью следующей команды.

taskkill /F /PID 4620 /PID 12452

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

taskkill /F /IM node.exe

Jason Slobotski
26 Ноя 2018 в 23:59

Похоже, в Git Bash есть ошибка, которая неправильно отправляет сигнал на узел.

Я создал этот скрипт bash:

echo killing process on port $1

taskkill //PID `netstat -aon | grep $1 | grep -P '(?=LISTENING).*' -o -m1 | grep -P '\d*' -o` //F

Добавить добавить его в свой PATH

Запустить с kill.sh 8000, например.| findstr LISTENING’) do taskkill /pid %%a /f && echo killed PID %%a

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

kill-server 8080

С другой стороны, эта проблема, по-видимому, возникает для меня только при использовании инструментов эмуляции консоли, а не при непосредственном использовании командной строки Windows.

Jordan Watkins
18 Мар 2017 в 19:52

Как я могу остановить сервер webpack dev без закрытой консоли?

Перейдите в диспетчер задач и закройте задачу Node.js: Server-side JavaScript.

Fabian Picone
23 Окт 2018 в 07:07

Отладка на локальных устройствах приложений под webpack-dev-server

Почти каждый разработчик использовавший webpack-dev-server сталкивался с проблемой отладки локального приложения на мобильных или прочих устройствах находящимися под NAT.
На гугл-просторах каждый вторит о дополнительном параметре --host 0.0.0.0 или localhost для запуска webpack-dev-server и то, что после этого приложение будет доступно по локалной сети.
Но увы, лично у меня данный метод не работает, причем отказывается работать даже на простейших тестовых проектах, приложеных к решениям.

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

1. Узнаем текущий IP

Узнать IP машины можно следующими командами ipconfig (Windows) или ifconfig (Linux).

2. Запускаем

webpack-dev-server

Запускаем webpack-dev-server на этот IP. К примеру, если имеем конфигурацию следующего вида:

 devServer: {
    hot: true,
    contentBase: resolve(__dirname, 'dist'),
    publicPath: '/',
    host: 'localhost',
    port: 7373,
    proxy: {
      '/api/**': {
        target: 'localhost:8000',
        secure: false,
        changeOrigin: true,
      }
    },
  },

То заменяем на:

 devServer: {
    hot: true,
    contentBase: resolve(__dirname, 'dist'),
    publicPath: '/',
    host: '192.168.3.186'
    port: 7373,
    proxy: {
      '/api/**': {
        target: '192.168.3.186:8000',
        secure: false,
        changeOrigin: true,
      }
    },
  },

3. Отключаем Firewall

Отключаем Public Firewall в Windows Defender или лю другой, если используется сторонний.

4. Готово.

Можно использовать на других устройствах, обращаясь по адресу машины на котором запущен dev-server, не забывая указывать нужный порт. В данном случае 192.168.3.186:7373.

Очень надеюсь, что мой метод кому-то сохранит время. Удачного дебага!

Ах да, чуть ниже можно подписаться на новости блога.

webpacker 🚀 — Запуск скрипта webpack внутри проекта Rails в Windows 10 x64 не работает

Вы хотите запросить функцию или сообщить об ошибке ?

ОШИБКА

Каково текущее поведение?

Запуск скрипта webpack внутри проекта Rails в Windows 10 x64 работает некорректно. То же самое и с rake webpacker: compile или webpack-watcher. Чтобы исправить первую проблему (bin / webpack), я удалил NODE_PATH = # {NODE_MODULES_PATH} из exec (строка 38)

Кажется, что среда должна быть установлена перед exec для Windows

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

Для первого:

$ ./bin/webpack
./bin/webpack:38:in `exec': Invalid argument - NODE_PATH=E:/buk/node_modules E:/buk/node_modules/.bin/webpack --config E:/buk/config/webpack/development.js  (Errno::EINVAL)
        from ./bin/webpack:38:in `block in <main>'
        from ./bin/webpack:37:in `chdir'
        from ./bin/webpack:37:in `<main>'

Второй:

$ rake webpacker:compile
Webpacker is installed 🎉 🍰
Using E:/buk/config/webpack/paths.yml file for setting up webpack paths
Compiling webpacker assets 🎉
C:/RailsInstaller/Ruby2.3.0/bin/rake: No such file or directory - NODE_ENV=production ./bin/webpack
rake aborted!
NoMethodError: undefined method `success?' for nil:NilClass

Третий:

$ bin/webpack-watcher
bin/webpack-watcher:9:in `exec': Exec format error - ./webpack --watch --progress --color  (Errno::ENOEXEC)
        from bin/webpack-watcher:9:in `block in <main>'
        from bin/webpack-watcher:8:in `chdir'
        from bin/webpack-watcher:8:in `<main>'

Задачи: TOP => webpacker: компилировать
(Просмотрите полную трассировку, запустив задачу с —trace)

Пожалуйста, укажите другую соответствующую информацию, такую как версия браузера, версия Node.js, версия веб-пакета и операционная система.

Версия Node.js: 7.8
Версия Webpack: 2.3.2
Windows 10 x64

Эта проблема была перемещена из webpack / webpack # 4661 пользователем @sokra. Оригинальный выпуск принадлежит @ jarrieta86.

Установка | webpack

В этом руководстве рассматриваются различные методы, используемые для установки webpack.

Предварительные требования

Прежде чем мы начнем, убедитесь, что у вас установлена свежая версия Node.js. Текущая версия долгосрочной поддержки (LTS) — идеальная отправная точка. Вы можете столкнуться с множеством проблем со старыми версиями, поскольку в них может отсутствовать функциональность, необходимая для веб-пакета и / или связанных с ним пакетов.

Локальная установка

Последний выпуск webpack:

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

  npm install --save-dev webpack

npm install --save-dev webpack @

tip

Использовать ли --save-dev или нет, зависит от ваших вариантов использования.Допустим, вы используете webpack только для сборки, тогда вам предлагается установить его с опцией --save-dev , поскольку вы не собираетесь включать webpack в свою производственную сборку. В противном случае вы можете игнорировать --save-dev .

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

  npm install --save-dev webpack-cli

Локальная установка — это то, что мы рекомендуем для большинства проектов.Это упрощает индивидуальное обновление проектов при внесении критических изменений. Обычно webpack запускается через один или несколько сценариев npm, которые будут искать установку webpack в вашем локальном каталоге node_modules :

  "scripts": {
  "build": "webpack --config webpack.config.js"
}

tip

Чтобы запустить локальную установку webpack, вы можете получить доступ к его бинарной версии как node_modules / .bin / webpack . В качестве альтернативы, если вы используете npm v5.2.0 или выше, для этого можно запустить npx webpack .

Глобальная установка

Следующая установка NPM сделает webpack доступным глобально:

  npm install --global webpack

предупреждение

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

Bleeding Edge

Если вы с энтузиазмом относитесь к использованию последних версий webpack, вы можете установить бета-версии или даже прямо из репозитория webpack, используя следующие команды:

  npm install --save-dev webpack @ next

npm install --save-dev webpack / webpack

warning

Будьте осторожны при установке этих новейших выпусков! Они все еще могут содержать ошибки и поэтому не должны использоваться в производственной среде.

Концепции | webpack

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

tip

Узнайте больше о модулях JavaScript и модулях webpack здесь.

Начиная с версии 4.0.0, веб-пакет не требует файла конфигурации для объединения вашего проекта.Тем не менее, его невероятно легко настроить, чтобы он лучше соответствовал вашим потребностям.

Для начала вам нужно только понять основные концепции :

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

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

Запись

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

По умолчанию его значение — ./src/index.js , но вы можете указать другое (или несколько точек входа), установив свойство entry в конфигурации webpack. Например:

webpack.config.js

  module.exports = {
  запись: './path/to/my/entry/file.js',
};

подсказка

Подробнее читайте в разделе «Точки входа».

Выходные данные

Свойство выходных данных сообщает webpack, где создавать пакеты , которые он создает, и как назвать эти файлы. По умолчанию это ./dist/main.js для основного выходного файла и папка ./dist для любого другого сгенерированного файла.

Вы можете настроить эту часть процесса, указав поле output в вашей конфигурации:

webpack.config.js

  const path = require ('path');

модуль.export = {
  запись: './path/to/my/entry/file.js',
  выход: {
    путь: path.resolve (__ dirname, 'dist'),
    имя файла: 'my-first-webpack.bundle.js',
  },
};

В приведенном выше примере мы используем свойства output.filename и output.path , чтобы сообщить webpack имя нашего пакета и куда мы хотим его отправить. Если вам интересно, какой модуль пути импортируется вверху, это основной модуль Node.js, который используется для управления путями к файлам.

tip

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

Загрузчики

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

предупреждение

Обратите внимание, что возможность импортировать любого типа модуля, например.г. .css файлов, это особенность, специфичная для webpack, которая может не поддерживаться другими сборщиками или программами запуска задач. Мы считаем, что это расширение языка оправдано, поскольку оно позволяет разработчикам построить более точный граф зависимостей.

На высоком уровне загрузчики имеют два свойства в конфигурации вашего веб-пакета:

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

webpack.config.js

  const path = require ('path');

module.exports = {
  выход: {
    имя файла: 'my-first-webpack.bundle.js',
  },
  модуль: {
    правила: [{test: /\.txt$/, используйте: 'raw-loader'}],
  },
};

В приведенной выше конфигурации определено свойство rules для одного модуля с двумя обязательными свойствами: test и use . Это сообщает компилятору webpack следующее:

«Привет, компилятор webpack, когда вы встречаете путь, который разрешается в ‘.txt ‘внутри оператора require () / import , используйте raw-loader , чтобы преобразовать его перед добавлением в пакет. «

warning

Важно помнить, что при определении правил в конфигурации вашего веб-пакета вы определяете их в разделе module.rules , а не в правилах . В ваших интересах webpack предупредит вас, если это будет сделано неправильно.

предупреждение

Имейте в виду, что при использовании регулярного выражения для сопоставления файлов вы не можете его цитировать.т.е. /\.txt$/ — это не то же самое, что '/\.txt$/' или "/\.txt$/" . Первый инструктирует webpack сопоставлять любой файл, который заканчивается на .txt, а второй инструктирует webpack сопоставлять одиночный файл с абсолютным путем ‘.txt’; это скорее всего не ваше намерение.

Вы можете проверить дальнейшую настройку при включении загрузчиков в раздел загрузчиков.

Плагины

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

tip

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

Чтобы использовать плагин, вам необходимо require () его и добавить в массив plugins . Большинство плагинов можно настроить с помощью параметров. Поскольку вы можете использовать плагин несколько раз в конфигурации для разных целей, вам необходимо создать его экземпляр, вызвав его с помощью оператора new .

webpack.config.js

  const HtmlWebpackPlugin = require ('html-webpack-plugin');
const webpack = require ('webpack');

модуль.export = {
  модуль: {
    правила: [{test: /\.txt$/, используйте: 'raw-loader'}],
  },
  плагины: [новый HtmlWebpackPlugin ({template: './src/index.html'})],
};

В приведенном выше примере html-webpack-plugin генерирует HTML-файл для вашего приложения, автоматически внедряя все ваши сгенерированные пакеты.

подсказка

Есть много плагинов, которые webpack предоставляет из коробки! Ознакомьтесь со списком плагинов.

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

Mode

Установив для параметра mode значение development , production или none , вы можете включить встроенные оптимизации webpack, соответствующие каждой среде. Значение по умолчанию — , производство .

  module.exports = {
  режим: 'производство',
};

Подробнее о конфигурации режима и оптимизации каждого значения.

Совместимость с браузером

webpack поддерживает все браузеры, совместимые с ES5 (IE8 и ниже не поддерживаются). webpack требуется Promise для импорта () и require.ensure () . Если вы хотите поддерживать старые браузеры, вам нужно будет загрузить полифилл перед использованием этих выражений.

Среда

webpack 5 работает на Node.js версии 10.13.0+.

Внести вклад | webpack

Люди, которые вносят свой вклад в webpack, делают это из любви к открытому исходному тексту, нашим пользователям и экосистеме, и, что наиболее важно, вместе продвигают Интернет.Благодаря нашей модели финансирования и прозрачности открытого коллектива, мы можем направлять поддержку и средства через участников, зависимые проекты, а также участников и основные команды. Чтобы сделать пожертвование, нажмите кнопку ниже …

Но каков возврат инвестиций?

Разработчики

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

Чем могу помочь?

Кто угодно может помочь, выполнив любое из следующих действий:

Поощрение работодателей

Вы можете попросить своего работодателя улучшить ваш рабочий процесс, используя webpack: универсальный инструмент для шрифтов, изображений и оптимизации изображений, а также json. Объясните им, как webpack будет пытаться объединить ваш код и ресурсы наилучшим образом для минимального размера файла, что приведет к ускорению работы сайтов и приложений.

Ваши взносы

Участие в webpack не означает вклад в эксклюзивный клуб.Вы, как разработчик, вносите свой вклад в общее состояние последующих проектов. Сотни, если не тысячи, проектов зависят от webpack, и их участие сделает экосистему лучше для всех пользователей.

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

Руководители

Технические директора, вице-президенты и владельцы тоже могут помочь!

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

Помимо денежной помощи, компании могут поддерживать webpack:

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

Вы также можете поощрять своих разработчиков вносить свой вклад в экосистему, открывая загрузчики веб-пакетов, плагины и другие утилиты. И, как упоминалось выше, мы будем очень признательны за любую помощь в расширении нашей инфраструктуры CI / CD.

Всем остальным

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

Запросы на вытягивание

Документация по функциям и изменениям webpack теперь обновляется по мере развития webpack. Интеграция автоматического создания задач была создана и доказала свою эффективность в последние годы. Когда функция объединяется, в нашем репозитории создается проблема с запросом документации, и мы надеемся решить ее своевременно. Это означает, что есть функции, изменения и критические изменения, ожидающие документирования, проверки и выпуска. При этом, если автор запроса на слияние отказывается от него более 30 дней, мы можем пометить такой запрос на слияние как устаревший.Мы можем взять на себя работу, необходимую для ее завершения. Если автор Pull Request предоставит доступ на запись к своей вилке команде документации webpack, мы передадим ее прямо в вашу ветку и завершим работу. В других случаях нам, возможно, придется начать все сначала самостоятельно или делегируя это желающим членам сообщества. Это может сделать ваш запрос на слияние избыточным, и он может быть закрыт как часть процесса очистки.

Конфигурация | webpack

По умолчанию webpack не требует использования файла конфигурации.Однако он будет предполагать, что точкой входа вашего проекта является src / index.js , и выведет результат в виде dist / main.js , уменьшенного и оптимизированного для производства.

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

Все доступные параметры конфигурации указаны ниже.

подсказка

Новичок в webpack? Ознакомьтесь с нашим руководством по некоторым основным концепциям webpack, чтобы начать работу!

Использовать другой файл конфигурации

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

package.json

  "scripts": {
  "build": "webpack --config prod.config.js"
}

Опции

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

предупреждение

Обратите внимание, что на протяжении всей конфигурации мы используем встроенный модуль пути Node и добавляем к нему префикс __dirname global.Это предотвращает проблемы с путями к файлам между операционными системами и позволяет относительным путям работать должным образом. См. Этот раздел для получения дополнительной информации о путях POSIX и Windows.

предупреждение

Обратите внимание, что многие конфигурации массивов позволяют ссылаться на значение по умолчанию через «...» .

webpack.config.js

  const path = require ('path');

module.exports = {
  режим: "производство",
  
  запись: "./app/entry",
  
  
  
  выход: {
    
    путь: путь.resolve (__ dirname, "dist"),
    
    
    имя файла: "[имя] .js",
    
    publicPath: "/ assets /",
    
    библиотека: {
      тип: "umd",
      
      имя: "MyLibrary",
      

      
    },
    uniqueName: "мое приложение",
    
    name: "my-config",
    
    
    
    
  },
  модуль: {
    
    правила: [
      
      {
        
        тест: /\.jsx?$/,
        включают: [
          path.resolve (__ dirname, "приложение")
        ],
        исключать: [
          path.resolve (__ dirname, "приложение / демо-файлы")
        ],
        
        
        
        
        
        
        
        
        
        эмитент: / \.css $ /,
        эмитент: path.resolve (__ dirname, "app"),
        эмитент: {и: [/\.css$/, path.resolve (__ dirname, "app")]},
        эмитент: {или: [/\.css$/, path.resolve (__ dirname, "app")]},
        эмитент: {not: [/\.css$/]},
        эмитент: [/\.css$/, path.resolve (__ dirname, "app")],
        
        

        
        загрузчик: "бабель-погрузчик",
        
        опции: {
          предустановки: ["es2015"]
        },
        
        использовать: [
          
          "htmllint-loader",
          {
            загрузчик: "html-loader",
            опции: {
              
            }
          }
        ],
        тип: "javascript / auto",
        
        
      },
      {
        один из: [
          
        ]
        
      },
      {
        
        правила: [
          
        ]
        
      },
    ],
    
  },
  разрешить: {
    
    
    модули: ["node_modules", путь.решить (__ dirname, "приложение")],
    
    расширения: [".js", ".json", ".jsx", ".css"],
    
    псевдоним: {
      
      
      "модуль": "новый модуль",
      
      "only-module $": "новый-модуль",
      
      "модуль": path.resolve (__ dirname, "app / third / module.js"),
      
      "модуль": path.resolve (__ dirname, "приложение / третье"),
      
      [path.resolve (__ dirname, "app / module.js")]: path.resolve (__ dirname, "app / alternate-module.js"),
      
    },
    
    
    
  },
  представление: {
    подсказки: "предупреждение",
    maxAssetSize: 200000,
    maxEntrypointSize: 400000,
    assetFilter: function (assetFilename) {
      
      вернуть assetFilename.@ angular /],
  
  externalsType: "var",
  
  externalsPresets: {},
  
  ignoreWarnings: [/ предупреждение /],
  статистика: "только ошибки",
  статистика: {
    
    пресет: "только ошибки",
    

    

    env: правда,
    
    outputPath: истина,
    
    publicPath: правда,
    

    активы: правда,
    
    

    точки входа: правда,
    
    chunkGroups: правда,
    
    

    куски: правда,
    
    

    модули: правда,
    
    
    

    

    дети: правда,
    

    ведение журнала: правда,
    
    loggingDebug: / webpack /,
    
    loggingTrace: истина,
    

    предупреждения: правда,
    

    ошибки: правда,
    
    errorDetails: правда,
    
    errorStack: правда,
    
    moduleTrace: истина,
    
    

    builtAt: правда,
    
    errorsCount: true,
    
    warningsCount: true,
    
    тайминги: правда,
    
    версия: правда,
    
    хеш: правда,
    
  },
  devServer: {
    прокси: {
      '/ api': 'http: // локальный: 3000'
    },
    contentBase: путь.присоединиться (__ dirname, 'public'),
    сжатие: истина,
    historyApiFallback: правда,
    горячий: правда,
    https: ложь,
    noInfo: правда,
    
  },
  эксперименты: {
    asyncWebAssembly: истина,
    
    syncWebAssembly: истина,
    
    outputModule: истина,
    
    topLevelAwait: правда,
    
  },
  плагины: [
    
  ],
  
  оптимизация: {
    chunkIds: "размер",
    
    moduleIds: "размер",
    
    mangleExports: "размер",
    
    свести к минимуму: правда,
    
    минимизатор: [новый CssMinimizer (), "..."],
    

    

    splitChunks: {
      cacheGroups: {
        "мое имя": {
          
          
          контрольная работа: /\.дерзость $ /,
          тип: "css / mini-extract",

          

          
        }
      },

      fallbackCacheGroup: {}

      

      

      
    }
  },
  
  
  
}

предупреждение

webpack применяет значения конфигурации по умолчанию после применения значений по умолчанию для подключаемых модулей.

Используйте команду webpack-cli init , чтобы быстро сгенерировать файл конфигурации webpack для требований вашего проекта, она задаст вам несколько вопросов перед созданием файла конфигурации.

  npx webpack-cli init

npx может предложить вам установить @ webpack-cli / init , если он еще не установлен в проекте или глобально.Вы также можете установить дополнительные пакеты в свой проект в зависимости от выбора, сделанного вами во время создания конфигурации.

  npx webpack-cli init

ℹ ИНФОРМАЦИЯ Для получения дополнительной информации и подробного описания каждого вопроса посетите https://github.com/webpack/webpack-cli/blob/master/INIT.md
ℹ ИНФОРМАЦИЯ. Можно также запустить `webpack (-cli) --help` для получения информации об использовании.

? Будет ли в вашем приложении несколько пакетов? Нет
? Какой модуль первым войдет в приложение? [дефолт: ./ src / index]
? В какой папке будут ваши сгенерированные пакеты? [по умолчанию: расстояние]:
? Вы будете использовать ES2015? да
? Будете ли вы использовать одно из приведенных ниже решений CSS? Нет

+ [email protected]
+ [email protected]
+ [email protected]
+ @ babel / core @ 7.2.2
+ [email protected]
+ @ babel / preset-env @ 7.1.0
+ [email protected]
добавлено 124 пакета от 39 участников, обновлено 4 пакета и проверено 25221 пакет за 7,463 сек.
найдено 0 уязвимостей


Поздравляю! Ваш новый файл конфигурации webpack создан!

createapp.dev — создание конфигурации веб-пакета в вашем браузере — это онлайн-инструмент для создания пользовательской конфигурации веб-пакета. Это позволяет вам выбирать различные функции, которые будут объединены и добавлены в результирующий файл конфигурации. Кроме того, он создает пример проекта на основе предоставленной конфигурации веб-пакета, который вы можете просмотреть в своем браузере и загрузить.

node.js — NodeJS — Как правильно установить и запустить Webpack в Windows 10?

Я загрузил существующий веб-проект и попытался запустить:
webpack — смотреть — прогресс

, но он продолжает говорить:

  webpack - смотреть - прогресс
Должен быть установлен один интерфейс командной строки для веб-пакета.3.0.0, но ничего не установлено. Вы должны сами установить одноранговые зависимости.
npm WARN необязательно ПРОПУСК ДОПОЛНИТЕЛЬНОЙ ЗАВИСИМОСТИ: [email protected] (node_modules \ fsevents):
npm WARN notsup ПРОПУСК ДОПОЛНИТЕЛЬНОЙ ЗАВИСИМОСТИ: неподдерживаемая платформа для [email protected]: требуется {"os": "darwin", "arch": "any"} (текущая: {"os": "win32", "arch": "x64"})

+ [email protected]
добавил 2 пакета от 2 участников, удалил 1 пакет, обновил 3 пакета и проверил 24726 пакетов за 16.453 с.
обнаружена 1 уязвимость высокой степени серьезности
  запустите `npm audit fix`, чтобы исправить их, или` npm audit` для подробностей
{Ошибка: не удается найти модуль webpack-cli
    в функции.Module._resolveFilename (внутренний / модули / cjs / loader.js: 580: 15)
    в Function.Module._load (internal / modules / cjs / loader.js: 506: 25)
    в Module.require (internal / modules / cjs / loader.js: 636: 17)
    при необходимости (внутренние / модули / cjs / helpers.js: 20:18)
    в runCommand.then (... \ AppData \ Roaming \ npm \ node_modules \ webpack \ bin \ webpack.js: 142: 5)
    в process._tickCallback (internal / process / next_tick.js: 68: 7) код: 'MODULE_NOT_FOUND'}

Требуется ли для WebPack конкретная версия NPM / узла? (возможно, более новая версия несовместима со старой)..

webpack — npm

Содержание

Установить
Введение
Концепции
Содействующие
Поддержка
Основная команда
Спонсорство
Премиум-партнеры
Другие спонсоры и спонсоры
Золотые спонсоры
Серебряных спонсоров
Бронзовые спонсоры
Сторонники
Особая благодарность

Установить

Установить с npm:

 npm install --save-dev webpack

Установить с пряжей:

Введение

Webpack — это сборщик модулей.Основная цель — связать JavaScript
файлы для использования в браузере, но он также может преобразовывать, объединять,
или упаковка любого ресурса или актива.

TL; DR

Объединяет модули ES, CommonJS и AMD (даже вместе).
Может создавать один пакет или несколько фрагментов, которые асинхронно загружаются во время выполнения (для сокращения времени начальной загрузки).
Зависимости разрешаются во время компиляции, уменьшая размер среды выполнения.
Загрузчики могут предварительно обрабатывать файлы во время компиляции, например TypeScript в JavaScript, строки Handlebars для скомпилированных функций, изображения в Base64 и т. Д.
Высокомодульная система надстроек, позволяющая делать все, что требуется вашему приложению.

Начать

Ознакомьтесь с кратким руководством по Get Started webpack и другими руководствами.

Совместимость с браузером

Webpack поддерживает все браузеры, совместимые с ES5 (IE8 и ниже не поддерживаются).Webpack также требуется Promise для import () и require.ensure () . Если вы хотите поддерживать старые браузеры, вам нужно будет загрузить полифилл перед использованием этих выражений.

Концепты

Плагины

Webpack имеет богатый плагин
интерфейс. Большинство функций
внутри самого webpack используйте этот интерфейс плагина. Это делает webpack очень
гибкий .

Погрузчики

Webpack позволяет использовать загрузчики для предварительной обработки файлов.Это позволяет связать
любой статический ресурс , выходящий за рамки JavaScript. Вы можете легко написать свой собственный
загрузчики, использующие Node.js.

Загрузчики

активируются с помощью имени загрузки ! Префиксы в операторах require () ,
или автоматически применяются через регулярное выражение из конфигурации вашего веб-пакета.

Файлы

JSON

Имя	Статус	Установочный размер	Описание
			Загружает и переносит файл CSON

Транспилинг

Создание шаблона

Стайлинг

Каркасы

Производительность

Webpack использует асинхронный ввод-вывод и имеет несколько уровней кэширования.Это делает webpack быстрым
и невероятно быстрых на инкрементальных компиляциях.

Форматы модулей

Webpack поддерживает модули ES2015 +, CommonJS и AMD из коробки . Он выполняет умную статику
анализ AST вашего кода. У него даже есть механизм оценки для оценки
простые выражения. Это позволяет поддерживать большинство существующих библиотек из коробки.

Разделение кода

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

Оптимизация

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

Вклад

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

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

Обновления документации, улучшения, дизайн или исправления ошибок
Орфографические или грамматические исправления
README.md исправления или редизайн
Суммирующий блок или функциональные тесты
Отслеживание проблем с GitHub — особенно определение того, сохраняется ли проблема или ее можно воспроизвести.
Поиск #webpack в твиттере и помощь кому-то еще, кому нужна помощь
Обучаю других, как внести свой вклад в один из множества репозиториев веб-пакетов!
Ведение блога, обсуждение или создание руководств по одной из многих функций webpack.
Помогаем другим в нашем gitter-канале webpack.

Для начала ознакомьтесь с нашей документацией по участию.

Если вы беспокоитесь или не знаете, с чего начать, вы всегда можете обратиться к Шону Ларкину (@TheLarkInn) в Twitter или просто сообщить о проблеме, и специалист по сопровождению может помочь вам дать рекомендации!

Мы также начали серию публикаций на носителе под названием «Руководство для авторов по webpack». Мы приглашаем вас прочитать его и опубликовать любые вопросы или ответы, если вам все еще нужна помощь.

Хотите поговорить о webpack? Нам бы хотелось, чтобы рассмотрела аннотацию вашего выступления / CFP! Вы можете отправить его по электронной почте на адрес webpack [at] opencollective [dot] com, и мы сможем дать указатели или подсказки !!!

Создание собственных плагинов и загрузчиков

Если вы создадите загрузчик или плагин, мы <3 должны открыть его исходный код и поместить в npm.Мы следуем соглашению об именах x-loader , x-webpack-plugin .

Поддержка

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

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

Ищете документы по webpack 1? Пожалуйста, проверьте старую вики, но обратите внимание, что эта устаревшая версия больше не поддерживается.

Если вы хотите что-то обсудить или просто нуждаетесь в помощи, вот наша комната Gitter, где всегда есть люди, которые хотят помочь!

Если у вас все еще возникают проблемы, мы будем рады, если вы отправите
вопрос к StackOverflow с тегом webpack. Намного проще отвечать на вопросы, касающиеся вашего веб-пакета.config.js и соответствующие файлы! Поэтому, если вы можете их предоставить, мы будем чрезвычайно благодарны (и, скорее всего, поможем вам найти ответ!)

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

Если вы обнаружили 🐜 или у вас есть предложение по функциям, не стесняйтесь создавать проблему на Github.

Лицензия

Основная команда

Спонсорство

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

Вот как мы используем пожертвования:

Разрешить основной команде работать над webpack
Поблагодарите участников, если они потратили много времени на участие
Поддержка проектов в экосистеме, представляющих большую ценность для пользователей
Поддержать проекты, получившие наибольшее количество голосов (в стадии разработки)
Стоимость инфраструктуры
Плата за обработку денег

Премиум партнеры

Другие спонсоры и спонсоры

До того, как мы начали использовать OpenCollective, пожертвования делались анонимно.Теперь, когда мы сделали переход, мы хотели бы поблагодарить этих спонсоров (и тех, кто продолжает делать пожертвования с помощью OpenCollective). Если мы кого-то упустили, пришлите нам PR, и мы добавим вас в этот список.

Золотые спонсоры

Станьте золотым спонсором и разместите свой логотип в README на Github со ссылкой на свой сайт.

Серебряные спонсоры

Станьте серебряным спонсором и разместите свой логотип в нашем README на Github со ссылкой на свой сайт.

Бронзовые спонсоры

Станьте бронзовым спонсором и разместите свой логотип в README на Github со ссылкой на свой сайт.

Сторонники

Станьте спонсором и разместите свое изображение в README на Github со ссылкой на свой сайт.

Особая благодарность

(в хронологическом порядке)

webpack / webpack: сборщик для javascript и друзей. Упаковывает множество модулей в несколько связанных ресурсов. Разделение кода позволяет загружать части приложения по запросу. Через «загрузчики» модули могут быть CommonJs, AMD, модулями ES6, CSS, изображениями, JSON, Coffeescript, LESS,… и ваши индивидуальные вещи.

Содержание

Установить
Введение
Концепции
Содействующие
Поддержка
Основная команда
Спонсорство
Премиум-партнеры
Другие спонсоры и спонсоры
Золотые спонсоры
Серебряных спонсоров
Бронзовые спонсоры
Сторонники
Особая благодарность

Установить

Установить с npm:

 npm install --save-dev webpack

Установить с пряжей:

Введение

TL; DR

Объединяет модули ES, CommonJS и AMD (даже вместе).
Может создавать один пакет или несколько фрагментов, которые асинхронно загружаются во время выполнения (для сокращения времени начальной загрузки).
Зависимости разрешаются во время компиляции, уменьшая размер среды выполнения.
Загрузчики могут предварительно обрабатывать файлы во время компиляции, например TypeScript в JavaScript, строки Handlebars для скомпилированных функций, изображения в Base64 и т. Д.
Высокомодульная система надстроек, позволяющая делать все, что требуется вашему приложению.

Начать

Ознакомьтесь с кратким руководством по Get Started webpack и другими руководствами.

Совместимость с браузером

Концепции

Плагины

Погрузчики

Загрузчики

Файлы

JSON

Имя	Статус	Установочный размер	Описание
			Загружает и переносит файл CSON

Транспилинг

Создание шаблонов

Стиль

Каркасы

Производительность

Форматы модулей

Расщепление кода

Оптимизации

Содействующие

Обновления документации, улучшения, проекты или исправления
Орфографические или грамматические исправления
README.md исправления или редизайн
Суммирующий блок или функциональные тесты
Отслеживание проблем с GitHub — особенно определение того, сохраняется ли проблема или ее можно воспроизвести.
Ищем #webpack в твиттере и помогаем кому-то еще, кому нужна помощь
Обучаю других, как внести свой вклад в один из множества репозиториев веб-пакетов!
Ведение блога, обсуждение или создание руководств по одной из многих функций webpack.
Помогаем другим в нашем gitter-канале webpack.

Для начала ознакомьтесь с нашей документацией по участию.

Создание собственных плагинов и загрузчиков

Поддержка

Если вы обнаружили 🐜 или у вас есть предложение по функциям, не стесняйтесь создавать проблему на Github.

Лицензия

Основная группа

Спонсорство

Вот как мы используем пожертвования:

Разрешить основной команде работать над webpack
Поблагодарите участников, если они потратили много времени на участие
Поддержка проектов в экосистеме, представляющих большую ценность для пользователей
Поддержать проекты, получившие наибольшее количество голосов (в стадии разработки)
Стоимость инфраструктуры
Плата за обработку денег

Премиум-партнеры

Другие спонсоры и спонсоры

Золотые спонсоры

Станьте золотым спонсором и разместите свой логотип в README на Github со ссылкой на свой сайт.

Серебряных спонсоров

Станьте серебряным спонсором и разместите свой логотип в нашем README на Github со ссылкой на свой сайт.

Бронзовые спонсоры

Станьте бронзовым спонсором и разместите свой логотип в README на Github со ссылкой на свой сайт.

Поддерживающие

Станьте спонсором и разместите свое изображение в README на Github со ссылкой на свой сайт.

Особая благодарность

(в хронологическом порядке)