Введение в webpack 4.0 — создание базовой среды для фронтенд-разработки

что такое вебпак

Webpack можно рассматривать как упаковщик модулей: он анализирует структуру вашего проекта и находитJavaScriptмодули и другие языки расширений, которые браузеры не могут запускать напрямую (Scss,TypeScriptи т. д.), упакуйте его в подходящий формат для использования браузером.

Сборка заключается в преобразовании исходного кода в исполняемый файл для распространения в Интернете.JavaScript, CSS, HTML-код, включая следующее:

• преобразование кода:TypeScriptскомпилировано вJavaScript,SCSSКомпилировать в CSS и т. д.
• оптимизация файлов: сжатиеJavaScript, CSS, HTML-код, сжатие и объединение изображений и т. д.
• разделение кода: Извлеките общий код нескольких страниц, извлеките код, который не нужно выполнять на первом экране, и дайте ему загрузиться асинхронно.
• слияние модулей: В модульном проекте много модулей и файлов, и нужно построить функцию для объединения модулей в один файл.
• Автоматическое обновление: прослушивание изменений в локальном исходном коде, автоматическая сборка, обновление браузера
• проверка кода: Перед отправкой кода на склад необходимо проверить, соответствует ли код спецификации и проходит ли юнит-тест
• автоматическая публикация: после обновления кода код онлайн-релиза создается автоматически и передается в систему выпуска.

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

Основные понятия веб-пакета

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

  • Значение по умолчанию./src/index.js, однако можно указать другую точку входа (или несколько точек входа), настроив свойство записи в конфигурации веб-пакета.

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

• loader: разрешить веб-пакету обрабатывать файлы, отличные от JavaScript (сам веб-пакет понимает только JavaScript). Загрузчики могут преобразовывать все типы файлов в действительные модули, которые может обрабатывать веб-пакет, а затем вы можете воспользоваться возможностями упаковки веб-пакета и обработать их.

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

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

• Режим: выбравdevelopmentилиproductionОдин из них, чтобы установить параметр режима, вы можете включить оптимизации, встроенные в веб-пакет, в соответствующем режиме.

процесс сборки вебпака

1. Начиная с модуля, настроенного в записи, рекурсивно разрешите все модули, от которых зависит запись.
2. Каждый раз при обнаружении модуля будет найдено соответствующее правило преобразования в соответствии с настроенным загрузчиком.
3. После преобразования модуля анализируется модуль, от которого зависит текущий модуль.
4. Эти модули сгруппированы в единицы Записи, а Запись и все зависимые от нее Модули сгруппированы в группу, которая является Чанком.
5. Наконец, Webpack преобразует все фрагменты в выходные файлы.
6. В течение всего процесса Webpack будет выполнять логику, определенную в плагине, в нужное время.

Среды разработки и производства

В нашей повседневной работе по фронтенд-разработке у нас обычно есть два набора сред конструирования: один для разработки и один для онлайн-использования.

• development: файл конфигурации для разработки, используемый для определенияwebpack dev serverи другие вещи
• production: файл конфигурации для производства, используемый для определенияUglifyJSPlugin,sourcemapsЖдать

Короче говоря, вам может понадобиться распечатать отладочную информацию во время разработки, включаяsourcemapфайлы, а производственная среда используется для онлайн-кода, который сжимается, и никакая отладочная информация не печатается во время выполнения. Например, axios, antd и т. д. необходимо использовать в нашей производственной среде, тогда мы должны установить зависимость в производственной среде, иwebpack-dev-serverЕго необходимо установить в среде разработки.

обычно мыnpmВ файлах, установленных в -S -D, -D означает, что наши зависимости установлены в среде разработки, а -S - установить зависимости в рабочей среде.

Эта статья поможет вам создать базовую среду разработки интерфейса Что вам нужно для среды разработки интерфейса?

