Установка 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>

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

Новые блоги и статьи Все статьи Все блоги /
GitHub Copilot в JetBrains: модель по умолчанию, Fix и контроль MCP and_y87 12.10.2026 10 октября 2026 года GitHub обновил Copilot для JetBrains: добавил настройки стартовой модели, исправления из диагностики и управление автозапуском MCP. Поддержка IDE 2025. 1 прекращена — требуется. . .	GitHub Copilot в JetBrains: модель по умолчанию, Fix и контроль MCP and_y87 12.10.2026 10 октября 2026 года GitHub обновил Copilot для JetBrains: добавил настройки стартовой модели, исправления из диагностики и управление автозапуском MCP. Поддержка IDE 2025. 1 прекращена — требуется. . .	День 5 из 28: Codex подсказывает следующий запрос and_y87 12.10.2026 9 октября 2026 года OpenAI запустила бету Composer predictions — подсказок следующего сообщения в текущем диалоге Codex. Это помощь с формулировкой запроса, а не автоматическое продолжение задачи. . . .	Запустил конкурс "тем и промптов для текстовых квестов созданных почти чисто ИИ" Adler 06.10.2026 Всем привет! За последние три-четыре дня я создал более 16 текстовых квестовых игр используя преимущественно по одному запросу к ИИ на игру. Мне так понравилось смотреть все ветки/ сцены во всех. . .
ИИ не может найти нужный язык в списке Supersumestria 05.10.2026 Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык. Возвращает он вот это: https:/ / i. **********/ vqBWLe2. png Нужную строчку в 3й колонке просто выдумал. . Это. . .	Новая последняя моя музыка в SUNO zorxor 05.10.2026 Здравствуйте, дорогие мои друзья! С большой радостью я хотел бы представить вам свою новую последнею музыку, которую сгенерировала мне по моей просьбе нейросеть SUNO. С уважением, zorxor. Это. . .	Программный домашний кинотеатр russiannick 27.09.2026 Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .	Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого zorxor 21.09.2026 Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .

@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