Установка bootstrap через webpack

@Timurs · Регистрация: 23.02.2016

Студворк — интернет-сервис помощи студентам

Не уверен, что пишу в эту ветку, но всё же.
Не удаётся поставить бутстрап, делаю как описано в https://bootstrap-4.ru/docs/4.... d/webpack/

package.json

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
  "name": "english-for-kids",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "bootstrap": "^4.4.1",
    "jquery": "^3.5.0",
    "popper.js": "^1.16.1"
  },
  "devDependencies": {
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-html": "^6.0.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.3",
    "prettier": "^2.0.4",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  },
  "scripts": {
    "lint": "eslint ./src",
    "lint:fix": "eslint ./src --fix",
    "dev": "webpack --mode development",
    "prod": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

index.html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>English for Kids</title>
</head>
 
<script src='./index.js'></script>
<body>
    
</body>
</html>

index.js

JavaScript
1
2
3
import 'bootstrap';
 
console.log('Hello world!');

Если открыть в Firefox консоль, то ошибка SyntaxError: import declarations may only appear at top level of a module
Если в index.html переписать скрипт на

HTML5
1
<script type="module" src='./index.js'></script>

то ошибка TypeError: Error resolving module specifier: bootstrap

Как это чинить?

p.s. у меня ещё eslint стоит, но сомневаюсь, что из-за него
.eslintrc

JavaScript
1
2
3
4
5
6
7
8
9
10
{
    "extends": ["airbnb/base"],
    "env": {
        "browser": true,
        "node": true
    },
    "rules": {
        "import/extensions": ["off", "never"]
    }
}

@Timurs · 20.04.2020, 17:50 **[ТС]**

SergioO, понял, судя по всему дело в том, что bootstrap разбит на два пакета: js и css.
https://bootstrap-4.ru/docs/4.... /contents/
Строкой

JavaScript
1
import 'bootstrap';

ставится только js пакет bootstrap.
Вот на сайте https://bootstrap-ru.com/javascript.php написано

Javascript плагины для Bootstrap
Bootstrap поставляется с 13-ю jQuery плагинами для оживления Вашего проекта.

Далее я решил проверить, код этой карточки

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
    
    <div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <img style="height: 200px; width: 100%; display: block;"
        src="./img/cat.jpg" alt="Card image">
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
      </div>
    </div>
    
  </div>

прописать на джиэсе с надеждой вдруг он каким-то образом из недр бутстрап джиэса подтянет стили

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import 'bootstrap'
 
const div_card = document.createElement('div');
div_card.className = 'card text-white bg-primary mb-3';
div_card.style.maxWidth = '20rem';
 
const div_card_header = document.createElement('div');
div_card_header.className = 'card-header';
div_card_header.innerText = 'Header';
 
const div_card_body = document.createElement('div');
 
const h4 = document.createElement('h4');
h4.className = 'card-title';
h4.innerText = 'Primary card title';
 
const img = document.createElement('img');
img.style.height = '200px';
img.style.width = '100%';
img.style.display = 'block';
img.src = './img/cat.jpg';
img.alt = 'Card image';
 
const p = document.createElement('p');
p.className = 'card-text';
p.innerText = 'Some quick example text to build on the card title and make up the bulk of the card\'s content.'
 
// Structure Card
const div_app = document.getElementById('app');
div_app.appendChild(div_card);
div_card.appendChild(div_card_header); 
div_card.appendChild(div_card_body);
div_card_body.appendChild(h4);
div_card_body.appendChild(img);
div_card_body.appendChild(p);
 
console.log('Hello, Bootstrap!')

Чуда не произошло.
Далее в инспекторе посмотрел html, там появляется скрипт

HTML5
1
<script src="/770dbc2e36e7791e1c0f.js"></script>

Перехожу в него

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/******/ (function(modules) { // webpackBootstrap
// кода на 792 строки
/******/ })
/************************************************************************/
/******/ ({
// здесь кода примерно на 28к строк, среди которых подключаются
"./node_modules/ansi-html/index.js"
"./node_modules/ansi-regex/index.js"
"./node_modules/bootstrap/dist/js/bootstrap.js"
./node_modules/jquery/dist/jquery.js"
"./node_modules/popper.js/dist/esm/popper.js"
"./node_modules/events/events.js"
"./node_modules/html-entities/lib/html4-entities.js"
"./node_modules/html-entities/lib/html5-entities.js"
"./node_modules/html-entities/lib/index.js"
"./node_modules/html-entities/lib/xml-entities.js"
"./node_modules/loglevel/lib/loglevel.js"
"./node_modules/node-libs-browser/node_modules/punycode/punycode.js"
"./node_modules/webpack/buildin/module.js"
"./node_modules/webpack/buildin/global.js"
"./node_modules/querystring-es3/decode.js"
"./node_modules/querystring-es3/encode.js"
"./node_modules/querystring-es3/index.js"
"./node_modules/sockjs-client/dist/sockjs.js"
"./node_modules/strip-ansi/index.js"
"./node_modules/url/url.js"
"./node_modules/url/util.js"
"./node_modules/webpack-dev-server/client/clients/BaseClient.js"
"./node_modules/webpack-dev-server/client/clients/SockJSClient.js"
"./node_modules/webpack-dev-server/client/index.js?http://127.0.0.7:3001"
"./node_modules/webpack-dev-server/client/socket.js"
"./node_modules/webpack-dev-server/client/overlay.js"
"./node_modules/webpack-dev-server/client/utils/log.js"
"./node_modules/webpack-dev-server/client/utils/sendMessage.js"
"./node_modules/webpack-dev-server/client/utils/reloadApp.js"
"./node_modules/webpack-dev-server/client/utils/createSocketUrl.js"
"./node_modules/webpack/hot sync ^\\.\\/log$"
"./node_modules/webpack-dev-server/client/utils/getCurrentScriptSource.js"
"./node_modules/webpack/hot/emitter.js"
"./node_modules/webpack/hot/log.js"
"./node_modules/webpack/hot/dev-server.js"
"./node_modules/webpack/hot/log-apply-result.js"
/******/ })

но тут вроде ничего напоминающего bootstrap/dist/css да и вообще css нет.
Поэтому, думаю, надо докачивать.

@SergioO · 20.04.2020, 18:08

Timurs, даже не читаю... слишком солжно
всё одлжно быть просто

@Timurs · 20.04.2020, 19:50 **[ТС]**

SergioO, да это просто доказательство того, что ставится bootstrap.js, который не тянет стили бутстрапа.

Добавлено через 1 час 30 минут
SergioO, взлетело!
webpack.config.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin= require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
/*_____________CONTEXT_______________ */
const CONTEXT = path.resolve(__dirname, '../');
const ASSET_PATH = process.env.ASSET_PATH || '/';
/* __________ENTRY__POINT_____________*/
const $ENTRY = './src/index.js'
 
module.exports = {
  context: CONTEXT,
  entry: {
   app: $ENTRY
  },
  output: {
    filename: '[hash].js',
    path: `${CONTEXT}/dist`,
    publicPath: ASSET_PATH,
  },
  mode: 'development',
  devServer: {
    historyApiFallback: true,
    contentBase: './dist',
    hot: true,
    host: '127.0.0.7',
    port: 3001
  },
  devtool: 'cheap-module-source-map',
  plugins: [
    new HtmlWebpackPlugin({
        inject: true,
        template: `${CONTEXT}/public/index.html`,
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeStyleLinkTypeAttributes: true,
          keepClosingSlash: true,
          minifyJS: true,
          minifyCSS: true,
          minifyURLs: true,
        }
      }),
    new CopyWebpackPlugin(
      [
              { 
                from: 'public/img',
                to: '../dist/img',  
                toType: 'dir',
                ignore: [ '*.js' ],
                force: true,
                context: `${CONTEXT}`
              },
      ]),
    new MiniCssExtractPlugin({
      filename: "[name].css",
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  }
}

и index.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import './style.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
 
const div_card = document.createElement('div');
div_card.className = 'card text-white bg-primary mb-3';
div_card.style.maxWidth = '20rem';
 
const div_card_header = document.createElement('div');
div_card_header.className = 'card-header';
div_card_header.innerText = 'Header';
 
const div_card_body = document.createElement('div');
 
const h4 = document.createElement('h4');
h4.className = 'card-title';
h4.innerText = 'Primary card title';
 
const img = document.createElement('img');
img.style.height = '200px';
img.style.width = '100%';
img.style.display = 'block';
img.src = 'img/cat.jpg';
img.alt = 'Card image';
 
const p = document.createElement('p');
p.className = 'card-text';
p.innerText = 'Some quick example text to build on the card title and make up the bulk of the card\'s content.'
 
// Structure Card
const div_app = document.getElementById('app');
div_app.appendChild(div_card);
div_card.appendChild(div_card_header); 
div_card.appendChild(div_card_body);
div_card_body.appendChild(h4);
div_card_body.appendChild(img);
div_card_body.appendChild(p);
 
console.log('Hello, Bootstrap!')

@SergioO · 20.04.2020, 20:20

Timurs, я тобой горжусь - реально!

@Timurs · 21.04.2020, 20:33 **[ТС]**

SergioO, мне два момента с конфигами неясны
1) Что настраивает строка ?

JavaScript
1
 const ASSET_PATH = process.env.ASSET_PATH || '/';

2) Что такое app ?

JavaScript
1
 entry: { app: $ENTRY }

Связан ли он как-то с айдишником дива ?

HTML5
1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html lang="en-ru">
<head>
  <-- ... -->
</head>
<body>
  <div id="app">
  </div>
</body>
</html>

Остальное вроде более менее ясно

Новые блоги и статьи Все статьи Все блоги /
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .

@SergioO 261 / 209 / 99 Регистрация: 13.12.2015 Сообщений: 1,098
	20.04.2020, 18:08
	Timurs, даже не читаю... слишком солжно всё одлжно быть просто 0

@SergioO 261 / 209 / 99 Регистрация: 13.12.2015 Сообщений: 1,098
	20.04.2020, 20:20
	Timurs, я тобой горжусь - реально! 0