• HTML, CSS, JS, изображения и другие ресурсы, необходимые для построения и публикации.
• Используйте препроцессор CSS, здесь меньше
• Настройте транскодер babel => используйте es6+
• Обработка и сжатие изображений
• Настроить горячую перезагрузку, HMR

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

Создайте базовую среду разработки

Установить

mkdir webpack-dev && cd webpack-dev
npm init -y
npm i webpack webpack-cli -D

добавить скрипты

Сгенерированный файл package.json, добавьте в файл

 "scripts": {
    "build": "webpack --mode production"
  }

--modeРежим (обязательно, иначе будетWARNING),Даwebpack4Добавлены параметры параметров, по умолчаниюproduction

• --mode productionПроизводственная среда
  • поставкаuglifyjs-webpack-pluginсжатие кода
  • определение не требуетсяnew webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") })По умолчаниюproduction
  • Включено по умолчаниюNoEmitOnErrorsPlugin -> optimization.noEmitOnErrors, пропускать вывод ошибок компиляции, чтобы выходные ресурсы не содержали ошибок
  • Включено по умолчаниюModuleConcatenationPlugin -> optimization.concatenateModules, webpack3Добавлен подъем прицела (Scope Hoisting)
• --mode developmentсреда разработки
  • Используйте eval для сборки модулей, чтобы ускорить инкрементные сборки
  • определение не требуетсяnew webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") })По умолчаниюdevelopment
  • Включено по умолчаниюNamedModulesPlugin -> optimization.namedModulesОтносительные пути к модулям отображаются при использовании горячей замены модулей (HMR)

После добавления скриптов создайте новыйsrc/index.js, затем выполнитеnpm run build, вы обнаружите, что новыйdistДиректория, в которой хранится собранный webpackmain.jsдокумент.

ps руководство по использованию скриптов npm

Создайте новый файл webpack.config.js

Чтобы добавить дополнительную информацию о конфигурации в webpack, нам нужно создать файл конфигурации webpack. Создать в корневом каталогеwebpack.config.jsвыполнить позжеwebpackкоманда, webpack будет использовать конфигурацию этого файла конфигурации

Конфигурация имеет следующую основную информацию:

module.exports = {
  entry: '', // 打包入口：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始
  output: '', // 出口
  resolve: {}, // 配置解析：配置别名、extensions 自动解析确定的扩展等等
  devServer: {}, // 开发服务器：run dev/start 的配置，如端口、proxy等
  module: {}, // 模块配置：配置loader（处理非 JavaScript 文件，比如 less、sass、jsx、图片等等）等
  plugins: [] // 插件的配置：打包优化、资源管理和注入环境变量
}

Настройка входящего и исходящего пакетов

Сначала мы идем вwebpack.config.jsДобавить информацию о конфигурации точки

const path = require('path')

module.exports = {
  // 指定打包入口
  entry: './src/index.js',

  // 打包出口
  output: {
    path: path.resolve(__dirname, 'dist'), // 解析路径为 ./dist
    filename: 'bundle.js'
  }
}

Выше мы определили запись упаковки./src/index.js, упакованный для экспорта как./dist, имя упакованной папкиbundle.js,воплощать в жизньnpm run buildПосле команды файл index.js будет упакован какbundle.jsдокумент. На этом этапе создайте html-файл для ссылки на этотbundle.jsты можешь видетьindex.jsнаписанный код.

path.resolve([...paths])Метод преобразует путь или последовательность фрагментов пути в абсолютный путь.

Создание html-файлов с помощью html-webpack-plugin

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

В этот момент мы можем использоватьhtml-webpack-pluginПлагин для связывания ссылок HTML с нашими результатами сборки.

npm install html-webpack-plugin -D

Создать файлpublic/index.htmlИсправлятьwebpack.config.jsдокумент

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  //...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // 配置输出文件名和路径
      template: './public/index.html' // 配置要被编译的html文件
    })
  ]
}

