Front-end инженер по настройке

Говорят, что front-end — это инженер-конфигуратор, который пишет различные конфигурации проекта.Сейчас мейнстрим — конфигурация webpack, а gulp и grunt — все отошли на линейку 1.5. Тогда давайте поговорим о конфигурации веб-пакета, но сегодня я буду использовать эти конфигурации в приложении create-react-app для чего. Нам не нужно знать все плагины веб-пакета, но мы должны знать, для чего можно использовать веб-пакет, и знать, с чего начать, когда в этом возникнет необходимость.

webpack.config.dev.js

autoprefixer

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

html-webpack-plugin

Этот плагин предназначен для создания html-файла, который автоматически внедряется в упакованный js-файл.

case-sensitive-paths-webpack-plugin

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

InterpolateHtmlPlugin

Этот плагин используется с html-webpack-plugin и позволяет использовать переменные в index.html.

  // 我们在create-react-app生成的项目中public下的index.html可以看到下面的代码
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
скопировать код

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

WatchMissingNodeModulesPlugin

Это также плагин, удобный для разработки.При ссылке на node_modules, которые не установлены в проекте, webpack сообщит об ошибке, модуль не найден, и тогда вам нужно перезапустить сервис вручную после завершения установки. Плагин WatchMissingNodeModulesPlugin поможет вам сэкономить на этом шаге.Вы устанавливаете и запускаете отсутствующий модуль, и веб-пакет автоматически перезапускается.

eslintFormatter

emmmm....eslint

ModuleScopePlugin

Этот плагин не позволяет вам вводить непроектные ресурсы (то есть вне папок src и node_modules) в текущем проекте, потому что babel будет переводить только код в папке src.

webpack.NamedModulesPlugin

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

webpack.DefinePlugin

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

  new webpack.DefinePlugin({
    PRODUCTION: process.env.NODE_ENV === "production",
    DEVELOPMENT: process.env.NODE_ENV === "development"
  })
скопировать код

Затем в коде js, если в коде используется eslint, нужно объявить эту переменную в package.json

  "eslintConfig": {
    "extends": "react-app",  // 继承已启用的规则配置
    "globals": {
      "PRODUCTION": false  // false不允许PRODUCTION变量重写，只读属性
      "DEVELOPMENT": true  // true允许DEVELOPMENT变量重写
    }
  }
скопировать код

  if(PRODUCTION){
    domain = www.production.com
  }else{
    domain = www.development.com
  }
скопировать код

webpack.HotModuleReplacementPlugin

Плагин горячей замены модуля, только изменения css в cereate-react-app имеют горячую замену, а изменения js будут обновлять страницу.

IgnorePlugin

Связанные ресурсы игнорируются при объединении веб-пакетов.

Узнайте больше о сервисных работниках

Front-end инженер по настройке