{"id":4599,"date":"2025-12-21T18:12:32","date_gmt":"2025-12-21T09:12:32","guid":{"rendered":"https:\/\/dennie.tokyo\/it\/?p=4599"},"modified":"2025-12-21T19:19:51","modified_gmt":"2025-12-21T10:19:51","slug":"%e3%80%90webpack%e3%80%91%e3%82%a4%e3%83%a1%e3%83%bc%e3%82%b8%e7%94%bb%e5%83%8f%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%81%ae%e3%83%90%e3%83%b3%e3%83%89%e3%83%ab","status":"publish","type":"post","link":"https:\/\/dennie.tokyo\/it\/?p=4599","title":{"rendered":"\u3010webpack\u3011\u30a4\u30e1\u30fc\u30b8\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u306e\u30d0\u30f3\u30c9\u30eb"},"content":{"rendered":"\n<p>Web\u30da\u30fc\u30b8\u4f5c\u6210\u3067\u306f\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u53d6\u308a\u6271\u3046\u4e8b\u306f\u3088\u304f\u3042\u308a\u307e\u3059\u3002<br>webpack\u5b9f\u884c\u6642\u306b\u3001\u4f7f\u7528\u3059\u308b\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3082dist\u30d5\u30a1\u30a4\u30eb\u306b\u51fa\u529b\u3055\u308c\u308b\u3068\u4fbf\u5229\u3067\u3059\u3002<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>\u4eca\u56de\u306fwebpack\u5b9f\u884c\u6642\u306b\u3001\u4f7f\u7528\u3059\u308b\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092dist\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3078\u51fa\u529b\u3055\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u306a\u304a\u3001\u524d\u56de\u307e\u3067\u306e\u5185\u5bb9\u306e\u7d9a\u304d\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"title_box\"><span class=\"box-title\">\u524d\u56de<\/span>\n<p><a href=\"https:\/\/dennie.tokyo\/it\/?p=4589\" rel=\"noopener\" target=\"_blank\">\u3010webpack\u3011css\u30d5\u30a1\u30a4\u30eb\u306e\u51fa\u529b\n<\/a><\/p>\n<\/div>\n\n\n\n<h1 class=\"wp-block-heading\">\u6982\u8981<\/h1>\n\n\n\n<p>\u4eca\u307e\u3067\u306f nodejs \u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u4f7f\u7528\u3057\u3066\u3001css\u30d5\u30a1\u30a4\u30eb\u306e\u3088\u3046\u306a js\u30d5\u30a1\u30a4\u30eb\u3068\u306f\u9055\u3046\u30d5\u30a1\u30a4\u30eb\u3092\u30d0\u30f3\u30c9\u30eb\u3057\u3066\u3044\u307e\u3057\u305f\u3002webpack\u3067\u306f\u30a4\u30e1\u30fc\u30b8\u753b\u50cf\u306e\u985e(\u30a2\u30bb\u30c3\u30c8\u30d5\u30a1\u30a4\u30eb)\u306f\u30ed\u30fc\u30c0\u30fc\u3092\u4f7f\u7528\u305b\u305a\u3068\u3082\u30d0\u30f3\u30c9\u30eb\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">\u69cb\u6210<\/h1>\n\n\n\n<p>\u4eca\u56de\u306f\u30b5\u30f3\u30d7\u30eb\u3068\u3057\u3066src\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u4ee5\u4e0b\u306b image \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u4f5c\u6210\u3057\u3001\u3053\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u9069\u5f53\u306b2\u3064\u306e\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u914d\u7f6e\u3057\u307e\u3057\u305f\u3002\u306a\u304a\u3001\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u540d\u3084\u30d5\u30a1\u30a4\u30eb\u540d\u306f\u4efb\u610f\u3067\u69cb\u3044\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p>\u307e\u305f\u3001js\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u4ee5\u4e0b\u306b image_list.js \u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002\u306a\u304a\u3001\u3053\u3061\u3089\u3082\u30d5\u30a1\u30a4\u30eb\u540d\u306f\u4efb\u610f\u3067\u69cb\u3044\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.\n\u251c\u2500\u2500 node_modules\n\u251c\u2500\u2500 package-lock.json\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 src\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 <strong>image<\/strong>\n\u2502\u00a0\u00a0 \u2502 \u00a0\u00a0\u251c\u2500\u2500 <strong>bg_image_org.png<\/strong>\n\u2502\u00a0\u00a0 \u2502   \u2514\u2500\u2500 <strong>play_icon.png<\/strong>\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 js\n\u2502\u00a0\u00a0 \u2502 \u00a0\u00a0\u251c\u2500\u2500 index.js\n\u2502\u00a0\u00a0 \u2502 \u00a0\u00a0\u251c\u2500\u2500 test.mjs\n\u2502\u00a0\u00a0 \u2502   \u2514\u2500\u2500 <strong>image_list.js<\/strong>\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 css\n\u2502\u00a0\u00a0 \u2502   \u2514\u2500\u2500 style.css\n\u2502   \u2514\u2500\u2500 index.html\n\u2514\u2500\u2500 webpack.config.js<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">style.css<\/h2>\n\n\n\n<p>\u4eca\u56de\u306f css\u304b\u3089\u3001\u753b\u50cf\u30d5\u30a1\u30a4\u30eb bg_image_org.png \u3092 background-image \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u8aad\u307f\u8fbc\u307e\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>.box {\n  background-image: url(..\/image\/bg_image_org.png);\n}<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">index.html<\/h2>\n\n\n\n<p>index.html\u304b\u3089\u306f play_icon.png\u3092img\u30bf\u30b0\u3092\u4f7f\u7528\u3057\u3066\u8aad\u307f\u8fbc\u307e\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>      &lt;div class=&quot;box&quot;&gt;\n        &lt;h1&gt;Hello, Webpack!&lt;\/h1&gt;\n        &lt;img src=&quot;image\/play_icon.png&quot;&gt;\n      &lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">image_list.js<\/h2>\n\n\n\n<p>\u65b0\u305f\u306b\u4f5c\u6210\u3057\u305f image_list.js \u306b\u306f\u30d0\u30f3\u30c9\u30eb\u3055\u305b\u305f\u3044\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092import\u3055\u305b\u307e\u3059\u3002<br>\u4eca\u56de\u306f play_icon.png \u3092 import \u3057\u307e\u3059\u3002\u306a\u304a\u3001bg_image_org.png\u3092import\u3055\u305b\u306a\u3044\u7406\u7531\u306f\u5f8c\u307b\u3069\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>import &#39;..\/image\/play_icon.png&#39;<\/code><\/pre><\/div>\n\n\n\n<h1 class=\"wp-block-heading\">webpack\u306e\u8a2d\u5b9a<\/h1>\n\n\n\n<p>webpack.config.js \u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u4fee\u6b63\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>&#39;use strict&#39;\n\nconst path = require(&#39;path&#39;)\nconst HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;)\nconst MiniCssExtractPlugin = require(&quot;mini-css-extract-plugin&quot;);\n\nmodule.exports = {\n  mode: &#39;development&#39;,\n  entry: &#39;.\/src\/js\/index.js&#39;,\n  output: {\n    filename: &#39;main.js&#39;,\n    path: path.resolve(__dirname, &#39;dist&#39;),\n    assetModuleFilename: &quot;image\/[name][ext]&quot;,\n  },\n  plugins: [\n    new HtmlWebpackPlugin({ template: &#39;.\/src\/index.html&#39; }),\n    new MiniCssExtractPlugin()\n  ],\n  module: {\n    rules: [\n      {\n        test: \/\\.(css)$\/,\n        use: [\n          {\n            loader: MiniCssExtractPlugin.loader\n          },\n          {\n            \/\/ Interprets `@import` and `url()` like `import\/require()` and will resolve them\n            loader: &#39;css-loader&#39;\n          }\n        ]\n      },\n      {\n        test: \/\\.(png|jpg|gif|svg)$\/,\n        type: &quot;asset\/resource&quot;\n      }\n    ]\n  }\n}<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u8aac\u660e<\/h2>\n\n\n\n<p>\u4eca\u56de\u306f output \u306b <strong>assetModuleFilename<\/strong> \u3092\u6307\u5b9a\u3057\u3066\u30a4\u30e1\u30fc\u30b8\u753b\u50cf\u306e\u51fa\u529b\u5148\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>  output: {\n    filename: &#39;main.js&#39;,\n    path: path.resolve(__dirname, &#39;dist&#39;),\n    assetModuleFilename: &quot;image\/[name][ext]&quot;,\n  },<\/code><\/pre><\/div>\n\n\n\n<p>\u305d\u3057\u3066\u3001\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u306e\u62e1\u5f35\u5b50\u3092\u30d0\u30f3\u30c9\u30eb\u3055\u305b\u308b\u30eb\u30fc\u30eb\u3092\u8ffd\u8a18\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>  module: {\n    rules: [\n      {\n        ....(\u7701\u7565)\n      },\n      {\n        test: \/\\.(png|jpg|gif|svg)$\/,\n        type: &quot;asset\/resource&quot;\n      }\n    ]\n  }<\/code><\/pre><\/div>\n\n\n\n<h1 class=\"wp-block-heading\">webpack\u306e\u5b9f\u884c<\/h1>\n\n\n\n<p>webpack\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code>npx webpack<\/code><\/pre><\/div>\n\n\n\n<p>dist\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002image\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304c\u4f5c\u6210\u3055\u308c\u3001\u305d\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u4ee5\u4e0b\u306b\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u304c\u5b58\u5728\u3059\u308b\u4e8b\u304c\u5206\u304b\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>dist\n\u251c\u2500\u2500 image\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 bg_image_org.png\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 play_icon.png\n\u251c\u2500\u2500 index.html\n\u251c\u2500\u2500 main.css\n\u2514\u2500\u2500 main.js\n<\/code><\/pre>\n\n\n\n<p>dist\u4ee5\u4e0b\u306eindex.html\u3092\u30d6\u30e9\u30a6\u30b6\u3067\u8868\u793a\u3055\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"666\" src=\"https:\/\/dennie.tokyo\/it\/wp-content\/uploads\/2025\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-12-21-19.11.45-1024x666.png\" alt=\"\" class=\"wp-image-4621\" style=\"width:544px;height:auto\" srcset=\"https:\/\/dennie.tokyo\/it\/wp-content\/uploads\/2025\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-12-21-19.11.45-1024x666.png 1024w, https:\/\/dennie.tokyo\/it\/wp-content\/uploads\/2025\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-12-21-19.11.45-300x195.png 300w, https:\/\/dennie.tokyo\/it\/wp-content\/uploads\/2025\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-12-21-19.11.45-768x499.png 768w, https:\/\/dennie.tokyo\/it\/wp-content\/uploads\/2025\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-12-21-19.11.45-1536x999.png 1536w, https:\/\/dennie.tokyo\/it\/wp-content\/uploads\/2025\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-12-21-19.11.45-2048x1332.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u9069\u5f53\u306a\u753b\u50cf\u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u306e\u3067\u5c11\u3057\u5206\u304b\u308a\u306b\u304f\u3044\u3067\u3059\u304c\u3001\u4e09\u89d2\u30a2\u30a4\u30b3\u30f3\u306fimg\u30bf\u30b0\u3092\u4f7f\u7528\u3057\u3066\u8aad\u307f\u8fbc\u3093\u3060\u753b\u50cf play_icon.png \u306b\u306a\u308a\u307e\u3059\u3002<br>\u80cc\u666f\u753b\u50cf\u306fbackground-image \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u8aad\u307f\u8fbc\u3093\u3060\u753b\u50cf bg_image_org.png \u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">background-image \u30d7\u30ed\u30d1\u30c6\u30a3<\/h2>\n\n\n\n<p>\u306a\u305c\u3001background-image \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u8aad\u307f\u8fbc\u3093\u3060\u753b\u50cf\u30d5\u30a1\u30a4\u30eb bg_image_org.png \u306f\u3001image_list.js \u306b imoprt\u3092\u8a18\u8f09\u3057\u306a\u304f\u3066\u3082\u826f\u3044\u304b\u3068\u3044\u3046\u3068\u3001index.js \u304c css\u30d5\u30a1\u30a4\u30eb(style.css)\u3092import\u3057\u3066\u3044\u308b\u304b\u3089\u3067\u3059\u3002style.css\u306f bg_image_org.png \u3092 background-image \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u8aad\u307f\u8fbc\u3093\u3067\u3044\u307e\u3059\u3002\u3053\u306e\u70ba\u3001bg_image_org.png \u306f\u30d0\u30f3\u30c9\u30eb\u5bfe\u8c61\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u4e00\u65b9\u3001index.html \u306f img\u30bf\u30b0\u3092\u4f7f\u7528\u3057\u3066\u753b\u50cf\u30d5\u30a1\u30a4\u30eb play_icon.png \u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u307e\u3059\u304c\u3001index.html\u306findex.js\u304b\u3089import\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002\u3057\u305f\u304c\u3063\u3066\u3001index.html\u3067img\u30bf\u30b0\u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u306f\u30d0\u30f3\u30c9\u30eb\u5bfe\u8c61\u306b\u306a\u308a\u307e\u305b\u3093\u3002\u306a\u306e\u3067\u4eca\u56de\u306f\u3001image_list.js \u3092\u4f5c\u6210\u3057\u3001image_list.js \u304b\u3089play_icon.png\u3092import\u3057\u3001\u3055\u3089\u306b index.js \u304c image_list.js \u3092\u8aad\u307f\u8fbc\u3080\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002\u3053\u308c\u3067 index.js\u304b\u3089import\u3092\u8fbf\u3063\u3066\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u30d0\u30f3\u30c9\u30eb\u3055\u305b\u308b\u4e8b\u304c\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">\u6700\u5f8c\u306b<\/h1>\n\n\n\n<p>\u7279\u306b\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web\u30da\u30fc\u30b8\u4f5c\u6210\u3067\u306f\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u53d6\u308a\u6271\u3046\u4e8b\u306f\u3088\u304f\u3042\u308a\u307e\u3059\u3002webpack\u5b9f\u884c\u6642\u306b\u3001\u4f7f\u7528\u3059\u308b\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3082dist\u30d5\u30a1\u30a4\u30eb\u306b\u51fa\u529b\u3055\u308c\u308b\u3068\u4fbf\u5229\u3067\u3059\u3002<\/p>\n","protected":false},"author":1,"featured_media":4329,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37],"tags":[],"class_list":["post-4599","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\/4599","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=4599"}],"version-history":[{"count":25,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/4599\/revisions"}],"predecessor-version":[{"id":4626,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/4599\/revisions\/4626"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/media\/4329"}],"wp:attachment":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}