сделай это сноваnpm run build, будет несколько каталогов distindex.htmlи представилbundle.js.

Сжать html-файлы

Исправлятьwebpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  //...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // 配置输出文件名和路径
      template: './public/index.html', // 配置要被编译的html文件
      hash: true,
      // 压缩 => production 模式使用
      minify: {
        removeAttributeQuotes: true, //删除双引号
        collapseWhitespace: true //折叠 html 为一行
      }
    })
  ]
}

упаковать css-файл

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

npm install style-loader css-loader -D

новыйsrc/assets/style/color.css, Исправлятьwebpack.config.jsдокумент:

module.exports = {
  //...
  module: {
    /**
     * test: 匹配特定条件。一般是提供一个正则表达式或正则表达式的数组
     * include: 匹配特定条件。一般是提供一个字符串或者字符串数组
     * exclude: 排除特定条件
     * and: 必须匹配数组中的所有条件
     * or: 匹配数组中任何一个条件,
     * nor: 必须排除这个条件
     */
    rules: [
      {
        test: /\.css$/,
        include: [path.resolve(__dirname, 'src')],
        use: ['style-loader', 'css-loader']
      }
    ]
  }
  //...
}

После обработки двух вышеперечисленных загрузчиков код CSS будет преобразован в JS.Если нам нужно отдельно разделить файл CSS, нам нужно использоватьmini-css-extract-pluginплагин

Извлечь css в отдельный файл, добавить префикс автоматически

npm i mini-css-extract-plugin postcss-loader autoprefixer -D

Когда мы пишем css, нам неизбежно приходится учитывать проблемы совместимости браузеров, такие какtransformнеобходимо добавить префикс браузера для адаптации к другим браузерам. так что используйтеpostcss-loaderЭтот загрузчик, следующая соответствующая конфигурация

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        include: [path.resolve(__dirname, 'src')],
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [require('autoprefixer')]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    //...
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
}

упаковать меньше файлов

Язык препроцессора обычно используется в разработке, здесьlessНапример, поless-loaderМожет упаковать LESS для файлов CSS

npm install less less-loader -D

новыйsrc/assets/style/index.less, И вsrc/index.jsвведен вimport './assets/style/index.less'

настроитьwebpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  module: {
    rules: [
      // ...
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [require('autoprefixer')] // 添加css中的浏览器前缀
            }
          },
          'less-loader'
        ]
      }
    ]
  }
  //...
}

После выполнения команды пакета вы можете найтиindex.lessСтиль, написанный в, будет таким же, какcolor.cssупаковано так жеmain.cssсередина.

обновите webpack@v4 и ступайте на яму: Об использованииmini-css-extract-pluginвнимания.

пакет фотографий

npm install file-loader url-loader -D

file-loader:Его можно использовать для обработки многих типов файлов, его основная функция — прямой вывод файла и возврат созданного пути к файлу.

url-loader:Если изображений слишком много, будет отправлено много http-запросов, что снизит производительность страницы.url-loaderИмпортированное изображение будет закодировано для создания dataURl. Это эквивалентно переводу данных изображения в строку символов. Затем упаковать эту строку символов в файл, и, наконец, нужно только импортировать этот файл, чтобы получить доступ к картинке. Конечно, если изображение больше, кодирование будет потреблять производительность. следовательноurl-loaderПредусмотрен параметр limit, файлы меньшего размера, чем предельные байты, будут преобразованы в DataURl, а также будут использоваться файлы, превышающие предельный размер.file-loaderСделать копию.

• url-loader можно рассматривать как расширенную версию file-loader.
• url-loader кодирует изображение в формат base64 и записывает его на страницу, тем самым уменьшая запросы к серверу.

module.exports = {
  module: {
    rules: [
      // ...
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              outputPath: 'images/', //输出到images文件夹
              limit: 500 //是把小于500B的文件打成Base64的格式，写入JS
            }
          }
        ]
      }
    ]
  }
  //...
}

