{"id":4387,"date":"2025-12-08T00:30:05","date_gmt":"2025-12-07T15:30:05","guid":{"rendered":"https:\/\/dennie.tokyo\/it\/?p=4387"},"modified":"2025-12-20T11:36:36","modified_gmt":"2025-12-20T02:36:36","slug":"%e3%80%90webpack%e3%80%91%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3","status":"publish","type":"post","link":"https:\/\/dennie.tokyo\/it\/?p=4387","title":{"rendered":"\u3010webpack\u3011\u30d7\u30e9\u30b0\u30a4\u30f3"},"content":{"rendered":"\n

Webpack\u306b\u306f\u30d7\u30e9\u30b0\u30a4\u30f3\u6a5f\u80fd\u304c\u3042\u308a\u3001webpack\u306e\u6a5f\u80fd\u3092\u62e1\u5f35\u3059\u308b\u4e8b\u304c\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n\n\n\n\n

\u4eca\u56de\u306f\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\u306a\u304a\u3001\u524d\u56de\u307e\u3067\u306e\u5185\u5bb9\u306e\u7d9a\u304d\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n

\u524d\u56de<\/span>\n

\u3010webpack\u3011mode\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a<\/a><\/p>\n<\/div>\n\n\n\n

HTML\u30d5\u30a1\u30a4\u30eb<\/h1>\n\n\n\n

\u30d0\u30f3\u30c9\u30eb\u30d5\u30a1\u30a4\u30eb(main.js)\u3092\u8aad\u307f\u8fbc\u3080\u70ba\u306eindex.html\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002index.html\u30d5\u30a1\u30a4\u30eb\u306f src \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u76f4\u4e0b\u3078\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

.\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   \u251c\u2500\u2500 js\n\u2502   \u2502   \u251c\u2500\u2500 index.js\n\u2502   \u2502   \u2514\u2500\u2500 test.mjs\n\u2502   \u2514\u2500\u2500 index.html<\/strong>\n\u2514\u2500\u2500 webpack.config.js<\/code><\/pre>\n\n\n\n
index.html \u306e\u5185\u5bb9\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n
<!doctype html>\n<html lang="ja">\n  <head>\n    <meta charset="utf-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>sample<\/title>\n  <\/head>\n  <body>\n    <div>\n      <h1>Hello, Webpack!<\/h1>\n    <\/div>\n  <\/body>\n<\/html><\/code><\/pre><\/div>\n\n\n\n
\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h1>\n\n\n\n
\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057html-webpack-plugin \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
webpack\u306e\u8a2d\u5b9a<\/h1>\n\n\n\n
webpack.config.js \u3092\u4fee\u6b63\u3057\u307e\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\/index.js',\n  output: {\n    filename: 'main.js',\n    path: path.resolve(__dirname, 'dist')\n  },\n  plugins: [\n    new HtmlWebpackPlugin({ template: '.\/src\/index.html' })\n  ]\n}<\/code><\/pre><\/div>\n\n\n\n
\u4fee\u6b63\u3057\u305f\u306e\u306f\u4ee5\u4e0b2\u7b87\u6240\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
const HtmlWebpackPlugin = require('html-webpack-plugin')<\/code><\/pre><\/div>\n\n\n\n
\u4ee5\u4e0b\u306e\u4f8b\u306f\u3001src\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u4ee5\u4e0b\u306eindex.html\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080\u3068\u3044\u3046\u8a2d\u5b9a\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
  plugins: [\n    new HtmlWebpackPlugin({ template: '.\/src\/index.html' })\n  ]<\/code><\/pre><\/div>\n\n\n\n
webpack\u306e\u5b9f\u884c<\/h1>\n\n\n\n
webpack\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
npx webpack<\/code><\/pre><\/div>\n\n\n\n
dist\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u4ee5\u4e0b\u306bmain.js\u3068index.html\u304c\u51fa\u529b\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
\u30d6\u30e9\u30a6\u30b6\u304b\u3089dist\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u4ee5\u4e0b\u306b\u3042\u308bindex.html\u3092\u958b\u304d\u307e\u3059\u3002
\u30b3\u30f3\u30bd\u30fc\u30eb\u306bjavascript\u306e\u5b9f\u884c\u7d50\u679c\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u306a\u304a\u3001dist\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u4ee5\u4e0b\u306eindex.html\u3092\u898b\u308b\u3068\u3001\u30d0\u30f3\u30c9\u30eb\u30d5\u30a1\u30a4\u30eb(main.js)\u304c\u8aad\u307f\u8fbc\u307e\u308c\u3066\u3044\u308b\u4e8b\u304c\u5206\u304b\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
<!doctype html>\n<html lang="ja">\n  <head>\n    <meta charset="utf-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>sample<\/title>\n  <script defer src="main.js"><\/script><\/head>\n  <body>\n    <div>\n      <h1>Hello, Webpack!<\/h1>\n    <\/div>\n  <\/body>\n<\/html><\/code><\/pre><\/div>\n\n\n\n
\u6b21\u56de<\/h1>\n\n\n\n
web\u753b\u9762\u4f5c\u6210\u306b\u306f\u30b9\u30bf\u30a4\u30eb(css)\u3092\u4f7f\u7528\u3059\u308b\u4e8b\u304c\u307b\u3068\u3093\u3069\u3067\u3059\u3002
\u6b21\u56de\u306fwebpack\u3067css\u3092\u4f7f\u7528\u51fa\u6765\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u524d\u56de<\/span>\n
\u3010webpack\u3011\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u5229\u7528<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Webpack\u306b\u306f\u30d7\u30e9\u30b0\u30a4\u30f3\u6a5f\u80fd\u304c\u3042\u308a\u3001webpack\u306e\u6a5f\u80fd\u3092\u62e1\u5f35\u3059\u308b\u4e8b\u304c\u51fa\u6765\u307e\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-4387","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\/4387","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=4387"}],"version-history":[{"count":19,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/4387\/revisions"}],"predecessor-version":[{"id":4581,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/4387\/revisions\/4581"}],"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=4387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}