«Серия Webpack» — подробное объяснение использования плагина MiniCssExtractPlugin

Webpack
«Серия Webpack» — подробное объяснение использования плагина MiniCssExtractPlugin

1. Роль плагинов

This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.

После перевода: «Этот плагин извлекает CSS в отдельные файлы. Он создает файл CSS для каждого файла JS, содержащего CSS. Он поддерживает загрузку CSS и SourceMap по требованию».

包含CSS的JS文件，JS文件不是指组件对应的JS文件，是指打包后生成的JS文件。

Преимущества плагинов

До Webpack 4.0 для извлечения CSS использовался плагин ExtractTextWebpackPlugin, который имеет следующие преимущества:

  • Асинхронная загрузка
  • отсутствие дублирования компиляции (производительность)
  • проще в использовании
  • CSS специфичный

3. Простое использование плагинов

построить простойWenpack Demo, показывать.

Сначала установите плагин MiniCssExtractPlugin.

npm install --save-dev mini-css-extract-plugin

После успешной установки вwebpack.config.jsконфигурация в файле.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    entry: {
        main: "./src/main.js",
    },
    plugins:[
        new MiniCssExtractPlugin(),
    ],
    module:{
        rules:[
            {
                test: /\.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader']
            },
        ]
    }
}

Входной файлmain.js

import './css/main.css'
import './index'
console.log('main')

index.js

import './css/index.css'
import './index'
console.log('main')

main.cssа такжеindex.cssтот же контент

.class{
    color:red
}

Выполнение заказаwebpack, допустимыйdistТри файла, сгенерированные упаковкой, видны в папке

В проекте есть два JS-файла, содержащих CSS, но запакован и сгенерирован только один CSS-файл, что подтверждает вышесказанное. «Он создает файл CSS для каждого файла JS, который включает CSS» в файле JS, который включает CSS, относится кJS-файл, сгенерированный после упаковки.

открыть в браузереindex.html, вы можете увидеть это в инструментах разработчика, как показано ниже.

Упакуйте сгенерированный файл CSS дляlinkЗнакомство с этикеткой

Если вы не используете плагин MiniCssExtractPlugin, измените егоwebpack.config.jsконфигурация в файле.

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

повторно выполнитьwebpackЗаказ. открыть в браузереindex.html, вы обнаружите, что стиль используется в голове<style></style>Встроенный импорт.

Увидев это, вы также должны понимать роль плагина MiniCssExtractPlugin, который заключается в извлечении стиля CSS в JS, использованииlinkВнешнее введение, уменьшение размера файлов JS, называемое разделением стиля CCSS.

MiniCssExtractPlugin插件不能和style-loader共用

В-четвертых, параметры плагина

filename

управление из упаковкиВходИмя файла CSS, созданного путем извлечения стилей CSS из файла JS.

module.exports = {
    entry: {
        main: "./src/main.js",
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: '[name]-test.css',
        }),
    ]
}

воплощать в жизньwebpackкоманда, которая может бытьdistИмя упакованного и сгенерированного файла CSS в папке:main-test.css

chunkFilename

управление из упаковкиневъездИмя файла CSS, созданного путем извлечения стилей CSS из файла JS.

module.exports = {
    entry: {
        main: "./src/main.js",
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: '[name]-test.css',
            chunkFilename: '[name]-test.css'
        }),
    ]
}

main.js

import './css/main.css'
import(/*webpackChunkName: "index"*/ './index')
console.log('main')

воплощать в жизньwebpackкоманда, которая может бытьdistСмотрите незарегистрированные файлы JS в папкеindex.bundle.jsИзвлеченный файл CSS называетсяindex-test.css.

moduleFilename

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

если иfilenameсовместное использование параметров,filenameне будет работать.

module.exports = {
    entry: {
        main: "./src/main.js",
        main1: "./src/main1.js",
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            moduleFilename: (
                { name }) => {
                    return `${name}.css`
                },
        }),
    ],
}

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

ignoreOrder

Контролируйте, является ли порядок введения CSS непоследовательным или нет, чтобы предупредить,trueпредупреждать,falseУказывает на отсутствие предупреждения.

Проще говоря, это проблема, вызванная порядком введения css в js.Если порядок введения нескольких css в js отличается, будет это предупреждение. Например, в 1.js порядок введения a.css, b.css, в 2.js порядок введения b.css, a.css, если порядок введения другой, это вызовет предупреждение. Настройте порядок введения на одинаковый в двух js, проблем нет. Порядок импорта в 1.js и 2.js настроен на a.css, а в b.css такого предупреждения нет.

Конечно, вы также можете установитьignoreOrderПараметрыfalse, отключить эти предупреждения.

Подробнее см. В этом вопросе на официальном сайте.

Пять, параметры подключаемого загрузчика

publicPath

Значение по умолчанию — webpackOptions.output, как показано ниже, значение по умолчанию —path.resolve(__dirname, 'dist').

module.exports = {
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, 'dist'),
    },
}

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

main.css

body{
    background: url('./LOGO.png');
}

main.jsвходной файл

import './css/main.css'
console.log('main')

потому чтоmain.cssВставьте изображения и используйте загрузчик файлов для их обработки. существуетwebpack.config.jsнастроено так

module.exports = {
    module: {
        rules: [
            {
                test: /\.png$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
        ],
    },
};

воплощать в жизньwebpackкоманда, упакованный и сгенерированный файл CSS выглядит следующим образомmain.cssСледующим образом картинка наdistв папкеimgпапку, затем откройте ее в браузереindex.html, картинку можно загрузить.

Если вы измените сгенерированный путь к файлу CSS.

module.exports = {
    plugins:[
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
        }),
    ]
}

повторно выполнитьwebpackкоманда, упакованный и сгенерированный файл CSS выглядит следующим образомmain.cssСледующим образом Или на картинкеdistв папкеimgпапку, но открыть в браузереindex.html,Изображение не может быть загружено.

потому чтоmain.cssСсылочный путь изображения вimg/LOGO.af6d901d.png, очевидно, что путь неверен, поэтому изображение не может быть загружено, поэтому измените путь ссылки изображения на../img/LOGO.af6d901d.pngЭто можно загрузить.

Но изменить файлы, сгенерированные упаковкой, невозможно, так как решить эту ошибку? На этом этапе отражается роль параметра publicPath.Вы можете использовать параметр publicPath, чтобы изменить ссылочный путь изображения и изменить его.webpack.config.jsКонфигурация.

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:'../'
                        }
                    },
                'css-loader']
            },
        ],
    }
}

повторно выполнитьwebpackкоманда, упакованный и сгенерированный файл CSS выглядит следующим образомmain.cssСледующим образом

открыть в браузереindex.html,картинки можно загрузить.

Роль publicPath указывает пользовательский общедоступный путь к целевому файлу, который можно понимать как указание../img/LOGO.af6d901d.pngсерединаimgпредыдущий путь../.

esModule

По умолчаниюfalse, от имени MiniCssExtractPlugin для создания модулей JS с использованием синтаксиса модуля CommonJS.

еслиtrue, от имени MiniCssExtractPlugin для создания модулей JS с использованием синтаксиса модуля ES6.

hmr

По умолчаниюfalse,дляtrueПри запуске горячего обновления файла стиля.

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

Как упоминалось выше, подключаемый модуль MiniCssExtractPlugin нельзя использовать совместно с загрузчиком стилей.Как правило, загрузчик стилей настраивается в среде разработки, а подключаемый модуль MiniCssExtractPlugin настраивается в рабочей среде. На самом деле, style-loader также может выполнять горячее обновление файлов стилей.

HMR is an opt-in feature that only affects modules containing HMR code. One example would be patching styling through the style-loader. In order for patching to work, the style-loader implements the HMR interface; when it receives an update through HMR, it replaces the old styles with the new ones.

Но горячее обновление файла стилей плагина MiniCssExtractPlugin более мощное, чем загрузчик стилей. например вpublicв папкеindex.htmlВведите файл стиля CSS. Если исходный код файла стиля CSS изменен, использование style-loader не приведет к горячему обновлению файла стиля, потому что style-loader выполняет горячее обновление только стилей, представленных в JS, а MiniCssExtractPlugin Плагин выполнит горячее обновление и загрузит все стили.

Обычно только в производственной средеhmrУстановить какtrue.

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:'../',
                            hmr: process.env.NODE_ENV === 'development',
                        }
                    },
                'css-loader']
            },
        ],
    }
}

reloadAll

if hmr does not work, this is a forceful method.

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

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:'../',
                            hmr: process.env.NODE_ENV === 'development',
                            reloadAll: true
                        }
                    },
                'css-loader']
            },
        ],
    }
}

6. Извлеките все CSS в один файл

Для этого используйте плагин SplitChunks. Конкретное использование плагина SplitChunks можно найти в другой моей статье:Подробное использование плагина Webpack SplitChunks

module.exports = {
    optimization: {
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true,
                },
            },
        },
    },
}

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

Категории