Какова связь между загрузчиком URL и загрузчиком файлов?

вообще говоря,url-loaderупакованныйfile-loader.url-loaderЭто не зависит отfile-loader, даже используяurl-loader, просто установитеurl-loaderВот и все, установка не требуетсяfile-loader,потому чтоurl-loaderвстроенныйfile-loader.

Из приведенного выше введения мы видим, что url-loader работает в двух случаях:

• Если размер файла меньше параметра limit, url-loader преобразует файл в DataURL;
• Если размер файла превышает лимит, url-loader вызовет для обработки file-loader, и параметры также будут напрямую переданы в file-loader. Итак, нам просто нужно установить url-loader.

Связанныйurl-loaderа такжеfile-loaderАнализ:Представление изображения веб-пакета - улучшенный загрузчик файлов: url-loader

настроить бабел

babel-loader

BabelЭто инструмент компиляции JS, который позволяет нам использовать новые функции ES.Мы можем настроить Babel в веб-пакете для написания кода JS с использованием стандартов ES6 и ES7.

Необходимо добавить зависимости, связанные с Babel 7@babelобъем. Основное изменение заключается в том, что пресеты установлены из оригинала.envзаменяется@babel/preset-env, можно настроитьtargets, useBuiltInsи другие параметры используются для компиляции кода, совместимого с целевой средой. вuseBuiltInsЕсли установлено"usage", Babel введет соответствующий код ES6/ES7 по мере необходимости на основе кода ES6/ES7, используемого в фактическом коде, и целей, которые вы укажете.polyfill, не вводя его прямо в кодimport '@babel/polyfill', чтобы выходной пакет не был слишком большим, и в то же время вы можете уверенно использовать различные новые синтаксические функции.

npm i babel-loader @babel/core @babel/preset-env -D

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

{
  "babel-loader": "^8.0.4",
  "@babel/core": "^7.1.2",
  "@babel/preset-env": "^7.1.0"
}

• babel-loader: Преобразование кода ES6 с помощью babel требует использованияbabel-loader
• @babel-preset-env: По умолчанию он равен ES2015 + ES2016 + ES2017, что означает, что он преобразует синтаксис ES этих трех версий.
• @babel/core: основная библиотека babel

Новое в корневом каталоге.babelrcдокумент

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        },
        "useBuiltIns": "usage"
      }
    ]
  ]
}

• Пресеты — это набор пресетов плагинов для удобства.
• Плагины — это инструменты преобразования кода, и babel преобразует код в соответствии с настроенными вами плагинами.

Исправлятьwebpack.config.js

