Простой для понимания веб-пакет

Я долго готовился и всегда хотел иметь хорошее представление о Webpack.Мне всегда не нравились проблемы с Webpack, и я предпочитаю Parcel, инструмент для упаковки модулей с нулевой конфигурацией, но на самом деле Webpack надежнее, а Webpack мощнее. Поскольку я не знал Node.js, когда в последний раз изучал Webpack, я много раз чувствовал себя беспомощным.__dirnameЯ думаю, что это очень сложно. После изучения Node.js, а затем изучения Webpack будет легче понять. На этот раз я буду иметь более глубокое понимание Webpack и постараюсь оторваться от него в будущем.create-react-appилиVue-CliЭто инструмент создания лесов, или вы можете написать набор скриптов для автоматической настройки среды разработки.

Поскольку Webpack выпустил последнюю версию Webpack 4.0 на момент написания этой заметки, эта заметка предназначена для изучения Webpack 4.0.webpack 4.8.3, Кроме того, для использования командной строки Webpack 4.x необходимо установить отдельный инструмент командной строки.Инструмент командной строки Webpack, используемый автором,webpack-cli 2.1.3, Узнайте, когда вы можете развернуть среду разработки в соответствии с этим требованием.

Кроме того, перед изучением вебпака желательно иметь некоторое представление о ES6, Node.js, а еще лучше использовать скаффолдинг.

1. Основные понятия

Webpack имеет четыре основных концепции.Если вы хотите начать работу с Webpack, вы должны сначала понять эти четыре основные концепции. они соответственноEntry（入口）,Output（输出）,loaderа такжеPlugins（插件）. Эти четыре основные концепции подробно описаны ниже.

1.Entry

Entry — это индикатор точки входа Webpack, который указывает, с какого модуля webpack должен начинаться в качестве начала его внутреннего графа зависимостей сборки. Атрибут входа можно настроить в файле конфигурации (webpack.config.js), чтобы указать одну или несколько точек входа,По умолчанию./src(веб-пакет 4 начал вводить значения по умолчанию).

Конкретный метод настройки:

entry: string | Array<string>

Одна строка первого представляет собой отдельный файл записи для конфигурации, а когда она настроена как последний (массив), это запись, состоящая из нескольких файлов.

Также вы можетеКонфигурация через синтаксис объекта:

entry: {
    [entryChunkName]: string | Array<string>
}

Например:

//webpack.config.js
module.exports = {
    entry: {
        app: './app.js',
        vendors: './vendors.js'
    }
};

Вышеупомянутая конфигурация означает, что начиная со свойств приложения и поставщика, чтобы упаковать и построить дерево зависимостей, Преимущество этого состоит в том, чтобы разделить код бизнес-логики, разработанный вами, и исходный код сторонней библиотеки, потому что после стороннего библиотека установлена, исходный код в основном не меняется, поэтому она упакована отдельно, что выгодно для повышения скорости упаковки и уменьшения количества файлов упаковки.Vue-CliЭто режим раздельной упаковки. Но от приведенного выше синтаксиса можно отказаться в пользу лучшего подключаемого модуля DllPlugin для разделения кода.

2.Output

Свойство Output сообщает webpack, куда выводить созданные им пакеты, а также может указывать имя пакета.Расположение по умолчанию./dist. Вся структура приложения будет скомпилирована в указанную выходную папку.Самые основные свойства включаютfilename(имя файла) иpath(выходной путь).

Стоит отметить, что даже если вы настроите несколько файлов входа, у вас может быть только одна точка вывода.

Конкретный метод настройки:

output: {
    filename: 'bundle.js',
    path: '/home/proj/public/dist'
}

Примечательно,output.filenameЭто должен быть абсолютный путь. Если это относительный путь, webpack выдаст исключение при упаковке.

При наличии нескольких записей используйте следующий синтаксис для вывода нескольких пакетов:

// webpack.config.js
module.exports = {
    entry: {
        app: './src/app.js',
        vendors: './src/vendors.js'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    }
}

Приведенный выше файл конфигурации App.js и Vendors.js Выход будет упакован в__dirname + '/dist'Вниз.

3.Loaders

Загрузчик можно понимать как компилятор веб-пакета, который позволяет веб-пакету обрабатывать некоторые файлы, отличные от JavaScript, такие как png, csv, xml, css, json и другие типы файлов.Использование подходящего загрузчика может разрешить импорт JavaScript для импорта не-JavaScript Модули JavaScript. JavaScript только думает, что файлы JavaScript являются модулями, а идея дизайна веб-пакета заключается в том, что все является модулем.Чтобы веб-пакет распознавал другие «модули», необходим загрузчик «компилятор».

