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

Webpack из коробки поддерживает форматы модулей ES2015, CommonJS и AMD. Механизм загрузчика работает и для CSS, с поддержкой @import и url () через css-loader.

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

1. Выполните следующую команду в терминале:

$ npm init -y
// it will create package.json into project root

2. Установите Webpack:

$ npm install --save webpack

3. В package.json внутри тега скрипта:

"scripts": { "start" : "webpack" }

Как только мы запустим npm start в терминал.

Сначала он будет искать конфигурацию. Если в проекте нет конфигурации, он будет искать index.js в src. Если не будет и index.js, то он выдаст ошибку:

ОШИБКА в модуле ввода не найдена: ошибка: не удается разрешить "./src" в пути к папке

Чтобы устранить ошибку, создайте index.js в корневом каталоге.

index.js:

alert("hello webpack");

Теперь запустите $ npm start.

Он выполнит код и автоматически сгенерирует папку dist. Внутри dist будет файл main.js, который включает код (webpack и index.js).

Но код не будет выполнен, пока мы не импортируем папку dist в index.html.

index.html:

<script src="/dist/main.js" ></script>

ПРИМЕЧАНИЕ: чтобы иметь загрузчик или любой плагин, нам нужен файл конфигурации.

Создайте webpack.config.js в корневом проекте:

webpack.config.js:

module.exports = 
  { 
    mode : "development",
    entry: "./src/index.js",
    output: 
      { 
         // the first thing we can configure is file name
         filename: "hello.js", 
         // where to do , where to actually split the code 
         // Import path from module which comes with node called path 
         // path.resolve(__dirname,..) : It mainly resolve absolute path to the New_folder_name   directory. Wherever the current directory is. e.x. in my lappy: /Users/Projects/ Work/webpack-work // "dist" name of the folder where we want to code be going path: path.resolve(__dirname, "New_folder_name") } }
      }
}

Погрузчики:

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

загрузчик стилей и загрузчик CSS

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

$ npm install —save-dev style-loader css-loader

webpack.config.js:

module.exports = 
  { 
    mode : "development",
    entry: "./src/index.js",
    output: 
      { 
         filename: "hello.js" ,
         path.resolve(__dirname, "New_folder_name") } }
      },
    module: 
       { 
         rules: [ 
           { 
  // files which ends with .css use the below loader 
   test: /\.css$/, use: ["css-loader"] 
}
         ]
     }
}

Запустите npm start:

мы видим, что это есть в файле hello.js, который был создан через webpack внутри папки dist. Но этот стиль не был применен в DOM, хотя код включен. Вот где появляется загрузчик стилей.

Загрузчик CSS превращает ваш CSS в JS

Загрузчик стилей берет ваш Javascript, который на самом деле является css, и внедряет его в DOM.

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

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

use: ["style-loader", "css-loader"]

SASS:

Sass - самый зрелый, стабильный и мощный язык расширений CSS профессионального уровня в мире.

В config мы будем использовать sass-loader, который компилирует код в css. Затем мы берем css и превращаем его в JS, а затем берем JS и превращаем его в DOM.

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

Установить:

$ npm install —save-dev sass-loader node-sass

webpack.config.js:

module.exports = 
  { 
    mode : "development"
    entry: "./src/index.js",
    output: 
      { 
         filename: "hello.js", 
         path.resolve(__dirname, "New_folder_name") } }
      },
    module: 
       { 
         rules: [ 
           { 
  // files which ends with .css use the below loader 
   test: /\.scss$/,
   use: [
"style-loader", // 3rd. style loader inject styles into DOM
"css-loader", // 2nd. CSS loader turns css into common JS
"sass-loader" //1st. SASS loader which turns sass into CSS
}
         ]
     }
}

Спасибо, что прочитали эту статью. ♥ ️

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

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

Надеюсь, этот блог был вам полезен. Если у вас возникнут вопросы, напишите мне на @suprabhasupi 😋

🌟 Twitter | 👩🏻‍💻 suprabha.me