module.exports = {
  module: {
    rules: [
      //...
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

Babel/polyfill и среда выполнения Transform

Babel по умолчанию преобразует только новый синтаксис (синтаксис) JavaScript, а не новые API, такие как глобальные объекты, такие как Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, Promise, и некоторые методы, определенные для глобальных объектов (например, Object. assign) не будут перекодированы.

• babel-polyfill: как упоминалось выше, для новых API вам может потребоваться ввести babel-polyfill для совместимости.

• ключевой момент

  • babel-polyfill предназначен для эмуляции полной среды ES2015+ и предназначен для использования в приложениях, а не в библиотеках/инструментах.
  • babel-polyfill загрязняет глобальную область видимости

Роль babel-runtime:

• Извлечение вспомогательных функций. При транскодировании ES6 Babel понадобятся некоторые вспомогательные функции, такие как _extend. Babel по умолчанию встраивает эти вспомогательные функции в каждый файл js.Babel предоставляет среду выполнения transform-runtime для «перемещения» этих вспомогательных функций в отдельный модуль babel-runtime, что может уменьшить размер файла проекта.
• Предоставить полифиллы: не загрязняет глобальную область, но не поддерживает методы экземпляра, такие как Array.includes

babel-runtimeБольше похоже на разрозненные модули полифилла, которые нужно вводить отдельно в соответствующие им модули, с помощьюtransform-runtimeПлагины для автоматизации всего этого, что означает, что вы не импортируете связанные вещи в начале файла.polyfill, вы просто используете,transform-runtimeпоможет вам импортировать.

Для разработки приложений непосредственно используйте указанный выше запрос по запросу.polyfillРешение более удобное, но если это средство разработки или библиотека, то это решение может не подойти (babel-polyfillвызывая глобальные объекты и встроенные объектыprototypeЕсли добавить вышеуказанный метод, это вызовет загрязнение глобальной переменной). Babel предлагает другое решениеtransform-runtime, он потребуется только при компиляцииpolyfillКод вводит указатель наcore-jsСсылка (псевдоним) соответствующего модуля в . Что касается конкретных различий и вариантов выбора этих двух схем, вы можете самостоятельно поискать соответствующие руководства, которые не будут здесь подробно описываться.transform-runtimeэталонная схема конфигурации.

• Первая установка зависимостей времени выполнения

npm i @babel/plugin-transform-runtime -D
npm i @babel/runtime -S

Исправлять.babelrc

{
  //...
  "plugins": ["@babel/plugin-transform-runtime"]
}

Очистите файлы исходного каталога перед упаковкой clean-webpack-plugin

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

npm install clean-webpack-plugin -D

Исправлятьwebpack.config.jsдокумент

const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
  plugins: [new CleanWebpackPlugin(['dist'])]
}

Извлечь общий код

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

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          // 抽离自己写的公共代码
          chunks: 'initial',
          name: 'common', // 打包后的文件名，任意命名
          minChunks: 2, //最小引用2次
          minSize: 0 // 只要超出0字节就生成一个新包
        },
        styles: {
          name: 'styles', // 抽离公用样式
          test: /\.css$/,
          chunks: 'all',
          minChunks: 2,
          enforce: true
        },
        vendor: {
          // 抽离第三方插件
          test: /node_modules/, // 指定是node_modules下的第三方包
          chunks: 'initial',
          name: 'vendor', // 打包后的文件名，任意命名
          // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
          priority: 10
        }
      }
    }
  }
}

hash

Для чего используется хэш? Результатом каждого пакета может быть один и тот же файл.Так что, когда я выхожу в интернет, нужно ли мне заменять онлайн-js?Как узнать, какой из них самый последний?Обычно мы очищаем кеш. И хеш существует, чтобы решить эту проблему

В настоящее время мы меняем некоторые конфигурации webpack.config.js.

module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash:8].js'
  },
  //...
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[hash:8].css',
      chunkFilename: '[id].[hash:8].css'
    })
  ]
}

Уменьшите разрешение разрешения и настройте псевдонимы

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

module.exports = {
  resolve: {
    /**
     * alias: 别名的配置
     *
     * extensions: 自动解析确定的扩展,
     *    比如 import 'xxx/theme.css' 可以在extensions 中添加 '.css'， 引入方式则为 import 'xxx/theme'
     *    @default ['.wasm', '.mjs', '.js', '.json']
     *
     * modules 告诉 webpack 解析模块时应该搜索的目录
     *   如果你想要添加一个目录到模块搜索目录，此目录优先于 node_modules/ 搜索
     *   这样配置在某种程度上可以简化模块的查找，提升构建速度 @default node_modules 优先
     */
    alias: {
      '@': path.resolve(__dirname, 'src'),
      tool$: path.resolve(__dirname, 'src/utils/tool.js') // 给定对象的键后的末尾添加 $，以表示精准匹配
    },
    extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'],
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  }
}

webpack-dev-serve

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

