Хоть вите и пахнет, но вебпак еще надо изучить

Webpack
Хоть вите и пахнет, но вебпак еще надо изучить

четыре основные концепции

Вход

запись - это запись всего конфигурационного файла, нет ни одной.

Есть два типа входа и четыре конфигурации.

Два вида входа

  • запись в один файл
  • Запись нескольких файлов

Четыре конфигурации

  • значение представляет собой строку
  • значение является объектом
  • значение представляет собой массив
  • функция

демонстрация кода

Первая конфигурация (строка) в основном используется в одностраничных приложениях.

const { resolve } = require('path')
module.exports = {
  entry:resolve(__dirname,'src/index.js')
}

Вторая конфигурация (объект) в основном используется в многостраничных приложениях.

const { resolve } = require('path')
module.exports = {
  entry:{
    test:resolve(__dirname,'src/index.js'),
    test2:resolve(__dirname,'src/index2.js')
  }
}

Третья конфигурация (массив), эта конфигурация может использоваться реже, а также используется в одностраничных приложениях.Эта конфигурация в основном упаковывает 1-n элементов массива в 0 элементов, и иногда используется в js-совместимых, динамических цепочка DLL на

const { resolve } = require('path')
module.exports = {
  entry:[resolve(__dirname,'src/index.js'),resolve(__dirname,'src/index2.js')],
}

Четвертая конфигурация (функция), функция должна возвращать только один из трех вышеперечисленных

const { resolve } = require('path')
module.exports = {
  entry:()=>'./src/index.js',
}

output

Раз есть вход, значит должен быть и выход! Так же, как и человеку, ему тоже нужно тянуть *, если он хочет есть. Выход здесь, где упакованные вещи будут идти.

Общая конфигурация вывода

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

демонстрация кода 


const { resolve } = require('path')
module.exports = {
  output:{
    path:resolve(__dirname,'dist'),
    filename:'bundle.js',
    publicPath:'http:baidu.com'
  }
}

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


module.exports = {
  output:{
    filename:'[name]_[hash].js'
  }
}

хэш-значение

webpack предоставляет следующие хэши:

  • hash
  • chunkhash (тот же кусок того же хэша)
  • contenthash (один хеш на файл)

module

module.rules — это место конфигурации загрузчика, которое используется для решения проблемы совместимости кода.

Общая конфигурация module.rules

  • test (правила сопоставления загрузчика)
  • исключить (исключить файлы, которые не должны сопоставляться)
  • включить (соответствовать только тем, какие файлы)
  • загрузчик (какой загрузчик использовать, одиночный)
  • use (какие загрузчики использовать, несколько)

демонстрация кода 

  module.exports = {
   module:{
    rules:[
      {
        test:/\.html$/,
        exclude:/node_modelus/,
        include:/src/,
        loader:'html-loader',
      },
      {
        test:/\.css/,
        use:['style-loader','css-loader']
      }
    ]
  }
}

Общая конфигурация загрузчика

  • загрузчик (какой загрузчик использовать)
  • options (параметры передаются загрузчику, параметры опций различаются в зависимости от загрузчика)

демонстрация кода 

module.exports = {
  module:{
    rules:{
      test:/\.js$/,
      exclude:/node_modelus/,
      use:[
        // 没参数
        'thread-loader',
        // 有参数
        {
          loader:'babel-loader',
          options:{
            presets:['@babel/preset-env']
          }
        }
      ]
    }
  }
}

plugins

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

Нет единого использования плагинов, которое варьируется от плагина к плагину. Строго говоря, у них одинаковыеnew xxx

Некоторые часто используемые загрузчики

css связанные

  • style-loader (обрабатывает встроенные стили)
  • css-loader (обработка файлов .css)
  • postcss-loader (обработка совместимости css)
  • less-loader (обработка файлов .less)
  • sass-loader (обработка файлов .sass/.scss)
let comment = [
  "style-loader",
  "css-loader",
  {
    loader:"postcss-loader",
    options:{
      postcssOptions:{
        plugins:['postcss-preset-env']
      }
    }
  }
]
module.exports = {
  module:{
    rules:[
      {
        test:/\.css/,
        use:[
          ...comment
        ]
      },
      {
        test:/\.less$/,
        use:[
          ...comment,
          'less-loader'
        ]
      }
    ]
  }
}

связанные с js

  • babel-loader
  • @babel/core
  • @babel/preset-env
  • @babel/polyfill
module.exports = {
  entry:['@babel/polyfill','./src/index.js']
  ...
  module:{
    rules:[
      {
        test:/\.js$/,
        use:[
          {
            loader:'babel-loader',
            options:{
              presets:['@babel/preset-env']
              // 或者
              presets:[['env',{module:false}]]
            }
          }
        ]
      }
    ]
  }
}

связанный с файлом

  • url-loader
  • file-loader
  • html-loader
  module.exports = {
    ...
    module:{
      rules:[
        {
          test:/\.(png|jpg|gif)$/,
          use:[
            {
              loader:file-loader,
              options:{
                limit:4 *1024,
                name:'img/[name]_[hash:10].[ext]'
              }
            }
          ]
        },
        {
          test:/\.html$/,
          loader:'html-loader'
        }
      ]
    }
  }

vue связанные

  • vue-loader
  • vue-style-loader
  module.exports = {
    ...
    module:{
      rules:[
        {
          test:/\.vue$/,
          loader:'vue-loader'
        },
        {
          test:/\.css$/,
          use:[
            'vue-style-loader',
            'css-loader'
          ]
        }
      ]
    }
  }

оптимизация

среда разработки

  • HRM (горячая замена)
  • webpack-dev-сервер (локальный сервер)
  • soure-карта (отладка)
  • webpack-bundle-analyzer (представление анализа блоков кода, сгенерированных пакетами)
  • size-plugin (отслеживает изменение объема упакованных ресурсов)
  • speed-measure-webpack-plugin (анализ затратного по времени загрузчика и упаковки плагинов)

Производственная среда

оптимизация объема

  • извлечение css (плагин mini-css-extract)
  • css-сжатие (optimize-css-assets-webpack-plugin)
  • сжатие html (html-webpack-plugin)
  • внешние (за исключением третьих лиц, которые не должны быть упакованы)
  • js сжатие (режим производства включается автоматически)
  • tree-shake (режим производства включается автоматически (webpack4 ограничен EsModule; webpack5 не ограничен EsModule, CommonJs, отлично))
  • code-split ( optimization )
  • импорт (ленивая загрузка, предварительная загрузка (предупреждение о предварительной загрузке))

Оптимизация скорости упаковки

  • Многопоточная упаковка (thread-loader, happyPack
  • Динамическое связывание (DLL)
  • кеш бабеля (cache cacheDirectory)
  • исключить/исключить (исключить некоторые файлы, которые не нужно компилировать)
  • module.noParse (за исключением сторонних библиотек, которые не нужно компилировать загрузчиком)

Уведомление

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

разное

Категории