{"id":4274,"date":"2025-11-30T18:39:37","date_gmt":"2025-11-30T09:39:37","guid":{"rendered":"https:\/\/dennie.tokyo\/it\/?p=4274"},"modified":"2025-11-30T20:29:03","modified_gmt":"2025-11-30T11:29:03","slug":"%e3%80%90bootstrap%e3%80%91webpack-%e3%82%92%e5%88%a9%e7%94%a8%e3%81%97%e3%81%9f-bootstrap-%e3%81%ae%e4%bd%bf%e7%94%a8","status":"publish","type":"post","link":"https:\/\/dennie.tokyo\/it\/?p=4274","title":{"rendered":"\u3010Bootstrap\u3011webpack \u3092\u5229\u7528\u3057\u305f bootstrap \u306e\u4f7f\u7528"},"content":{"rendered":"\n

webpack \u3092\u5229\u7528\u3057\u3066 bootstrap \u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n\n\n\n\n

\u306a\u304a\u3001webpack \u3068 bootstrap \u306b\u3064\u3044\u3066\u306f\u89e3\u8aac\u3092\u8aac\u660e\u3092\u5272\u611b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\u521d\u671f\u51e6\u7406<\/h1>\n\n\n\n

\u4efb\u610f\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3067\u4e0b\u8a18\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3001npm\u306e\u521d\u671f\u5316\u51e6\u7406\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n\n\n\n

npm init -y<\/code><\/pre><\/div>\n\n\n\n
-y \u306f package.json \u3092\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u5404\u7a2e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h1>\n\n\n\n
webpack\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n\n\n\n
\u4e0b\u8a18\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3001webpack\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
npm i --save-dev webpack webpack-cli webpack-dev-server<\/code><\/pre><\/div>\n\n\n\n
\u8aac\u660e<\/h3>\n\n\n\n
\u3042\u307e\u308a\u610f\u8b58\u305b\u305a\u3068\u3082\u826f\u3044\u306e\u3067\u3059\u304c\u3001\u4e00\u5fdc\u7c21\u5358\u306b\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
webpack<\/h4>\n\n\n\n
webpack \u672c\u4f53\u3067\u3059\u3002<\/p>\n\n\n\n
webpack-cli<\/h4>\n\n\n\n
webpack-cli \u306f\u30bf\u30fc\u30df\u30ca\u30eb\u304b\u3089webpack\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u70ba\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3067\u3059\u3002<\/p>\n\n\n\n
webpack-dev-server<\/h4>\n\n\n\n
webpack-dev-server \u306f\u30ed\u30fc\u30ab\u30eb\u3067web\u30b5\u30fc\u30d0\u3092\u7acb\u3061\u4e0a\u3052\u308b\u30d1\u30c3\u30b1\u30fc\u30b8\u3067\u3059\u3002<\/p>\n\n\n\n
\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n\n\n\n
\u4e0b\u8a18\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3001\u5fc5\u8981\u306a\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
npm i --save-dev html-webpack-plugin<\/code><\/pre><\/div>\n\n\n\n
\u8aac\u660e<\/h3>\n\n\n\n
\u3042\u307e\u308a\u610f\u8b58\u305b\u305a\u3068\u3082\u826f\u3044\u306e\u3067\u3059\u304c\u3001\u4e00\u5fdc\u7c21\u5358\u306b\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
html-webpack-plugin<\/h4>\n\n\n\n
html-webpack-plugin \u306fHTML\u30d5\u30a1\u30a4\u30eb\u3092dist\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u914d\u4e0b\u306b\u751f\u6210\u3059\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\u3067\u3059\u3002<\/p>\n\n\n\n
bootstrap\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n\n\n\n
bootstrap\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
npm i --save bootstrap @popperjs\/core<\/code><\/pre><\/div>\n\n\n\n
\u4f9d\u5b58\u95a2\u4fc2\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n\n\n\n
\u4e0b\u8a18\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u4f9d\u5b58\u95a2\u4fc2\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader<\/code><\/pre><\/div>\n\n\n\n
webpack\u306e\u8a2d\u5b9a<\/h1>\n\n\n\n
webpack.config.js\u306e\u4f5c\u6210<\/h2>\n\n\n\n
webpack\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
touch webpack.config.js<\/code><\/pre><\/div>\n\n\n\n
\u5185\u5bb9\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n
'use strict'\n\nconst path = require('path')\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\n\nmodule.exports = {\n  mode: 'development',\n  entry: '.\/src\/js\/main.js',\n  output: {\n    filename: 'main.js',\n    path: path.resolve(__dirname, 'dist')\n  },\n  devServer: {\n    static: path.resolve(__dirname, 'dist'),\n    port: 8080,\n    hot: true\n  },\n  plugins: [\n    new HtmlWebpackPlugin({ template: '.\/src\/index.html' })\n  ],\n  module: {\n    rules: [\n      {\n        test: \/\\.(scss)$\/,\n        use: [\n          {\n            \/\/ Adds CSS to the DOM by injecting a `<style>` tag\n            loader: 'style-loader'\n          },\n          {\n            \/\/ Interprets `@import` and `url()` like `import\/require()` and will resolve them\n            loader: 'css-loader'\n          },\n          {\n            \/\/ Loader for webpack to process CSS with PostCSS\n            loader: 'postcss-loader',\n            options: {\n              postcssOptions: {\n                plugins: () => [\n                  autoprefixer\n                ]\n              }\n            }\n          },\n          {\n            \/\/ Loads a SASS\/SCSS file and compiles it to CSS\n            loader: 'sass-loader',\n            options: {\n              sassOptions: {\n                \/\/ Silence Sass deprecation warnings\n                silenceDeprecations: [\n                  'color-functions',\n                  'global-builtin',\n                  'import'\n                ]\n              }\n            }\n          }\n        ]\n      }\n    ]\n  }\n}<\/code><\/pre><\/div>\n\n\n\n
\u8aac\u660e<\/h2>\n\n\n\n
sass-loader<\/h3>\n\n\n\n
sass-loader webpack\u306e\u30d3\u30eb\u30c9\u6642\u306b\u8b66\u544a\u304c\u767a\u751f\u3059\u308b\u306e\u3067\u3001\u8b66\u544a\u3092\u7121\u8996\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
          {\n            \/\/ Loads a SASS\/SCSS file and compiles it to CSS\n            loader: 'sass-loader',\n            options: {\n              sassOptions: {\n                \/\/ Silence Sass deprecation warnings\n                silenceDeprecations: [\n                  'color-functions',\n                  'global-builtin',\n                  'import'\n                ]\n              }\n            }\n          }<\/code><\/pre><\/div>\n\n\n\n
bootstrap\u306e\u30d0\u30f3\u30c9\u30eb<\/h1>\n\n\n\n
bootstrap\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u70ba\u306e\u5404\u7a2e\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u4f5c\u6210<\/h2>\n\n\n\n
\u4e0b\u8a18\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057 Bootstrap \u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u70ba\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
mkdir {src,src\/js,src\/scss}<\/code><\/pre><\/div>\n\n\n\n
\u5404\u7a2e\u30d5\u30a1\u30a4\u30eb\u306e\u4f5c\u6210<\/h2>\n\n\n\n
main.js<\/h3>\n\n\n\n
main.js \u306fbootstrap\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u70ba\u306ejs\u30d5\u30a1\u30a4\u30eb\u306b\u306a\u308a\u307e\u3059\u3002
\u4e0b\u8a18\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3001main.js\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
touch src\/js\/main.js<\/code><\/pre><\/div>\n\n\n\n
\u5185\u5bb9\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n
\/\/ Import our custom CSS\nimport '..\/scss\/styles.scss'\n\n\/\/ Import all of Bootstrap's JS\nimport * as bootstrap from 'bootstrap'<\/code><\/pre><\/div>\n\n\n\n
styles.scss<\/h3>\n\n\n\n
styles.css \u306fbootstrap\u306ecss\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u70ba\u306escss\u30d5\u30a1\u30a4\u30eb\u306b\u306a\u308a\u307e\u3059\u3002
\u4e0b\u8a18\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3001styles.scss\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
touch src\/scss\/styles.scss<\/code><\/pre><\/div>\n\n\n\n
\u5185\u5bb9\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n
@import "bootstrap\/scss\/bootstrap";<\/code><\/pre><\/div>\n\n\n\n
package.json\u306e\u4fee\u6b63<\/h1>\n\n\n\n
package.json\u3092\u4fee\u6b63\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
scripts<\/h2>\n\n\n\n
scripts \u306e\u5185\u5bb9\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u4fee\u6b63\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
{\n  \/\/ ...\n  "scripts": {\n    "start": "webpack serve",\n    "build": "webpack build --mode=production",\n    "test": "npm run build"\n  },\n  \/\/ ...\n}<\/code><\/pre><\/div>\n\n\n\n
type<\/h2>\n\n\n\n
type\u306e\u8a18\u8ff0\u3092\u524a\u9664\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
"type": "commonjs"<\/code><\/pre><\/div>\n\n\n\n
\u30d6\u30e9\u30a6\u30b6\u306b\u8868\u793a\u3059\u308bHTML<\/h1>\n\n\n\n
\u30d6\u30e9\u30a6\u30b6\u3067\u8868\u793a\u3059\u308b\u70ba\u306eHTML\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
touch src\/index.html<\/code><\/pre><\/div>\n\n\n\n
\u5185\u5bb9\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n
<!doctype html>\n<html lang="en">\n  <head>\n    <meta charset="utf-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>Bootstrap w\/ Webpack<\/title>\n  <\/head>\n  <body>\n    <div class="container py-4 px-3 mx-auto">\n      <h1>Hello, Bootstrap and Webpack!<\/h1>\n      <button class="btn btn-primary">Primary button<\/button>\n    <\/div>\n  <\/body>\n<\/html><\/code><\/pre><\/div>\n\n\n\n
\u5b9f\u884c<\/h1>\n\n\n\n
\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u5b9f\u884c\u3059\u308b\u3068web\u30b5\u30fc\u30d0\u304c\u8d77\u52d5\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
npm start<\/code><\/pre><\/div>\n\n\n\n
\u30d6\u30e9\u30a6\u30b6\u3067http:\/\/localhost:8080\u3092\u8868\u793a\u3057\u307e\u3059\u3002\u4ee5\u4e0b\u304c\u8868\u793a\u3055\u308c\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
webpack \u3092\u5229\u7528\u3057\u3066 bootstrap \u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n","protected":false},"author":1,"featured_media":5,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37],"tags":[],"class_list":["post-4274","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webpack"],"_links":{"self":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/4274","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4274"}],"version-history":[{"count":30,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/4274\/revisions"}],"predecessor-version":[{"id":4306,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/4274\/revisions\/4306"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/media\/5"}],"wp:attachment":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}