webpack4.X Combat (1): всестороннее понимание webpack, основных концепций

• webpack4.X Combat (1): всестороннее понимание webpack, основных концепций

• webpack4.X Combat (2): создайте простой интерфейсный проект с нуля

• webpack4.X Combat (3): сводка корпоративного SPA из 24 пунктов (часть 1)

• webpack4.X Combat (4): сводка корпоративного SPA из 24 пунктов (часть 2)

1. Что такое веб-пакет

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

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

• В основном отвечает за следующие функции:

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

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

  • Оптимизация: оптимизация производительности

• возможности вебпака:

  • разделение кода

    Webpack имеет два способа организации зависимостей модулей: синхронный и асинхронный.

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

  • Умный парсинг

    Webpack имеет интеллектуальный парсер, который может работать практически с любой сторонней библиотекой.

    Независимо от того, является ли их форма модуля CommonJS, AMD или обычными файлами JS, даже при загрузке зависимостей допускается динамическое выражение require("./templates/" + name + ".jade")

  • беги быстро

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

• официальный сайт вебпака

2. Установка

• Установить глобально

  sudo npm i webpack -g
  

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

  // 在已经 npm 初始化的项目 根目录执行
  
  npm i webpack -D
  

• Напоминание: версия webpack4.x требует дополнительной установки webpack-cli

  // 以下为局部安装方式，全局安装同上
  npm i webpack-cli -D
  

3. Время выполнения модуля взаимодействия, манифест

• В типичном приложении или сайте, созданном с помощью веб-пакета, есть три основных типа кода:

  • Исходный код, написанный вами или вашей командой.

  • Любая сторонняя библиотека или код «поставщика», от которого будет зависеть ваш исходный код.

  • среда выполнения и манифест веб-пакета, которые управляют всеми взаимодействиями модулей

• Время выполнения описано ниже

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

• Манифест объясняется ниже

  Когда компилятор начинает выполнять, анализировать и отображать приложение, он сохраняет подробный список всех модулей, набор данных, называемый «Манифест».

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

• Взаимодействие модулей управления временем выполнения и манифеста

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

  Какой бы синтаксис модуля вы ни выбрали, эти операторы import или require теперь переводятся в__webpack_require__метод, который указывает на идентификатор модуля

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

В-четвертых, основная концепция: запись входа

• эффект

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

• однократная запись конфигурации

  // webpack 配置
  
  module.exports = {
    entry: './path/to/my/entry/file.js'
  };
  

  // webpack 配置
  
  module.exports = {
    entry: {
      main: './src/main.js'
    }
  };
  

• настроить мультивход

  // 场景一：分离 应用程序(app) 和 第三方库(vendor) 入口
  // webpack 配置
      
  module.exports = {
    entry: {
      app: './src/app.js',
      vendors: './src/vendors.js'
    }
  };
  

  // 场景二：多页面应用程序，告诉 webpack 需要 3 个独立分离的依赖图
  // webpack 配置
      
  module.exports = {
    entry: {
      pageOne: './src/pageOne/index.js',
      pageTwo: './src/pageTwo/index.js',
      pageThree: './src/pageThree/index.js'
    }
  };
  

Пять, основная концепция: экспорт продукции

• эффект

  Скажите WebPack, где выводить построенный пакет, имя пакета и т. Д.

• Настроить единый выход

  // webpack 配置
  
  const path = require('path');
  
  module.exports = {
    entry: main: './src/main.js',
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
  

• Настроить несколько выходов

  // webpack 配置
  
  const path = require('path');
  
  module.exports = {
    entry: {
      app: './src/app.js',
      vendors: './src/vendors.js'
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'dist')
    }
  };
  

• Конфигурация других параметров

Шесть, основная концепция: загрузчик

• эффект

  Загрузчики позволяют веб-пакету обрабатывать файлы, отличные от JavaScript (сам веб-пакет понимает только JavaScript)

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

• использование загрузчика: конфигурация(обычно используется)

  // 安装 loader
  npm install --save-dev css-loader
  

  // webpack 配置
  
  module.exports = {
    module: {
      rules: [{ 
          test: /\.css$/, 
          use: ['style-loader', 'css-loader']
      }]
    }
  };
  
  // 或
  
   module.exports = {
    module: {
      rules: [{ 
          test: /\.css$/, 
          use: ['style-loader', {
              loader: 'css-loader',
              options: {
                  modules: true
              }
          }]
      }]
    }
  };
  

• использование загрузчика: встроенный(используется редко)

  // 在项目文件中，import 语句时使用
  
  import Styles from 'style-loader!css-loader?modules!./styles.css';
  

• использование загрузчика: CLI(используется редко)

  webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
  
  // 如上 会对 .jade 文件使用 jade-loader，对 .css 文件使用 style-loader 和 css-loader
  

