руководство по обновлению webpack 4

Webpack

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

Мне некогда смотреть твой бред, дай конфигурацию

Webpack 4 сделал много улучшений, я выберу некоторые моменты, которые меня больше беспокоят, чтобы расширить

0CJS

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

По умолчанию

1
2
3
4
5
6
7
 
module.exports = {
  entry: 'src/',
  outpu: {
    filename: '[name].js',
    path: 'dist/'
  }
}

Представлен в веб-пакете 4modeТребуется установить (если не поставить, будет сигнализация), можно пройтиwebpack --mode ...установить или черезwebpack.config.jsустанавливать.

1
2
3
 
module.exports = {
  mode: 'development' // development || production
}

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

Режим разработки больше фокусируется на опыте разработки:

  • Лучше для отладки браузера
  • Более быстрая инкрементная компиляция
  • Более подробное сообщение об ошибке

Генеративный режим больше связан с пользовательским опытом:

  • Производительность (размер файла, производительность во время выполнения, скорость упаковки)

Подробные инструкции см.эта статья

Загрузчик и плагин

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

  • extract-text-webpack-plugin@4.0.0-beta.0

    issue listКак видите, проблем еще много.
    Проблема, с которой я сталкиваюсь, заключается в том, что в сотрудничествеsplitChunks(будет упомянуто позже), будет сгенерирован css-файл размером 0 КБ,issue.
    я уже поднимал этот вопросPR.

    официальныйmini-css-extract-plugin, но эта проблема больше, не поддерживает HMR, не поддерживаетcontenthash, так что это в основном бесполезно на данный момент.

  • html-webpack-plugin@3.0.0+

    Этот плагин в настоящее время поддерживает webpack 4, но его собственный плагин может не поддерживать его, на это нужно обратить внимание при обновлении.

  • uglifyjs-webpack-plugin

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

RIP CommonsChunkPlugin

Вышеупомянутые изменения являются некоторыми сторонними плагинами, и самое большое изменение и самое большое влияние — это использование веб-пакета 4.optimization.splitChunksзамененыCommonsChunkPlugin, и поддержка была удаленаCommonsChunkPlugin, так что эту часть сложнее перенести.

Для всех инженеров по конфигурации,CommonsChunkPluginЭто должно быть очень знакомо, мы в основном используем его для извлечения общих частей в коде,webpack runtimeкод, такой какchunkhash, чтобы реализовать наилучшую стратегию кэширования. И эта часть тоже плохо поддерживается вебпаком.issue, до сих пор не решен. Если вас интересует этот вопрос, вы можете прочитать этостатья. Я не буду раскрывать это здесь, просто вставьте копиюCommonsChunkPluginконфиг эпохи для решения этой проблемы

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
module.exports = {
  ...
  plugins: [
    ...
    new webpack.HashedModuleIdsPlugin(),

    new webpack.NamedChunksPlugin(chunk => {
      if (chunk.name) {
        return chunk.name
      } else {
        return 'faceless-chunk' // a chunk has no name
      }
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          /node_modules/.test(module.resource)
        )
      }
    }),

    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime',
      minChunks: Infinity
    }),

    // extracts shared chunks from code splitted chunks
    // https://github.com/webpack/webpack/issues/4392
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'async-vendor',
      children: true,
      minChunks: 3
    })

  ]
}

Конфигурация после обновления до webpack 4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
module.exports = {
  ...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          chunks: 'initial',
          name: 'vendors',
        },
        'async-vendors': {
          test: /[\\/]node_modules[\\/]/,
          minChunks: 2,
          chunks: 'async',
          name: 'async-vendors'
        }
      }
    },
    runtimeChunk: { name: 'runtime' }
  },
  plugins: [
    new webpack.HashedModuleIdsPlugin(),
    new webpack.NamedChunksPlugin(chunk => chunk.name || 'faceless-chunk'), // a chunk has no name!!!
    ...
  ]
}

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

Миграция на самом деле заняла много времени, с одной стороны мы подняли вопросы по вебпаку, а с другой стороны мы подняли проблемы и PR по плагину wepback.
Я был впечатлен временем, которое потребовалось Wepback для устранения проблемы, но ответ плагина был относительно медленным, и для получения отзыва может потребоваться несколько дней.
Короче говоря, я надеюсь, что эта статья поможет студентам, которые обновляются и планируют обновиться.

Категории