Обновление нашей системы сборки до Webpack4

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

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

Фон

В MedCircle наша система сборки состоит из общей конфигурации веб-пакета, которая объединена либо с настройками разработки, либо с производственными настройками, в зависимости от среды узла. Мы полагаемся на следующие плагины:

1. HtmlWebpackPlugin
2. CommonChunksPlugin (заменен на SplitChunksPlugin)
3. DefinePlugin
4. ExtractTextPlugin (заменен на MiniCssExtractPlugin)
5. WebpackIsomorphicToolsPlugin
6. UglifyJsPlugin
7. WebpackChunkHash
8. OptimizeCssAssetsPlugin
9. HashedModuleIdsPlugin

Большинство наших плагинов не требуют изменений. Мы можем оставить нетронутыми следующее:

• DefinePlugin
• WebpackChunkHash
• WebpackIsomorphicToolsPlugin
• HashedModuleIdsPlugin
• WebpackChunkHash

И мы будем обновлять:

• UglifyJsPlugin
• OptimizeCssAssetsPlugin
• ExtractTextPlugin
• CommonsChunkPlugin

Приступим - небольшие изменения

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

Существует также "секретный" 'none' параметр, хотя он рекомендуется только для опытных пользователей, поскольку он отключает все предустановленные оптимизации webpack.

Мы добавим это в начало файлов нашего веб-пакета:

// webpack.dev.config.js
mode: 'development',
// webpack.prod.config.js
mode: 'production',

Обновление наших плагинов

Первое серьезное изменение, которое мы внесем, - это UglifyJsPlugin. В нашей конфигурации webpack 3 мы указали Uglify в нашем массиве плагинов:

// webpack 3
plugins: [
  new UglifyJsPlugin({
    mangle: true,
  }),
],

В webpack 4 мы создадим экземпляр Uglify немного по-другому и переместим его в новый параметр optimizer.minimizer:

// webpack 4
optimization: {
  minimizer: [
    new UglifyJsPlugin({
      uglifyOptions: {
        mangle: true,
      },
    }),
  ],
},

Затем мы рассмотрим наш OptimizeCssAssetsPlugin. Процесс будет очень похож на Uglify, и мы также перенесем его из нашего массива плагинов в наш массив минимизатора:

// webpack 3
plugins: [
  new OptimizeCssAssetsPlugin({
    cssProcessorOptions: {
      // custom options
        zindex: false,
    },
  }),
],

-

// webpack 4
optimization: {
  minimizer: [
    new OptimizeCssAssetsPlugin({
      cssProcessorOptions: {
        zindex: false,
      },
    }),
  ],
},

Наше первое БОЛЬШОЕ изменение будет связано с обновлением нашего ExtractTextPlugin. ExtractTextPlugin обычно используется для создания одного файла css, и мы использовали его так:

// webpack 3
module: {
  rules: [{
    test: /\.sass$|\.scss$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: [{
        loader: 'css-loader',
        options: { },
      }],
    },
    { loader: 'postcss-loader' },
    { loader: 'sass-loader' },
  }],
},
plugins: [
  new ExtractTextPlugin({
    filename: 'style.[chunkhash].css',
    allChunks: true,
  }),
],

ExtractTextPlugin в настоящее время кажется ошибочным, и сообщество предложило замену для извлечения css: MiniCssExtractPlugin. Использование очень похоже! (Обновление: ExtractTextPlugin был обновлен, но мы столкнулись с ошибками «неопределенная запись»)

// webpack 4
module: {
  rules: [{
    test: /\.sass$|\.scss$/,
    use: MiniCssExtractPlugin.loader,
    { loader: 'css-loader', options: { importLoaders: 1 } },
    { loader: 'postcss-loader },
    { loader: 'sass-loader' },
  }],
},
plugins: [
  new MiniCssExtractPlugin({
    filename: 'style.[chunkhash].css',
  }),
],

Наконец, приступим к работе над CommonsChunkPlugin! Подождите, этот плагин был заменен в webpack 4 на SplitChunksPlugin. Вот как наша установка выглядела раньше:

// webpack 3
plugins: [
  new optimize.CommonsChunkPlugin({
    names: 'vender',
    filename: '[name].[hash].js',
    minChunks: Infinity,
  }),
],

Вместо этого мы будем использовать новые параметры optimisation.splitChunks:

// webpack 4
optimization: {
  splitChunks: {
    cacheGroups: {
      default: false,
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendor',
        chunks: 'all',
      },
    },
  },
},

Последние мысли

В целом, обновление не было * слишком * сумасшедшим. Стоило ли? Определенно! Мы не только стали более комфортно работать с конфигурацией сборки, но и увидели, что время сборки сократилось, и теперь можем быть уверены в том, что мы используем новейшие модули и систему сборки.

Сообщите мне, если вы нашли это полезным (или бесполезным), обнаружили ошибку или у вас есть какие-либо вопросы о веб-пакете или выполнении обновления, в комментариях ниже! Спасибо за прочтение!