Интеграция postcss, автоматическое добавление префиксов

В webpack настройка alias (псевдонимов), можно использовать @ вместо src каталога.

Локальное обновление:

• Включите встроенный HMR Webpack, инкрементально обновляйте файлы css и js, исправляйте то, что нужно исправить, без перезагрузки страницы вы можете сразу увидеть результат изменений.

Динамический импорт:

Можно использовать синтаксис динамического импорта:

import().then();

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

Компиляция кода

Используйте style-loader и css-loader для обработки CSS, чтобы отделить CSS от JS.

Используйте sass-loader для обработки Sass, компилируйте файлы Sass в файлы CSS с помощью node-sass.

Используйте less-loader для обработки Less, компилируйте файлы Less в файлы CSS через less.

Используйте babel-loader для компиляции написанного кода ES6 и TS в соответствии с предустановленной средой и списком браузеров, генерируя код ES5, который могут понять браузеры.

Используйте vue-loader, чтобы скомпилировать файлы *.vue в компоненты Vue и преобразовать их в код JavaScript.

Разделение кода:

Разделите бизнес-код на блоки кода WebpackRuntime, сторонние зависимости, общие бизнес-коды и отдельные бизнес-коды.

Объединение кода:

Объедините один и тот же модуль, одну и ту же функцию или многократно используемый код, чтобы уменьшить размер пакета.

Сжатие и объединение:

Сжатие CSS: встроенные MiniCssExtractPlugin и OptimizeCSSAssetsPlugin сжимают и удаляют дубликаты из извлечённого CSS.

Сжатие JS: встроенный terser сжимает и удаляет дубликаты из извлечённого JS, terser используется для сжатия ES6.

Оптимизация встряхивания дерева:

Включите встроенное встряхивание дерева Webpack, запретите babel преобразовывать код в формат Commonjs, используйте статические объявления ESM для удаления неиспользуемых или неисполняемых блоков кода, уменьшая размер пакета.

Использование terser-webpack-plugin для удаления комментариев и console.log.

В производственной среде автоматически отключите sourcemap, сожмите и запутайте код js, css и html.

Среда разработки поддерживает горячее обновление модулей и sourcemap.

Использование vue-loader для реализации горячего обновления компонентов Vue.

Используемые загрузчики: css-loader / babel-loader /worker-loader/vue-loader/url-loader/style-loader/css-loader/sass-loader/file-loader.

Worker-loader может загружать файлы webworker, имена файлов должны заканчиваться на .worker.js.

Исправлены ошибки совместимости между webpack.HotModuleReplacementPlugin и worker-loader.

https://www.webpackjs.com/loaders/worker-loader/.

Ошибка исходит от веб-работника, потому что окно недоступно в Worker.

webpack.config.js:

module.exports = {
    output: {
        globalObject: `( (typeof window !== "undefined" ? window : false) ||
    (typeof WorkerGlobalScope !== "undefined" ? WorkerGlobalScope : false) ||
    this)`,
    },
};

Используемые плагины:

WorkboxWebpackPlugin.GenerateSW/MiniCssExtractPlugin/VueLoaderPlugin/HtmlWebpackPlugin/TerserPlugin/OptimizeCSSAssetsPlugin/webpack.HotModuleReplacementPlugin/WebpackDeepScopeAnalysisPlugin.

Предоставляет поддержку workbox для одностраничных приложений.

JavaScript Libraries for adding offline support to web apps.

Workbox — это набор библиотек и модулей Node, которые упрощают кэширование ресурсов и использование функций, используемых для создания прогрессивных веб-приложений.

Производительность:

Остановите ожидание в сети! Вы можете улучшить производительность веб-приложения, кэшируя и предоставляя файлы, поддерживаемые сервисными работниками.

Эластичность:

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

Улучшение:

Хотите создать прогрессивное веб-приложение? Workbox может легко создать автономный первоначальный опыт.

Зарегистрируйте google workbox service worker:

if ("production" === process.env.NODE_ENV) {
    if (
        location.hostname !== "localhost" &&
        "127.0.0.1" !== location.hostname
    ) {
        "serviceWorker" in navigator &&
            window.addEventListener(
                "load",
                function () {
                    navigator.serviceWorker
                        .register("service-worker.js")
                        .catch(() => {});
                },
                { once: true }
            );
    }
}

Или:

import "@masx200/webpack-react-vue-spa-awesome-config/registerserviceworker.js";

Стоя на плечах гигантов:

Вдохновлён конфигурацией webpack, разработанной Facebook Create-react-app, и сильно модифицирован.

Поддерживает webpack5:

1. «webpack-dev-server» не запускается.

Замените команду webpack-dev-server на webpack serve.

2. Плагин webpack-copyfiles-plugin больше не совместим, замените его напрямую на copy-webpack-plugin.

3. NamedModulesPlugin был заменён на optimization.moduleIds: 'named'.

4. Измените configuration.optimization.splitChunks.name.

configuration.optimization.splitChunks.name должен быть одним из следующих: false | string | function. Дайте чанкам имя (чханки с одинаковым именем). Пункт 5.

https://webpack.docschina.org/blog/2020-10-10-webpack-5-release/#changes-to-the-structure

[hash] как полное значение хэша компиляции, теперь не используется. Миграция: используйте [fullhash], или лучше выберите другие опции хэширования.

Пункт 6.

https://github.com/GoogleChrome/workbox/issues/1790

ПРЕДУПРЕЖДЕНИЕ в GenerateSW вызывалось несколько раз, возможно, из-за работы webpack в режиме --watch. Манифест предварительного кэширования, сгенерированный после первого вызова, может быть неточным! Пожалуйста, ознакомьтесь с дополнительной информацией.

Запускать плагин только в рабочей среде, не запускать этот плагин в среде разработки. new WorkboxWebpackPlugin.GenerateSW

Пункт 7.

https://webpack.docschina.org/configuration/module/#ruletype

ОШИБКА в ./src/index.js 1:0
Ошибка анализа модуля: 'import' и 'export' могут появляться только с 'sourceType: module' (1:0)

[
    {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        type: "javascript/auto",
        loader: require.resolve("babel-loader"),
    },
];

Пункт 8. soucemap

https://webpack.docschina.org/configuration/devtool/#root

module.exports = { devtool: isEnvDevelopment ? "inline-source-map" : false };

Пункт 9. Решение проблемы с неработающей горячей заменой модулей

https://www.cnblogs.com/guangzan/p/14744226.html

https://webpack.docschina.org/guides/hot-module-replacement/

Анализ причин

В корне проекта существует файл .browserslistrc или в package.json есть ключ «browserslist».

module.exports = {
    target: "web",
    devServer: {
        hot: true,
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
};