Это по-прежнему то же, что и раньше. Некоторые концептуальные интервью могут быть протестированы. Я пометил их *, а остальные подытожу в двух предложениях. вы очень хорошо играете в вебпак, но этого достаточно для понимания процесса работы. В интервью вы обычно спрашиваете, как работает webpack, как работает Loader и какие меры по оптимизации вы используете?
Если вы считаете, что это полезно для вас, пожалуйста, дайте мне звездуgithub.com/skychenbo
Фронтенд-разработка была модульной, что улучшает инкапсуляцию и структуру кодовой базы. Инструменты для упаковки стали неотъемлемой частью проекта,
В наши дни существует несколько возможных вариантов, таких как webpack, grunt, gulp и т. д.
Webpack был очень популярен за последние несколько лет из-за его функциональности и расширяемости. Но конфигурация webpack всегда сбивает с толку,
Сегодня мы пройдем полную настройку из пустого файла конфигурации, чтобы упаковать файл.

концепция

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

install

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

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

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

contentBase,  // 为文件提供本地服务器
port, // 监听端口，默认8080
inline, // 设置为true,源文件发生改变自动刷新页面
historyApiFallback  // 依赖HTML5 history API,如果设置为true,所有的页面跳转指向index.html
devServer:{
    contentBase: './src' // 本地服务器所加载的页面所在的目录
    historyApiFallback: true, // 不跳转
    inline: true // 实时刷新
}
然后我们在根目录下创建一个'webpack.config.js'，在'package.json'添加两个命令用于本地开发和生产发布


"scripts": {
            "start": "webpack-dev-server",
            "build": "webpack"
        }

При использовании команды webpack она примет файл конфигурации webpack, если мы не используем другие операции.

entry

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

var baseConfig = {
        entry: './src/index.js'
    }

Когда нам нужно несколько файлов записей, мы можем записать запись как объект

var baseConfig = {
        entry: {
            main: './src/index.js'
        }
    }

Я рекомендую последний метод, так как он может стать громоздким по мере роста вашего проекта.

output

вывод: даже если имеется несколько входных файлов, имеется только одна выходная конфигурация

var path = require('path')
    var baseConfig = {
        entry: {
            main: './src/index.js'
        },
        output: {
            filename: 'main.js',
            path: path.resolve('./build')
        }
    }
    module.exports = baseConfig

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

output: {
        filename: '[name].js',
        path: path.resolve('./build')
    }

Теперь с такой небольшой конфигурацией вы можете запустить сервер и использовать команду npm start или npm run build локально, чтобы упаковать наш код для распространения.

Loader

Роль грузчика:
1. Реализовать обработку файлов в разных форматах, например преобразование scss в css или преобразование машинописного текста в js.
2. Преобразуйте эти файлы, чтобы их можно было добавить в граф зависимостей.
Загрузчик — одна из самых важных частей веб-пакета. Используя разные загрузчики, мы можем вызывать внешние скрипты или инструменты для обработки файлов в разных форматах. Загрузчики должны быть настроены с помощью модулей в webpack.config.js. Конфигурация выглядит следующим образом:

test: 匹配所处理文件的扩展名的正则表达式（必须）
    loader: loader的名称（必须）
    include/exclude: 手动添加处理的文件，屏蔽不需要处理的文件（可选）
    query: 为loaders提供额外的设置选项
    ex: 
        var baseConfig = {
            // ...
            module: {
                rules: [
                    {
                        test: /*匹配文件后缀名的正则*/,
                        use: [
                            loader: /*loader名字*/,
                            query: /*额外配置*/
                        ]
                    }
                ]
            }
        }

Чтобы загрузчик работал, нам нужно регулярное выражение для идентификации файла, который мы хотим изменить, а затем массив, представляющий
Указываем Loader, который собираемся использовать, естественно нужные нам загрузчики нужно установить через npm. Например, нам нужно парсить меньше файлов, тогда конфигурация webpack.config.js такая:

var baseConfig = {
                entry: {
                    main: './src/index.js'
                },
                output: {
                    filename: '[name].js',
                    path: path.resolve('./build')
                },
                devServer: {
                    contentBase: './src',
                    historyApiFallBack: true,
                    inline: true
                },
                module: {
                    rules: [
                        {
                            test: /\.less$/,
                            use: [
                                {loader: 'style-loader'},
                                {loader: 'css-loader'},
                                {loader: 'less-loader'}
                            ],
                            exclude: /node_modules/
                        }
                    ]
                }
            }