Загрузчик конфигурации в webpack преследует две цели:

• (1) тестовый атрибут: это регулярное выражение, помечающее, какие файлы с суффиксами следует обрабатывать.
• (2) использовать атрибут: укажите, какой загрузчик следует использовать для предварительной обработки файлов типа test.

Например, webpack.config.js:

module.exports = {
    entry: '...',
    output: '...',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: 'css-loader'
            }
        ]
    }
};

Этот файл конфигурации инструктирует все файлы css вimportОн должен быть обработан css-loader, после обработки css-loader его можно использовать непосредственно в модулях JavaScript.importоператор для импорта модуля css. но использоватьcss-loaderПредпосылка состоит в том, чтобы сначала использовать npm для установкиcss-loader.

Здесь следует отметить, что при определении правил загрузчика он определяется не в атрибуте rules объекта, а в атрибуте rules атрибута модуля.

Настроить несколько загрузчиков:

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

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

Кроме того, конфигурация загрузчика может быть выполнена встроенной:

import Styles from 'style-loader!css-loader?modules!./style.css'

Но это не рекомендуемый метод, попробуйте использоватьmodule.rulesнастроить.

4.Plugins

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

Плагины являются основными функциями веб-пакета и в настоящее время в основном решают многие другие сложные функции, которые не может выполнить загрузчик.пройти черезpluginsСвойства с использованием плагинов:

// webpack.config.js
const webpack = require('webpack');
module.exports = {
    plugins: [
        new webpack.optimize.UglifyJsPlugin()
    ]
}

Просто передайте массив экземпляров в свойство plugins.

5.Mode

Режим (Mode) можно настроить через объектmodeСвойства для настройки, основное значениеproductionилиdevelopment. Разница между двумя режимами заключается в том, что один компилируется и упаковывается для производственной среды, а другой компилируется и упаковывается для среды разработки. В режиме производственной среды webpack автоматически сжимает код и выполняет другие оптимизации, избавляя от проблем с настройкой.

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

Во-вторых, базовая конфигурация

Выполните следующие шаги, чтобы реализовать простую функцию упаковки webpack:

• (1) Создайте папку проекта с любым местоположением и именем и переключите текущий путь cmd или git bash на папку проекта.

• (2) Установите webpack и webpack-cli в среду разработки:

    npm install webpack webpack-cli --save-dev
  

• (3) Создайте следующие файлы и каталоги в папке проекта:

  • /src
    • index.js
    • index.css
  • /dist
    • index.html
  • webpack.config.js

• (4) Установкаcss-loader:

    npm install css-loader --save-dev
  

• (5) Конфигурацияwebpack.config.js:

    module.exports = {
        mode: 'development',
        entry: './src/index.js',
        output: {
            path: __dirname + '/dist',
            filename: 'bundle.js'
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: 'css-loader'
                }
            ]
        }
    };
  

• (6) вindex.htmlвведен вbundle.js:

    <!--index.html-->
    <html>
        <head>
            <title>Test</title>
            <meta charset='utf-8'/>
        </head>
        <body>
            <h1>Hello World!</h1>
        </body>
        <script src='./bundle.js'></script>
    </html>
  

• (7) вindex.jsДобавить:

    import './index.css';
    console.log('Success!');
  

• (8) В каталоге проекта используйте следующую команду для упаковки:

    webpack
  

  Смотрите вывод, вы можете дважды щелкнуть/dist/index.htmlПроверьте наличие ошибок и вывод консоли.

3. Как использовать веб-пакет со скриптами Node?

webpack предоставляет Node API, который нам удобен для использования webpack в скриптах Node.

Основной код выглядит следующим образом:

// 引入webpack模块。
const webpack = require('webpack');
// 引入配置信息。
const config = require('./webpack.config');
// 通过webpack函数直接传入config配置信息。
const compiler = webpack(config);
// 通过compiler对象的apply方法应用插件，也可在配置信息中配置插件。
compiler.apply(new webpack.ProgressPlugin());
// 使用compiler对象的run方法运行webpack，开始打包。
compiler.run((err, stats) => {
    if(err) {
        // 回调中接收错误信息。
        console.error(err);
    }
    else {
        // 回调中接收打包成功的具体反馈信息。
        console.log(stats);
    }
});

В-четвертых, динамически генерируйте index.html и bundle.js.

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

Зачем добавлять хэш-значение?

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

Как добавить хеш в файл бандла?

Просто нужно установить вывод, вoutput.filenameдобавлено в[hash]к имени файла, например:

// webpack.config.js
module.exports = {
    output: {
        path: __dirname + '/dist',
        filename: '[name].[hash].js'
    }
};

Теперь, когда файл пакета может быть сгенерирован динамически, как динамически добавить пакет в файл HTML?

После каждого файла комплекта пакетов его имя будет меняться каждый раз, когда искусственно модифицировать соответствующий файл HTML, чтобы добавить ссылки на файлы JavaScript, это действительно раздражает, тогда необходимо использовать мощный подключаемый модуль веб-пакета, и есть вызовhtml-webpack-pluginПлагин, который может автоматически генерировать файлы HTML. Установить в среду разработки:

npm install html-webpack-plugin --save-dev

После установки вwebpack.config.js, и добавьте его экземпляр в свойства плагина (plugins):

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // other configs ...
    plugins: [
        new HtmlWebpackPlugin({
            // options配置
        })
    ]
};

В настоящее время вы можете видеть, что каждый раз, когда создается пакетный файл, соответствующий html-файл будет создаваться динамически.

Вы также можете увидеть в коде вышеHtmlWebpackPluginКонструктору плагина также можно передать объект конфигурации в качестве параметра. Более полезные свойства конфигурации:title(укажите содержимое тега title в HTML и заголовок страницы),template(укажите HTML-файл шаблона) и т. д. Для получения более подробной справочной информации посетите:Html-Webpack-Plugin

5. Очистите папку /dist

Поскольку сгенерированный файл JavaScript каждый раз имеет другое имя, новый файл не перезапишет старый файл, а старый файл будет существовать только в/distВ папке, по мере увеличения количества компиляций, эта папка будет становиться все более и более раздутой, поэтому вы должны найти способ очищать каждый раз, когда вы создаете новый файл пакета./distПапки Чтобы убедиться, что папки чистые и опрятные, есть два лучших способа справиться с ними:

Если вы являетесь скриптом Node, вызывающим упаковку веб-пакета:

Если вы вызываете webpack через Node API для упаковки, вы можете использовать модуль Node fs, чтобы удалить его непосредственно перед упаковкой./distВсе файлы в папке:

const webpack = require('webpack');
const config = require('./webpack.config');
const fs = require('fs');
const compiler = webpack(config);

var deleteFolderRecursive = function(path) {
    if (fs.existsSync(path)) {
        fs.readdirSync(path).forEach(function(file, index){
            var curPath = path + "/" + file;
            if (fs.lstatSync(curPath).isDirectory()) { // recurse
                deleteFolderRecursive(curPath);
            } else { // delete file
                fs.unlinkSync(curPath);
            }
        });
        fs.rmdirSync(path);
    }
};

deleteFolderRecursive(__dirname + '/dist');
compiler.run((err, stats) => {
    if(err) {
        console.error(err);
    }
    else {
        console.log(stats.hash);
    }
});

Вы можете видеть, что вызовcompiler.runПеред упаковкой используйте обычайdeleteFolderRecursiveметод удален/distвсе файлы в каталоге.

Если вы используете webpack-cli для упаковки

В настоящее время вы должны выполнить эту задачу с помощью подключаемого модуля веб-пакета.clean-webpack-plugin.

Установить:

npm install clean-webpack-plugin --save-dev

затем вwebpack.config.jsДобавьте плагин в файл:

// webpack.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    plugins: [
        new CleanWebpackPlugin(['dist'])
    ]
};

После повторной упаковки вы обнаружите, что все предыдущие файлы упаковки были удалены.

6. Создайте среду разработки

Существует много различий между средой разработки и производственной средой.В производственной среде больше внимания уделяется эффективности производства.Поэтому код должен быть сжат и оптимизирован, а некоторые инструменты отладки, которые не нужны в производственной среде,должны быть удалены.Это необходимо только для повышения эффективности и производительности приложения. Среда разработки больше связана с отладкой и тестированием.Чтобы облегчить разработку, нам нужно создать подходящую среду разработки.

(1) Отладка с использованием исходных карт

Зачем использовать исходные карты?

Поскольку веб-пакет сжимает, упрощает и даже заменяет имена переменных после упаковки исходного кода, в браузере код не может быть отлажен построчно, и всем необходимо использовать исходные карты для отладки, что делает нас. Вы можете увидеть исходный код в в браузере, а затем отлаживать точки останова построчно.

Как использовать исходные карты?

добавить в конфигурациюdevtoolимущество, закрепленное заsource-mapилиinline-source-mapТо есть последняя информация об ошибке является более конкретной и будет указывать конкретное место ошибки в исходном коде, иsource-mapПараметры не указывают конкретное место в исходном коде.

(2) Использование средств разработки

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

