Webpack - separátní balíček js a css, použití bootstrap (2)

Webpack - separátní balíček js a css, použití bootstrap (2)

V tomto díle se podíváme na již trochu více realistické použití nástroje Webpack , kdy chceme aby výstupem byl soubor css pro styly a js pro javascript.

 

Pokud totiž, do souboru app.js přidáme css třeba na bootstrap takto:

import ‘bootstrap/dist/css/bootstrap.min.css’;

tak se nám pak při buildu uloží css styly do build/main.js, což se nám líbit nebude...


Pokud chceme mít soubor css separátně, tak je třeba nainstalovat mini-css-extract-plugin

npm install –save-dev mini-css-extract-plugin


Teď musíme nastavit pravidlo, aby se soubor css zpracoval jinak, výsledná konfigurace webpack.config.js je:

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

module.exports = {
    entry: [
        './www/src/app.js',
        'bootstrap/dist/css/bootstrap.min.css',
        './www/src/custom.css'
    ],
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'www/build/'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                    loader: MiniCssExtractPlugin.loader
                },
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './style.css',
            ignoreOrder: true
        }),
    ]
};


Build provedeme příkazem

npx webpack

 

Vytvoří se soubor build/main.js stejně jako v předchozím článku. Ale navíc i separátní soubor build/style.css, který obsahuje bootstrap.css + custom.css.

 

LINK - Předchozí článek - Webpack - instalace a základní použití (1)

 

Komentáře

Vaše reakce na Webpack - separátní balíček js a css, použití bootstrap (2)
Ophin
#1883

17.02.2024 [1]
Chci přes webpack zprovoznit jquery

Mam nainstalováno a definováno
import 'jquery/dist/jquery.min.js';

a v konzoli mám chybu
nette.ajax.js: jQuery is missing, load it please main.js:2:534768
Uncaught ReferenceError: $ is not defined
Tfender
#1884

19.02.2024 [2]
Ahoj,

mám problém přes webpack zprovoznit
'bootstrap-icons/font/bootstrap-icons.css'

Poté co provedu build, tak prohlížeče hlásí tyto chyby

Firefox:
downloadable font: rejected by sanitizer (font-family: "bootstrap-icons" style:normal weight:400 stretch:100 src index:0) source: http://localhost:89/assets/c8f5aee4e5a2e57edd5c.woff2?dd67030699838ea613ee6dbda90effa6

Chrome:
stream/:826 Failed to decode downloaded font: http://localhost:89/assets/c8f5aee4e5a2e57edd5c.woff2?dd67030699838ea613ee6dbda90effa6
stream/:826 OTS parsing error: invalid sfntVersion: 1702391919
stream/:1 Failed to decode downloaded font: http://localhost:89/assets/c8f5aee4e5a2e57edd5c.woff2?dd67030699838ea613ee6dbda90effa6
stream/:1 OTS parsing error: invalid sfntVersion: 1702391919

Díky za pomoc
OL3G
#1885

19.02.2024 [3]
Ahoj,

u těch nefunkčních bootstrap-icons zkus toto:

nahradit soubor c8f5aee4e5a2e57edd5c.woff2 souborem webfonts/bootstrap-icons.woff2

To by mělo pomoci.
OL3G
#1886

19.02.2024 [4]
Poslední komentář
Ahoj Ophine, u toho nefunkčního jquery by mělo stači v app.js dát jquery na první pozici takto:

import 'jquery';
import 'bootstrap-datepicker';
import 'bootstrap-select';
....

a pak upravit webpack.config.js:
....
plugins: [
new MiniCssExtractPlugin({
filename: './style.css',
ignoreOrder: true
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
})
]
.....

Související obsah

webpack

javascript

npm

js

web

Reference

Podívejte se na naše reference

Prohlédnout

Aplikace

Podívejte se na naše aplikace

Prohlédnout

Co umíme?

Podívejte se co umíme

Prohlédnout

Co umíme?

Vytváříme sofistikované aplikace pro náročné

Od webových aplikací přes android až po převodové můstky či složité informační systémy.

Podívejte se k nám

Máte ještě čas? Podívejte se na další rubriky

Tento web používá soubory cookie. Dalším procházením tohoto webu vyjadřujete souhlas s jejich používáním.. Více informací zde.