Загрузчики и плагины в webpack

Загрузчики (loaders) в webpack

Подробнее https://webpack.js.org/concepts/#loaders

По умолчанию webpack понимает только файлы JavaScript и JSON. Загрузчики (loaders) позволяют webpack обрабатывать другие типы файлов и преобразовывать их в допустимые модули, которые могут быть использованы вашим приложением и добавлены в граф зависимостей.

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

Для разбора файлов, загружаемых с помощью модулей (например, JavaScript-файлов, статических ресурсов, таких как изображения или стили и компиляторы), webpack использует загрузчики.

Загрузчики трансформируют другие типы файлов в модули, которые затем можно добавить в графу зависимостей вашего приложения (а значит, и в бандл).

Список всех загрузчиков https://webpack.js.org/loaders/.

Для использования загрузчиков webpack необходимо:

установить необходимые загрузчики (например, npm install --save-dev css-loader ts-loader);
выполнить начальные настройки в конфигурационном файле webpack.config.js сборщика webpack.

Начальная настройка осуществляется в разделе module.rules конфигурационного файла webpack.config.js сборщика webpack:

свойство test определяет, какие файлы должны быть трансформированы;
свойство use указывает загрузчик, который должен использоваться для выполнения трансформации.

module.exports = {
  entry: './app/index.js',
  module: {
    rules: [
      { test: /\.svg$/, 
        use: 'svg-inline-loader'
      }
    ]
  }
}

module.exports = {

entry: './app/index.js',

module: {

rules: [

{ test: /\.svg$/,

use: 'svg-inline-loader'

}

]

}

Замечания

Важно помнить, что при определении правил в конфигурации вашего веб-пакета вы определяете их в разделе module.rules, а не в rules.
Имейте в виду, что при использовании регулярного выражения для сопоставления файлов вы не можете его цитировать:
- /\.txt$/ инструктирует webpack сопоставлять любой файл, который заканчивается на .txt;
- '/\.txt$/' или "/\.txt$/" инструктирует webpack сопоставлять одиночный файл с абсолютным путем '.txt'; это, скорее всего, не ваше намерение.

[свернуть]

Пример webpack.config.js, созданного с помощью webpack-cli

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

const isProduction = process.env.NODE_ENV == 'production';

const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader';

const config = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        // Add your plugins here
        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/i,
                loader: 'babel-loader',
            },
            {
                test: /\.css$/i,  // компилятор webpack, дойдz до файла «.css» в require()/import, будет использовать загрузчик css-loader.
                use: [stylesHandler,'css-loader'],
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                type: 'asset',
            },
            // Add your rules for custom modules here
            // Learn more about loaders from https://webpack.js.org/loaders/
        ],
    },
};

module.exports = () => {
    if (isProduction) {
        config.mode = 'production';        
        config.plugins.push(new MiniCssExtractPlugin());        
        config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());        
    } else {
        config.mode = 'development';
    }
    return config;
};

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

const isProduction = process.env.NODE_ENV == 'production';

const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader';