• включить режим часов
• использовать webpack-dev-сервер
• использовать промежуточное ПО webpack-dev

(1) Использовать режим часов

В использованииwebpack-cliПри упаковке передать командуwebpack --watchВы можете включить режим наблюдения.После входа в режим наблюдения, как только модуль в дереве зависимостей изменится, веб-пакет будет перекомпилирован.

(2) Используйте webpack-dev-сервер

использовалcreate-react-appилиVue-CliДетская обувь этого вида подмостей знает, что по командеnpm run startВы можете создать локальный сервер, и веб-пакет автоматически откроет браузер, чтобы открыть разрабатываемую вами страницу, и как только вы измените файл, браузер автоматически обновится, в основном достигнув эффекта того, что вы видите, это то, что вы получаете, а именно лучше, чем режим просмотра веб-пакета, более удобный и мощный.

Инструкции:

• ① Установите сервер webpack-dev:

    npm install --save-dev webpack-dev-server
  

• ② Измените файл конфигурации и добавьте атрибут devServer:

    // webpack.config.js
    module.exports = {
        devServer: {
            contentBase: './dist'
        }
    };
  

• ③ Добавьте атрибут команды вpackage.json:

    // package.json
    {
        "scripts": {
            "start": "webpack-dev-server --open"
        }
    }
  

• ④ выполнить команду

    npm run start
  

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

Кроме того, вы можете указать дополнительную информацию о конфигурации в атрибуте devServer, например, порт сервера разработки, режим горячего обновления, необходимость сжатия и т. д. Конкретный запрос:Webpack

Использование через Node APIwebpack-dev-server:

'use strict';

const Webpack = require('webpack');
const WebpackDevServer = require('../../../lib/Server');
const webpackConfig = require('./webpack.config');

const compiler = Webpack(webpackConfig);
const devServerOptions = Object.assign({}, webpackConfig.devServer, {
    stats: {
        colors: true
    }
});
const server = new WebpackDevServer(compiler, devServerOptions);

server.listen(8080, '127.0.0.1', () => {
    console.log('Starting server on http://localhost:8080');
});

(3) Используйте промежуточное ПО webpack-dev

webpack-dev-middlewareэто соотношениеwebpack-dev-serverболее простые плагины,webpack-dev-serverЭтот плагин также используется, поэтому его можно понимать какwebpack-dev-middlewareУровень инкапсуляции ниже, и его сложнее использовать, но низкая инкапсуляция означает более высокую степень настройки.webpack-dev-middlewareДополнительные настройки могут быть определены для удовлетворения большего количества потребностей в разработке, это основано на экспресс-модуле.

Я не буду вдаваться в подробности об этом, потому чтоwebpack-dev-serverОн смог справиться с большинством сценариев развития, и нет необходимости устанавливать дополнительные экспресс-атрибуты.Детская обувь, которая хочет узнать о ней больше, может узнать о:Используйте промежуточное ПО webpack-dev

(4) Настройка IDE

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

Конкретная ссылка:Настроить текстовый редактор

(3) Горячая замена модуля

Горячая замена модулей (HMR) относится к замене, добавлению и удалению модулей во время работы приложения, и браузер может отображать соответствующие изменения без обновления страницы.

Инструкции:

• (1) Добавьте атрибут hot к атрибуту devServer и присвойте ему значение true:

    // webpack.config.js
    module.exports = {
        devServer: {
            hot: true
        }
    }
  

• (2) Добавьте два плагина в файл конфигурации webpack:

    // webpack.config.js
    const webpack = require('webpack');
    module.exports = {
        devServer: {
            hot: true
        },
        plugins: [
            new webpack.NamedModulesPlugin(),
            new webpack.HotModuleReplacementPlugin()
        ]
    };
  

• (3) внижняя часть входного файлаДобавьте код для уведомления webpack при изменении всего кода:

    if (module.hot) {
        module.hot.accept('./print.js', function() {
            console.log('Accepting the updated intMe module!');
            printMe();
        })
    }
  

Горячую замену модуля трудно контролировать и она подвержена ошибкам.Рекомендуется использовать разные загрузчики в разных конфигурациях разработки, чтобы упростить процесс HMR. Конкретная ссылка:Другой код и фреймворки

Семь, создайте производственную среду

Для рабочей среды требуется лаконичный код и отличная производительность, для разработки требуется быстрая разработка и удобное тестирование, а код не требует лаконичности, поэтому цель упаковки webpack в двух средах разная, поэтому файлы конфигурации лучше разделить в двух средах. Для отдельных файлов конфигурации по-прежнему необходимо интегрировать информацию о конфигурации при использовании webpack.webpack-mergeЯвляется хорошим инструментом интеграции (также используется Vue-Cli).

