Как правильно подключить библиотеку hightlight.js в webpack?

Вопрос-ответ JavaScript
1

Приветствую!
Не получается в webpack.config.js првильно подключить библиотеку highlight.js .

Подключил в webpack.config.js highlight.pack.js

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require('autoprefixer');
 
module.exports = {
    entry: [
        "./src/libs/highlight/highlight.pack.js",
        "./src/js/app.js"
    ],
    output: {
        filename: "bundle.js",
    },
    devtool: "inline-source-map",
    optimization: {
        minimize: false
    },
    module: {
        // loaders: [
        //     // {
        //     //   test: /\.md$/,
        //     //   loader: 'html!highlight!markdown',
        //     //   include: PATHS.markdown
        //     // }
        //     {
        //         test: /\.html$/,
        //         loader: 'html!highlight!markdown',
        //         include: "./dist/index.html"
        //     }
        // ],
        rules: [
            {
                test: /\.sass$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader"
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            autoprefixer: {
                                browsers: ["last 2 versions"]
                            },
                            plugins: () => [
                                autoprefixer
                            ]
                        },
                    },
                    {
                        loader: "sass-loader",
                    }]
            },
            {
                test: /\.pug$/,
                loader: "pug-loader",
                options: {
                    pretty: true
                }
            },
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.pug",
            filename: "./index.html",
            inject: false
        }),
    ]
};

в итоге браузер выдает ошибку:

highlight.pack.js:308 Uncaught ReferenceError: hljs is not defined
at Object.<anonymous> (highlight.pack.js:308)
at __webpack_require__ (bootstrap:19)
at Object.n (bootstrap:83)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83

Использовал highlight-loader, не работает и не понятна инструкция использования:

ссылка

Как можно добавить это корректно в мой webpack.config.js или есть другой способ?

ссылка на мой github

Все пакеты устанавливаются командой “yarn”, сборка - “yarn run build”.

2

А как именно используется highlightjs в этом проекте? Вызывается со страницы для подсветки блоков кода?

Спрашиваю потому что highlight-loader отвечает за генерацию разметки для подсветк кода разметки в момент require. Т.е есть файл html или markdown в котором есть блоки кода. Если его зареквайрить в другом модуле, то в результате получишь строку в которой блоки кода будут содержать разметку highlightjs. По мне - так это узкий случай применения highlightjs, возможно это не твой случай.

3

Хотелось чтобы былка подсветка код на веб-странице ссылка. Если highlight.pack.js подключать обычным способом, то все работает. Но хотелось бы эту либу со стилями добавить в bundle.js.

4

Установи highlightjs модуль через npm и вызывай highlightjs программно (api - тут https://highlightjs.org/usage/) из джаваскриптового файла.

Скорее всего кода ниже будет достаточно.

const hljs = require('highlightjs')
hljs.initHighlightingOnLoad()

Единственное что возможно понадобится подключить стили для highlightjs отдельно на страницу.
Можно заморочиться с такой настройкой вебпака чтобы он позволял require-ить стили. Тогда просто require стиль из самого npm пакета

require('highlightjs/styles/github.css')

список всех стилей можно посмотреть в директории пакета

Menubar_and_require__highlightjs_styles_github_css___%E2%80%94_node_modules
Menubar_and_require__highlightjs_styles_github_css___%E2%80%94_node_modules1286×438 49.7 KB

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

5

Все заработало! Низкий поклон тебе Дима! Так долго я тр… Этот гемор исключитльно для изучения webpack.