Как подключать плагины в webpack?

Question

[uRoot]

У меня это извечная проблема. Я не умею правильно подключать плагины в webpack и не знаю универсального способа. Прошу научить. Есть webpack.config.js:

const path = require('path');
const outputDir = path.resolve(__dirname, 'build');

module.exports = {
    entry: path.resolve(__dirname, 'src/js/main.js'),
    output: {
        path: outputDir,
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: require.resolve('jquery'),
            use: [{
                loader: 'expose-loader',
                options: '$'
            }]
        }]
    }
};

Есть main.js где подключается JS из компонентов и сами компоненты. Допустим я хочу подключить Fancybox 3 (или что-то другое). Как это сделать правильно?

Answer 1

[profesor08]

Чтоб jQuery плагины работали и подключались, нужен webpack.ProvidePlugin, пример ниже.

webpack.config.js

module.exports = {
    entry: path.resolve(__dirname, 'src/js/main.js'),
    output: {
        path: outputDir,
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: require.resolve('jquery'),
            use: [{
                loader: 'expose-loader',
                options: '$'
            }]
        }]
    },
    plugins: [
        new webpack.ProvidePlugin( {
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        } )
    ]
};

Установи fancybox
npm i @fancyapps/fancybox

Где-то в своем коде:
import "@fancyapps/fancybox";

Потом юзаешь как обычно.

Comments

[uRoot]

Спасибо. Уже что-то. Два вопроса:
1) А если это не jq плагин - как ставить?
2) Как подключить CSS от плагина?

[profesor08]

CryNet,
1. как обычно
2. пропиши путь до файла

import "@fancyapps/fancybox/dist/jquery.fancybox.css";

[uRoot]

profesor08,

1. как обычно

А можно чуть подробней? Не уверен, что я правильно понял, ну и наверняка кто-то будет гуглить и наткнётся на тред - эму будет полезно.

==============

Возможно это уже траблы сборки, но при импорте стилей крашится сборка:

events.js:173
      throw er; // Unhandled 'error' event
      ^
Error: Broken @import declaration of "@fancyapps/fancybox/dist/jquery.fancybox.css"

[Сергей delphinpro]

CryNet, вам показали js импорт стилей.

Если вы думаете подключать их из своего main.scss то нужно указывать корректный относительный путь от вашего файла

@import "../../node_modules/@fancy...";