Инструкции:

• (1) Установите слияние веб-пакетов:

    npm install webpack-merge --save-dev
  

• (2) Создайте три файла конфигурации:

  • webpack.base.conf.js
  • webpack.dev.conf.js
  • webpack.prod.conf.js

  в,webpack.base.conf.jsУказывает самую основную информацию о конфигурации, информацию, которую необходимо установить как в среде разработки, так и в производственной среде, напримерentry,output,moduleЖдать. Настройте некоторую информацию, относящуюся к соответствующей среде, в двух других файлах, а затем передайтеwebpack-mergeмодуль сwebpack.base.conf.jsинтеграция.

• (3) Добавьте сценарии npm:

    // package.json
    {
        "scripts": {
            "start": "webpack-dev-server --open --config webpack.dev.conf.js",
            "build": "webpack --config webpack.prod.conf.js"
        }
    }
  

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

Восемь, оптимизация производительности

TreeShaking

TreeShaking означает удаление неиспользуемого кода в файлах JavaScript, и webpack 4 расширяет эту часть функциональности. Настроив свойство sideEffects файла package.json, вы можете указать, какие файлы могут удалять избыточный код. Если sideEffects имеет значение false, это означает, что неиспользуемый код в файле можно безопасно удалить без побочных эффектов. Если избыточный код в некоторых файлах нельзя удалить, то можно задать для свойства sideEffects массив, а содержимым массива будет строка пути к файлу.

Указав файл без побочных эффектов, установите режим «производство», снова соберите код и обнаружите, что неиспользуемый код был удален.

Tips

• существуетmodule.rulesproperties установите свойство include, чтобы указать, какие файлы должны быть обработаны загрузчиком.
• Используйте только необходимые загрузчики.
• Держите последнюю версию.
• Уменьшите количество файлов проекта.

Девять, создавайте приложения PWA через веб-пакет

Прогрессивное веб-приложение (PWA) — это разновидность веб-приложения (веб-приложения), которое может предоставлять возможности, аналогичные собственному приложению (собственное приложение), и приложение может продолжать выполнять функции в автономном режиме (офлайн). Это достигается за счет Технология сервисных работников. PWA — это популярная концепция в последние годы. Его ядром является прокси-сервер, построенный между браузером клиента и сервером, реализованным с помощью технологии сервис-воркеров. зарегистрированные файлы; когда сеть отключена, браузер будет обращаться к сервисному работнику прокси-сервера, так что к странице можно будет получить доступ даже при отключенной сети, реализуя разработку веб-сайтов, аналогичную нативным приложениям.create-react-appРеализована конфигурация для разработки PWA.

Ниже описано, как быстро разработать PWA через webpack.

• (1) Установите плагинworkbox-webpack-plugin:

    npm install workbox-webpack-plugin --save-dev
  

• (2) Введите плагин в файле конфигурации:

    // webpack.config.js
    const WorkboxPlugin = require('workbox-webpack-plugin');
    module.exports = {
        plugins: [
            new WorkboxPlugin.GenerateSW({
                clientsClaim: true,
                skipWaiting: true
            })
        ]
    };
  

• (3) Используйте webpack для компиляции и упаковки service-worker.js

• (4) Зарегистрируйте сервисного работника в нижней части файла ввода:

    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('/service-worker.js').then(registration => {
                console.log('SW registered: ', registration);
            }).catch(registrationError => {
                console.log('SW registration failed: ', registrationError);
            });
        });
    }
  

• (5) Откройте страницу и выполните отладку:

    npm run start
  

• (6)Открываем средство отладки браузера и проверяем вывод консоли.Если выводится "SW Registered:......", значит регистрация сервис-воркера прошла успешно.Далее можно отключать сеть , или закройте сервер и снова обновите его. Убедитесь, что страница все еще может отображаться.

10. Справочные статьи

• официальная китайская документация webpack

11. Резюме

Webpack — действительно мощный инструмент для упаковки модулей, а богатые загрузчики и плагины делают его еще более мощным. Изучение веб-пакета позволяет нам настраивать нашу среду разработки без зависимостей.create-react-appа такжеVue-CliЭтот тип скаффолдинга также может обрабатывать код в разных решениях для разных нужд. Это примечание носит лишь вводный характер. Если вы действительно хотите построить более сложную среду разработки и производственную среду, вам нужно знать множество загрузчиков и плагинов. К счастью, официальный сайт webpack предоставляет все инструкции, которые могут предоставить пользователям рекомендации по использованию:

• webpack loaders
• webpack plugins

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