• функция загрузчика

  • почти все погрузчикинеобходимо установить,ноненужныйв файле конфигурации webpack черезrequireпредставлять

  • Обратная компиляция, цепочка

  // webpack 配置
      
  module.exports = {
    module: {
      rules: [{ 
          test: /\.css$/, 
          use: ['style-loader', 'css-loader', 'postcss-loader']
      }]
    }
  };
  
  // 如上，css 文件编译顺序依次为：postcss-loader ---> css-loader ---> style-loader
  // 编译过程中，第一个loader的值 传递给下一个loader，依次传递；最后一个loader编译完成后，将预期值传递给 webpack
  

Семь, основная концепция: плагин

• эффект

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

• использование плагина

  npm i html-webpack-plugin -D
  

  // webpack 配置
  const HtmlWebpackPlugin = require('html-webpack-plugin'); 
  
  module.exports = {
    plugins: [
      new HtmlWebpackPlugin({
          template: './src/index.html'
      })
    ]
  };
  

• функция плагина

  Некоторые плагины нужно устанавливать отдельно, некоторые плагины являются встроенными плагинами webpack и их не нужно устанавливать отдельно.

  но все плагинынужнов файле конфигурации webpack черезrequireпредставлять

• Анатомия плагина:

  Плагин веб-пакета — это объект JavaScript со свойством применения.

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

  // ConsoleLogOnBuildWebpackPlugin.js
  
  const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
  
  class ConsoleLogOnBuildWebpackPlugin {
      apply(compiler) {
          compiler.hooks.run.tap(pluginName, compilation => {
              console.log("webpack 构建过程开始！");
          });
      }
  }
  

Восемь, основная концепция: режим режима (webpack 4.x)

• эффект

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

• использовать

  // webpack 配置
  
  module.exports = {
    mode: 'production'
  };
  

  // CLI 参数中
  
  webpack --mode=production
  

• Разница между двумя режимами

  Опции	описывать
  development	установит значение process.env.NODE_ENV для включения разработки NamedChunksPlugin и NamedModulesPlugin
  production	установит значение process.env.NODE_ENV на производство. Включить FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin и UglifyJsPlugin

  // mode: development
  
  module.exports = {
      + mode: 'development'
      - plugins: [
      -   new webpack.NamedModulesPlugin(),
      -   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
      - ]
  }
  

  // mode: production
  
  module.exports = {
      +  mode: 'production',
      -  plugins: [
      -    new UglifyJsPlugin(/* ... */),
      -    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
      -    new webpack.optimize.ModuleConcatenationPlugin(),
      -    new webpack.NoEmitOnErrorsPlugin()
      -  ]
  }
  

• Различать два режима в webpack

  if(process.env.NODE_ENV === 'development'){
      //开发环境 do something
  }else{
      //生产环境 do something
  }
  

Девять, основная концепция: цель

• webpack может создавать и компилировать для нескольких сред или целей (среда выполнения для скомпилированного кода)

  По умолчанию:web

  общее значениесм. API

10. Основная концепция: исходная карта находит ошибки в коде

• Различные исходные карты

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

  Будет влиять на скорость сборки (сборки), ребилда (ребилда)

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

• Несколько общих исходных карт для сред разработки

  • Возьмите следующий код в качестве примера, запустите

    console.log('js');
    
    class A extends test {}
    

  • eval-source-map

    Скорость сборки: -- , Скорость восстановления: + , Рабочая среда: нет , Показать исходный код

    

  • cheap-eval-source-map

    Скорость строительства: + Скорость перестроения: ++ Производство: НЕТ, преобразованный код (только строка)

    

  • cheap-module-eval-source-map【рекомендовать】

    Скорость сборки: 0, Скорость перестроения: ++, Рабочая среда: нет, Оригинальный исходный код (только строки)

    

• Общие исходные карты в производственных средах

  • Возьмите следующий код в качестве примера, запустите

    console.log('js');
    
    class A extends test {}
    

  • none【рекомендовать】

    Скорость сборки: +++, скорость сборки: +++, производственная среда: да, упакованный код

    

    • Суммировать:Следует отметить, что разные настройки devtool приведут к разным различиям в производительности.

      • «eval» имеет наилучшую производительность, но не помогает вам транспилировать ваш код.

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

      • Инкрементная компиляция с конфигурацией eval-source-map

      • В большинстве случаев дешевая-модульная-eval-source-map — лучший выбор.

постскриптум

• Друзья, если у вас есть вопросы, вы можете оставить сообщение и пообщаться друг с другом.
• Далее я опубликую несколько практических статей по webpack4.X, так что следите за обновлениями
• Я front-end разработчик, увлекаюсь программированием, WX: ZXvictory66