Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.10.2018, 22:05
Новичок на форуме
Отправить личное сообщение для rvsbox Посмотреть профиль Найти все сообщения от rvsbox
 
Регистрация: 08.10.2015
Сообщений: 6

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

Не получается в 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. (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, не работает и не понятна инструкция использования:

module: {
  loaders: [
    {
      test: /\.md$/,
      loader: 'html!highlight!markdown',
      include: PATHS.markdown
    }
  ]
}

// Reading HTML from parsed markdown
var highlightedMarkdown = require('html!highlight!markdown!./README.md');
 
// Reading a file's raw contents and auto-detecting the language
var highlightedRaw = require('html!highlight?raw=true!./example-script.js');
 
// Reading a file's raw contents and specifying the language
var highlightedRawCss = require('html!highlight?raw=true&lang=css!./example-stylesheet.css');
 
// Reading HTML from a template loader
var highlightedRenderedJadeTemplate = require('html!highlight?exec!apply!jade!./index.jade')

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

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

Все пакеты устанавливаются командой "yarn", сборка - "yarn run build".
Ответить с цитированием
  #2 (permalink)  
Старый 03.10.2018, 23:38
Новичок на форуме
Отправить личное сообщение для rvsbox Посмотреть профиль Найти все сообщения от rvsbox
 
Регистрация: 08.10.2015
Сообщений: 6

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

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

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


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

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


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



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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно настроить очерёдность выполнения функций? Altai Общие вопросы Javascript 8 01.02.2017 18:32
Сколько можно и как подключить контроллов на 1 страницу в mvc4? vip1987 Angular.js 3 13.11.2016 17:18
filter(this,this) как правильно сделать? Smip jQuery 5 23.02.2013 01:07
Как правильно прицепить обработку события slowklg Events/DOM/Window 6 15.03.2012 14:20
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 17:14