10 added
1 removed
Original
2026-01-01
Modified
2026-02-26
1
-
error code: 502
1
+
<p>Порядок подключения в nodejs следующий:</p>
2
+
<ol><li>Устанавливаем зависимости:</li>
3
+
</ol>npm install bootstrap webpack mini-css-extract-plugin npm install -D webpack-cli css-loader<ol><li>Создаем файл ./src/index.js и импортируем файлы бутстрап</li>
4
+
</ol>import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/js/bootstrap.bundle.min.js';<ol><li>Создаем конфигурационный файл webpack.config.js и добавляем правило для css</li>
5
+
</ol>import MiniCssExtractPlugin from 'mini-css-extract-plugin'; const mode = process.env.NODE_ENV || 'development'; export default { mode, module: { rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, ], }, plugins: [new MiniCssExtractPlugin()], };<ol><li>Далее в package.json включаем ES модули и добавляем команду для сборки:</li>
6
+
</ol>{ ... "type": "module", "scripts": { "build": "webpack", ... }<ol><li><p>Запускаем сборку командой npm run build, чтобы в директории ./dist получить файлы main.js и main.css.</p>
7
+
</li>
8
+
<li><p>Полученные файлы подключаем в шапке index.html</p>
9
+
</li>
10
+
</ol><link href="dist/main.css" rel="stylesheet"> <script defer src="dist/main.js"></script><p>Готово!</p>