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)
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