Вот несколько часто используемых загрузчиков:
babel-loader: Преобразование файлов js следующего поколения в файлы JS, которые могут поддерживать современные браузеры.
Babel немного сложен, поэтому большинство из них создаст новый .babelrc для настройки.
css-loader, style-loader: их рекомендуется использовать вместе для анализа файлов css, что может объяснить @import, url(). Если вам нужно меньше анализировать, добавьте загрузчик less
загрузчик файлов: сгенерированное имя файла представляет собой хэш MD5 содержимого файла и сохраняет исходное расширение ресурса, на который делается ссылка.
url-loader: функция похожа на file-loader, но когда размер файла ниже указанного предела, она может вернуть DataURL.На самом деле, при использовании less, scss, stylus, npm подскажет, какого плагина не хватает , чего не хватает, ты просто наденешь

Plugins

Плагины и загрузчик легко спутать, в чем разница между тем, чтобы сказать, что они являются внешними ссылками? На самом деле это две совершенно разные вещи. такЗагрузчики отвечают за обработку исходных файлов, таких как css, jsx, по одному файлу за раз. И плагины напрямую не манипулируют одним файлом,Он работает непосредственно на всем процессе сборки.Некоторые из наших часто используемых плагинов и их использование перечислены ниже.
ExtractTextWebpackPlugin: он будет ссылаться на файл css в записи и упаковывать его в отдельный файл css, а не встраивать в упакованный файл js. Ниже его приложение

var ExtractTextPlugin = require('extract-text-webpack-plugin')
        var lessRules = {
            use: [
                {loader: 'css-loader'},
                {loader: 'less-loader'}
            ]
        }

        var baseConfig = {
            // ... 
            module: {
                rules: [
                    // ...
                    {test: /\.less$/, use: ExtractTextPlugin.extract(lessRules)}
                ]
            },
            plugins: [
                new ExtractTextPlugin('main.css')
            ]
        }

HtmlWebpackPlugin:
Функция: на основе простого шаблона index.html создайте новый index.html, который автоматически ссылается на ваш упакованный файл js.

var HTMLWebpackPlugin = require('html-webpack-plugin')
            var baseConfig = {
                // ...
                plugins: [
                    new HTMLWebpackPlugin()
                ]
            }

HotModuleReplacementPlugin: позволяет автоматически обновлять предварительный просмотр измененных результатов в режиме реального времени при изменении кода компонента. Будьте осторожны, никогда не используйте HMR в производственной среде. Здесь общая ситуация делится на среду разработки, тестовую среду и производственную среду.
использование какnew webpack.HotModuleReplacementPlugin()
Все содержимое webpack.config.js

const webpack = require("webpack")
        const HtmlWebpackPlugin = require("html-webpack-plugin")
        var ExtractTextPlugin = require('extract-text-webpack-plugin')
        var lessRules = {
            use: [
                {loader: 'css-loader'},
                {loader: 'less-loader'}
            ]
        }
        module.exports = {
            entry: {
                    main: './src/index.js'
                },
                output: {
                    filename: '[name].js',
                    path: path.resolve('./build')
                },
                devServer: {
                    contentBase: '/src',
                    historyApiFallback: true,
                    inline: true,
                    hot: true
                },
                module: {
                    rules: [
                        {test: /\.less$/, use: ExtractTextPlugin.extract(lessRules)}
                    ]
                },
                plugins: [
                new ExtractTextPlugin('main.css')
            ]
        }

сборка стадии продукта

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

var ENV = process.env.NODE_ENV
    var baseConfig = {
        // ... 
        plugins: [
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify(ENV)
            })
        ]
    }

Затем нам также нужно изменить нашу команду сценария

"scripts": {
            "start": "NODE_ENV=development webpack-dev-server",
            "build": "NODE_ENV=production webpack"
        }

process.env.NODE_ENV будет заменен строкой, которая запускает компрессор, чтобы исключить недостижимые ветки кода разработки.
Следующий код может быть очень полезен, когда вы вводите код, который не будет запущен в производство.

if (process.env.NODE_ENV === 'development') {
            console.warn('这个警告会在生产阶段消失')
        }

Плагин оптимизации

Вот несколько плагинов для оптимизации кода
OccurenceOrderPlugin: назначайте идентификаторы компонентам, с помощью этого плагина веб-пакет может анализировать и определять приоритеты модулей, которые используются чаще всего, а затем назначать им наименьшие идентификаторы.
UglifyJsPlugin: Сокращение кода
Вот как их использовать
var baseConfig = {
// ...
new webpack.optimize.OccurenceOrderPlugin()
new webpack.optimize.UglifyJsPlugin()
}
Затем, когда мы используем сборку npm run, мы обнаружим, что код сжат

Суммировать

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