const config = {

entry: './src/index.js',

output: {

path: path.resolve(__dirname, 'dist'),

plugins: [

// Add your plugins here

// Learn more about plugins from https://webpack.js.org/configuration/plugins/

module: {

rules: [

{

test: /\.(js|jsx)$/i,

loader: 'babel-loader',

{

test: /\.css$/i, // компилятор webpack, дойдz до файла «.css» в require()/import, будет использовать загрузчик css-loader.

use: [stylesHandler,'css-loader'],

{

test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,

type: 'asset',

// Add your rules for custom modules here

// Learn more about loaders from https://webpack.js.org/loaders/

};

module.exports = () => {

if (isProduction) {

config.mode = 'production';

config.plugins.push(new MiniCssExtractPlugin());

config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());

} else {

config.mode = 'development';

}

return config;

};

[свернуть]

Отличие загрузчиков от плагинов webpack:

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

Рисунок для понимания https://overcoder.net

Плагины webpack

Опция (раздел) plugins файла конфигурации webpack.config.js используется для настройки процесса сборки веб-пакета различными способами.

Webpack поставляется с множеством встроенных плагинов, доступных как webpack.[plugin-name].

Список встроенных плагинов доступен на странице https://webpack.js.org/plugins/.

Список дополнительных сторонних плагинов можно найти в awesome-webpack.

Пример раздела plugins:

const path = require("path"); // подключаем встроенный модуль path Node.JS
const HtmlWebpackPlugin = require("html-webpack-plugin"); // подключаем html-webpack-plugin

module.exports = {
  mode: "development",
  entry: {
    main: "./src/main.js", // точка входа
    analytics: "./src/analytics.js",
  },
  output: {
    // результирующий файл
    filename: "[name].[hash].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/src/index.html",
      inject: "body",
    }),
  ],
};

const path = require("path"); // подключаем встроенный модуль path Node.JS

const HtmlWebpackPlugin = require("html-webpack-plugin"); // подключаем html-webpack-plugin

module.exports = {

mode: "development",

entry: {

main: "./src/main.js", // точка входа

analytics: "./src/analytics.js",

output: {

// результирующий файл

filename: "[name].[hash].bundle.js",

path: path.resolve(__dirname, "dist"),

plugins: [

new HtmlWebpackPlugin({

template: __dirname + "/src/index.html",

inject: "body",

}),

};

Некоторые полезные плагины webpack:

HTMLWebpackPlugin (создание HTML-файла с уже подключенными скриптами)

Подробнее...

HtmlWebpackPlugin сгенерирует для вас файл HTML5, который включает в себя все входящие в проект скрипты. Это особенно полезно для веб-пакетов, которые включают в себя хэш в имени js-файла, который изменяется каждую компиляцию.

Вы можете позволить плагину сгенерировать для вас HTML-файл, предоставить свой собственный шаблон с использованием шаблонов lodash или использовать собственный загрузчик.

Установка HtmlWebpackPlugin:

npm install --save-dev html-webpack-plugin

Добавьте плагин в файл конфигурации webpack.config.js следующим образом:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  entry: "index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "index_bundle.js",
  },
  plugins: [new HtmlWebpackPlugin()],
};

const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require("path");

module.exports = {

entry: "index.js",

output: {

path: path.resolve(__dirname, "./dist"),

filename: "index_bundle.js",

plugins: [new HtmlWebpackPlugin()],

};

Это сгенерирует файл dist/index.html, содержащий следующее:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>;

<!DOCTYPE html>

<html>

<head>

<title>webpack App</title>

</head>

<body>

</body>

</html>;

Если у вас есть несколько точек входа в веб-пакет, все они будут включены с тегами <script> в сгенерированный HTML.

[свернуть]

CleanWebpackPlugin (очистка каталога output.path после каждой успешной перестройки

Подробнее...

CleanWebpackPlugin по умолчанию удаляет все файлы внутри каталога output.path webpack, а также все неиспользуемые ресурсы webpack после каждой успешной перестройки. Имеет ряд опций.

Установка CleanWebpackPlugin:

npm install --save-dev clean-webpack-plugin

Пример использования:

const path = require("path"); // подключаем встроенный модуль path Node.JS
const HtmlWebpackPlugin = require("html-webpack-plugin"); // Require  html-webpack-plugin plugin
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
    main: "./src/main.js", // точка входа
    analytics: "./src/analytics.js",
  },
  output: {
    // результирующий файл
    filename: "[name].[hash].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/index.html",
      inject: "body",
    }),
    new CleanWebpackPlugin(),
  ],
};

const path = require("path"); // подключаем встроенный модуль path Node.JS

const HtmlWebpackPlugin = require("html-webpack-plugin"); // Require html-webpack-plugin plugin

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {

mode: "development",

entry: {

main: "./src/main.js", // точка входа

analytics: "./src/analytics.js",

output: {

// результирующий файл

filename: "[name].[hash].bundle.js",

path: path.resolve(__dirname, "dist"),

plugins: [

new HtmlWebpackPlugin({

template: __dirname + "/index.html",

inject: "body",

}),

new CleanWebpackPlugin(),

};

При каждом успешном запуске webpack будет очищать директорию dist от предыдущих версий файлов.

[свернуть]

Особенности использования Webpack 5

При ошибке "Module not found: Error: Can't resolve 'fs' in ... " необходимо в файл webpack.config.js (секция module.exports) поместить конструкцию (отсюда):
- module.exports = { ... resolve: { fallback: { "fs": false }, }, }
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  
  module.exports = {
    ...
  
    resolve: {
      fallback: {
          "fs": false
      },
  },
  }
При ошибке "Module not found: Error: Can't resolve 'crypto' in ... " необходимо в файл webpack.config.js (секция module.exports) поместить конструкцию:
- module.exports = { ... resolve: { fallback: { "crypto": false }, }, }
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  
  module.exports = {
    ...
  
    resolve: {
      fallback: {
          "crypto": false
      },
  },
  }

Загрузчики (loaders) в webpack

Для использования загрузчиков webpack необходимо:

Отличие загрузчиков от плагинов webpack:

Плагины webpack

Пример раздела plugins:

Некоторые полезные плагины webpack:

Установка HtmlWebpackPlugin:

Установка CleanWebpackPlugin:

Особенности использования Webpack 5

Добавить комментарий Отменить ответ