Подробный веб-пакет (1)

Webpack

предисловие

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

WebpackЯ должен написать серию, начиная сПредварительное исследование => углубленное изучение => фактический бой.

Сфокусируйся на"Привет ФЕ"Получайте более понятный контент.

Context

WebpackПри поиске относительного пути он начинается сcontextпоиск корневого каталога,contextЗначение по умолчаниюWebpackПуть запуска, при необходимости изменитеcontextЗначение также можно изменить вручную:

const path = require('path');

module.exports = {
  context: path.join(__dirname, 'src');
}

Тип контекста

Типы пример имея в виду
string path.join(__dirname, 'src') настраиватьWebpackконтекст,должен быть абсолютный путь

Теперь измените корневой каталог относительного пути наsrc, на этот раз с использованием относительного пути отsrcИщите в каталоге. Например, вышеentry, будет изsrcПоиск в каталоге, т.е.src/index.js.

Entry

entryдаWebpackЗапись модуля конфигурации,WebpackПри запуске сборки она начнется сentryФайл начинает рекурсивно разрешать все зависимые модули.

Например:

const path = require('path');

module.exports = {
  devtool: false,
  mode: 'development',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, './'),
  },
};

const module1 = require('module1');

module1();

function module1() {
  console.log('module1');
}

module.exports = module1;

ТакWebpackПри построении изindex.jsЗапустить, разрешить зависимостиmodule1, Итакmodule1Код упакован вbundle.js.

Например:

function module1() {
  console.log('module1');
}

module1();

Тип записи

Типы пример имея в виду
string ./index.js Путь к файлу модуля ввода, который может быть относительным путем
array ['./index.js', './main.js'] Путь к файлу модуля ввода, который может быть относительным путем
object { index: './index.js', main: ['./main.js', './src/index.js']} Конфигурация с несколькими записями, каждая запись генерирует однуchunk

Описание записи

  • dependOn: файл входа, от которого зависит текущий файл входа, то есть зависимый файл входа должен быть загружен до загрузки файла входа.
  • filename: укажите имя выходного файла после создания текущего входного файла.
  • import: Модули загружаются по папке при запуске сборки
  • library: параметры для настройки файла записи
  • runtime:Время выполненияchunkимя, если этот параметр установлен, будет создана среда выполнения с тем же именемchunk, иначе файл записи будет использоваться как среда выполнения

Например:

module.exports = {
  entry: {
    index: './index.js',
    main: {
      dependOn: 'index',
      import: './main.js',
    },
  },
};

буду ждать пока строитсяindexНачать после завершения сборкиmainсборка.

Для одной записи,dependOnа такжеruntimeне могут существовать одновременно:

module.exports = {
  entry: {
    index: './index.js',
    main: {
      dependOn: 'index',
      runtime: 'other',
      import: './main.js',
    },
  },
};

Эта ситуация не соответствует требованиям, и будет сообщено об ошибке.

Для одной записи,runtimeНе может быть существующим именем файла записи:

module.exports = {
  entry: {
    index: './index.js',
    main: {
      runtime: 'index',
      import: './main.js',
    },
  },
};

В этом случае он не соответствует требованиям, и будет сообщено об ошибке.

Остерегайтесь циклических зависимостей:

module.exports = {
  entry: {
    index: {
      dependOn: 'main',
      import: './index.js',
    },
    main: {
      dependOn: 'index',
      import: './main.js',
    },
  },
};

В этом случае возникнет циклическая зависимость, а также будет сообщено об ошибке.

Пример

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

Разделение кода и зависимостей

module.exports = {
  entry: {
    main: './src/app.js',
    vendor: './src/vendor.js',
  },
};

module.exports = {
  output: {
    filename: '[name].[contenthash].bundle.js',
  },
};

module.exports = {
  output: {
    filename: '[name].bundle.js',
  },
};

это говоритWebpackНужно упаковать два отдельныхchunk.

Преимущество этого в том, что некоторые зависимости, которые не будут изменены (например,jQuery Bootstrap) наvendorСреди них эти зависимости будут упакованы вместе для созданияchunk. Поскольку эти зависимости практически неизменны,contenthashТакже не будет изменений для лучшей оптимизации кэширования браузера.

многостраничное приложение

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js',
  },
};

это говоритWebpackНужно упаковать три отдельныхchunk.

В многостраничном приложении каждый раз при доступе к странице создается новаяHTMLдокументация. когда новыйHTMLПри загрузке документа ресурс также повторно загружается.

Для решения этой проблемыWebpackобеспечивает аналогичныйoptimization.splitChunksВозможность создавать общиеbundle. По мере увеличения количества записей в многостраничных приложениях преимущества этого механизма повторного использования кода будут увеличиваться.

chunkимя

  1. еслиentryТипstringилиarray, будет генерировать толькоchunk, а зовутmain;
  2. еслиentryТипobject, создаст несколькоchunk, названный какobjectизkey;

Динамически настроить запись

Если требуется динамическая конфигурацияentry,могуentryУстановите функцию, которая поддерживает как синхронные, так и асинхронные:

module.exports = {
  // 同步
  entry: function syncEntry() {
    return {
      index: './index.js',
      main: './main.js',
    };
  },
  // 异步
  entry: function asyncEntry() {
    return new Promise(function (resolve) {
      resolve({
        index: './index.js',
        main: './main.js',
      });
    });
  },
};

Многовходовая конфигурация

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

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js',
  },
  output: {
    filename: '[name].js',
  },
};

Output

outputдаWebpackВозможность настройки такой информации, как имя файла, путь и т. д. выходного файла. Для нескольких записей необходимо настроить только однуoutput.

Для самого простого использования требуется только настроить одинfilenameВарианты:

module.exports = {
  output: {
    filename: 'bundle.js',
  },
};

Эта конфигурация выводитbundle.jsсуществуетdistПод содержанием.

Категории