webpack-dev-serverЭто инструмент, официально предоставляемый веб-пакетом, который может быстро запустить статическую службу на основе текущей конфигурации сборки веб-пакета. когдаmodeдляdevelopment, буду иметьhot reloadФункция , то есть при изменении файла исходного кода текущая страница будет немедленно обновлена, чтобы вы могли увидеть последний эффект. ...

npm install webpack-dev-server -D

Добавить в скрипты в package.json

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

Открыть окно локальной службы по умолчаниюhttp://localhost:8080/легко развиваться

Настроить сервер разработки

мы можемwebpack-dev-serverВыполнить целевую настройку

module.exports = {
  // 配置开发服务器
  devServer: {
    port: 1234,
    open: true, // 自动打开浏览器
    compress: true // 服务器压缩
    //... proxy、hot
  }
}

• contentBase: корневой каталог, к которому обращается сервер (может использоваться для доступа к статическим ресурсам).
• порт: порт
• open: автоматически открыть браузер

горячая замена модуля

Горячая замена модуля (HMR - Hot Module Replacement) заменяет, добавляет или удаляет модули во время работы приложения без перезагрузки всей страницы. Скорость разработки существенно ускоряется в основном следующими способами:

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

над намиnpm startПосле однократного изменения файла страница будет обновлена ​​один раз. На этом пути есть большая проблема, например, мы используемredux, vuexДождитесь плагина и сохраните его на странице, как только страница обновится.redux, vuexВещи в нем будут потеряны, что очень вредит нашему развитию.

HMR взаимодействует с webpack-dev-server, сначала настраиваем webpack.config.js

const webpack = require('webpack')

module.exports = {
  devServer: {
    //...
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
    //...
  ]
}

Это не работает после настройки, потому что веб-пакет не знает, где вы хотите обновить, изменитьsrc/index.jsфайл, добавить

if (module.hot) {
  module.hot.accept()
}

перезапустить службу,npm startПосле этого измените введениеindex.jsфайл, страница больше не будет обновляться, что реализует HMR

Но есть проблема, вы изменяете css/less и другие файлы стилей не меняются, что?

HMR для изменения таблицы стилей требует помощиstyle-loader, тогда как ранее мы использовалиMiniCssExtractPlugin.loader, с этим легко справиться, просто измените одно из правил, мы можем попробовать изменить

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          // MiniCssExtractPlugin.loader,
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [require('autoprefixer')] // 添加css中的浏览器前缀
            }
          },
          'less-loader'
        ]
      }
    ]
  }
}

Таким образом, когда мы изменим файл less, мы обнаружим, что HMR реализован.

На самом деле мы можем обнаружить, что загрузчик, настроенный под dev,style-loader, в то время как производственная среда требуетMiniCssExtractPlugin.loader

Это включает в себя настройку между различными средами. в состоянии пройтиprocess.env.NODE_ENVПолучите текущую среду разработки или производственную среду, а затем настройте разные загрузчики, которые здесь не будут раскрываться. В следующей статье будетreact-cliилиvue-cliКонфигурация среды разработки и конфигурация рабочей среды разделены на разные файлы.

Эпилог

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

Учитьwebpack 4.0Это все еще требует больше практики и больше возни.Автор только что изучил настройку веб-пакета.Пожалуйста, укажите на ошибки.

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

Код, сгенерированный этой статьей:webpack-dev

Ссылаться на

• Достаточно начать работу с webpack4.x
• Webpack4 не является глубоким или поверхностным практическим руководством
• конфигурация babel и HMR для webpack
• Настройте шаблон проекта Vue.js с помощью webpack 4 и Babel 7.
• webpack 4: от конфигурации 0 до сборки проекта
• Подробное объяснение веб-пакета
• Напишите конфигурацию webpack4.0 вручную
• Учебное пособие по Webpack 4: от нулевой конфигурации до промышленной версии (2018 г.)
• Демистификация Webpack — единственный способ создать высококачественный интерфейс
• Открытый курс Everest Architect Training webpack4.0 Advanced
• официальный сайт вебпака