что такое рабочий процесс style-loader и css-loader - PullRequest
Новая
       30

что такое рабочий процесс style-loader и css-loader

0 голосов
/ 01 октября 2019

Я новичок в вебпаке, все еще немного смущен тем, как вебпак взаимодействует с загрузчиками. Ниже приведен файл машинописи index.ts: 

//index.ts

import "bootstrap/dist/css/bootstrap.css";

...
// typescript code

, ниже приведен файл конфигурации веб-пакета: 

module.exports = {
    mode: "development",
    entry: "./src/index.ts",
    output: { filename: "bundle.js" },
    resolve: { extensions: [".ts", ".js", ".css"] },
    module: {
        rules: [
            { test: /\.ts/, use: "ts-loader", exclude: /node_modules/ },
            { test: /\.css$/, use: ["style-loader", "css-loader"] }
        ]
    }
};

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

Шаг 1-Webpack встречает index.ts, поэтому он передает этот файл ts-loader, и ts-loader читает файл и передает его компилятору ts, компилятор ts генерирует jsфайл кода index.js и передача обратно в ts-loader, затем ts-loader передача index.js обратно в веб-пакет.

Шаг 2 - Веб-пакет читает index.js и должен разрешить файл CSS, поэтому веб-пакет передаетзадача css-loader, поэтому css-loader читает файл css как длинную длинную строку, а затем передает задачу в style-loader, что создает код js, который может быть встроен в теги в файле index.html.

Шаг 3- bundle.js готов, и клиент отправляет http-запрос для получения index.html, и bundle.js выбирается и создает теги

1 Ответ

2 голосов
/ 01 октября 2019

Правильно ли мое понимание выше?

Да

Q1 - после того, как style-loader генерирует код js, передает ли этот код js обратно в css-loader, затем css-loader передает полученный js-код в webpack? или style-loader передает сгенерированный js-код в webpack напрямую?

Ответ: style-loader передает сгенерированный js-код в webpack напрямую

Q2 кажется, что style-loaderсначала используется, затем css-loader,

Это может показаться неправильным. Но это одна из тех вещей, для которых вам нужно прочитать документы. Последнее, что нужно обработать, упоминается в верхней части массива. Лично я не думаю, что наоборот было бы более интуитивным.

...