Webpack-ով CSS ֆայլերի մշակում

Նկարագիր

Այս հոդվածում կծանոթվենք, թե ինչպես է webpack-ը աշխատում CSS ֆայլերի հետ՝ կիրառում տարբեր loader-ներ (օրինակ՝ css-loader, style-loader, postcss-loader, sass-loader և այլ) և պլագիններ (օրինակ՝ MiniCssExtractPlugin), որոնք օգնում են մոդուլային, օպտիմալացված և արդյունավետ ձևով ներմուծել, վերամշակել և արտահանել styll-երը՝ ինչպես կոդ գրելու ռեժիմում , այնպես էլ արտադրական ռեժիմում:

Ներածություն

Ժամանակակից վեբ զարգացման ընթացքում մենք հաճախ կանգնում ենք այն խնդրի շուրջ, թե ինչպես ամենակարևոր styll-երը միավորել, մոդուլայնացնել և արտադրական ռեժիմում օպտիմալ ձևով արտահանել: Webpack-ը ներկայացնում է հզոր գործիքակազմ, որտեղ CSS ֆայլերը մշակվում են տարբեր փուլերի միջոցով՝ ապահովելով արագ և բարձր բեռնման արդյունավետություն: Այս հոդվածում կծանոթվենք webpack-ի գործողությունների մանրամասներին, որտեղ կարևոր դեր խաղում են loader-ները և պլագինները:

CSS ֆայլերի ներմուծում Webpack-ում

Հիմնականում, CSS ֆայլերը ներմուծվում են JavaScript մոդուլների միջոցով, օրինակ՝

    import './styles/main.css';

Այս գրելաձևը հուշում է webpack-ին, որ main.css ֆայլը պետք է ներառվի կախվածությունների գրաֆում: Webpack-ը հետո տեսնում է այս ֆայլը որպես մոդուլ և կիրառում է, կոնֆիգուրացիայում նշված համապատասխան loader-ները՝ կոնվերտացնելու համար CSS-ի կոնտենտը այնպիսի տեսքի, որն այնուհետև կարող է օգտագործվել այլ գործընթացներում:

---

Loader-ների դերը CSS ֆայլերի մշակմանը

css-loader

Բազային վերլուծում և թողարկում:

css-loader-ը կարդում է CSS ֆայլի կոնտենտը, վերլուծում է դրա կառուցվածքը, դիտարկում է բոլոր @import և url() հրամանները և փոխում դրանք կապված տվյալ մոդուլների կարգով:

CSS Modules աջակցության հնարավորություն:

Օրինակ, թույլ է տալիս scoped class-ներ օգտագործել, որով նվազվում են CSS-ի կոնֆլիկտները մեծ նախագծերում:

style-loader

Ինջեկտում է styll-երը DOM-ի մեջ:

style-loader-ը CSS-ի վերամշակված արդյունքը ստացվածը տեղադրում է ՝< style > թեգեի մեջ, որոնք այնուհետև տեղադրվում են HTML-ի < head > բաժնում:

Hot Reloading հնարավորություն:

Կոդ գրելու ընթացքում այդ մեխանիզմը հնարավորություն է տալիս արագ թարմացնել styll-երը առանց ամբողջ էջը վերբեռնելու:

PostCSS-loader

Ավտոմատ vendor prefix-ների ավելացում:

Օգտագործելով postcss-loader-ը, webpack-ը կարող է օգտագործել plugin-ներ, օրինակ՝ autoprefixer, որը ավտոմատ կերպով ավելացնում է vendor prefix-ներ CSS -ի վրա՝ ապահովելով լայնորեն համաժամկցվածություն տարբեր բրաուզերների վրա:

Preparation լեզուների լոդերներ

SASS, LESS, Stylus:

sass-loader, less-loader և այլ, թույլ են տալիս վերափոխել Preparation styll-ների լեզուներ ստանդարտ CSS-ի, ինչը հնարավորություն է տալիս գրաֆիկական և տեքստային styll-ների ավելի բարդ մշակում:

Պլագինների դերը CSS-ի արտադրական արդյունքների համար

MiniCssExtractPlugin

Օգտագործման կարեւորությունը արտադրական ռեժիմում:

Օպտիմալացում և caching:

Aյս պլագինը օգնում է մինիֆիկացնել styll-երը, նվազեցնել ֆայլի չափը և բարձրացնել caching-ի արդյունավետությունը, ինչը կարևոր է էջերի արագ բեռնման համար:

CSS-ի մինիֆիկացիա և օպտիմալիզացիա

CssMinimizerPlugin:

Այսպիսի պլագինները աշխատում են մինիֆիկացնել բոլոր արտահանված styll-երը, նվազեցնելով դրանց չափը և բարելավելով բեռնումը, ինչը հնարավորություն է տալիս ավելի արագ փոխադրել styll-երը օգտատերերին:

Օգտագործման կարգը. Կոդի օրինակ

Եկեք տեսնենք, թե ինչպես կարելի է կարգավորել webpack-ը CSS ֆայլերի մշակման համար՝ օգտագործելով համապատասխան loader-ներ և պլագիններ:

    // webpack.config.js

    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: __dirname + '/dist',
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              // Կոդ գրելու ընթացքում կարելի է օգտագործել 'style-loader',
              // արտադրական ռեժիմում՝ MiniCssExtractPlugin.loader-ը
              process.env.NODE_ENV !== 'production'
                ? 'style-loader'
                : MiniCssExtractPlugin.loader,
              'css-loader',
              'postcss-loader',
            ],
          },
          {
            test: /\.(scss|sass)$/,
            use: [
              process.env.NODE_ENV !== 'production'
                ? 'style-loader'
                : MiniCssExtractPlugin.loader,
              'css-loader',
              'postcss-loader',
              'sass-loader', // SASS-ի կոնվերտացման համար
            ],
          },
        ],
      },
      plugins: [
        new MiniCssExtractPlugin({
          filename: '[name].[contenthash].css',
        }),
      ],
      mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
    };

Կարևոր կետեր

Կախվածությունների գրաֆ:

Webpack-ը ստեղծում է կոնկրետ կախվածությունների գրաֆ, որտեղ CSS ֆայլերը համախմբվում են JavaScript մոդուլների հետ, ինչը թույլ է տալիս ավելի կազմակերպված և մոդուլային կառավարում։

Հետազոտման հոսք (Loader Pipeline)

Յուրաքանչյուր loader հատուկ կատարելություն ունի՝ սկսած CSS-ի վերլուծությունից, ընդհանրացնելուց մինչև styll-երի արտահանումը: