{"id":4421,"date":"2025-12-09T19:11:11","date_gmt":"2025-12-09T10:11:11","guid":{"rendered":"https:\/\/dennie.tokyo\/it\/?p=4421"},"modified":"2025-12-20T11:30:00","modified_gmt":"2025-12-20T02:30:00","slug":"%e3%80%90webpack%e3%80%91mode%e3%82%aa%e3%83%97%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%ae%e8%a8%ad%e5%ae%9a","status":"publish","type":"post","link":"https:\/\/dennie.tokyo\/it\/?p=4421","title":{"rendered":"\u3010webpack\u3011mode\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a"},"content":{"rendered":"\n

\u524d\u56de\u306fwebpack\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb(webpack.config.js)\u306b\u57fa\u672c\u7684\u306a\u8a2d\u5b9a\u306e\u307f\u3092\u884c\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n\n\n\n\n

\u524d\u56de<\/span>\n

\u3010webpack\u3011\u8a2d\u5b9a\u306e\u57fa\u672c\n<\/a><\/p>\n<\/div>\n\n\n\n

\u4eca\u56de\u306fmode\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u6307\u5b9a\u3057webpack\u3092\u5b9f\u884c\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n

mode\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u5024<\/h1>\n\n\n\n

mode\u30aa\u30d7\u30b7\u30e7\u30f3\u306f\u57fa\u672c\u7684\u306b\u306f\u958b\u767a\u74b0\u5883\u7528(development)\u3068\u672c\u756a\u74b0\u5883\u7528(production)\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
\u4f55\u3082\u6307\u5b9a\u3057\u306a\u3044\u5834\u5408\u3001production\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n

\u30fb\u958b\u767a\u74b0\u5883\u7528<\/p>\n\n\n\n

npx webpack --mode development<\/code><\/pre><\/div>\n\n\n\n
\u30fb\u672c\u756a\u74b0\u5883\u7528<\/p>\n\n\n\n
npx webpack --mode production<\/code><\/pre><\/div>\n\n\n\n
modo\u306e\u9055\u3044<\/h1>\n\n\n\n
\u958b\u767a\u74b0\u5883\u7528(development)<\/h2>\n\n\n\n
\u672c\u756a\u74b0\u5883\u7528(production)\u30e2\u30fc\u30c9\u306f\u5236\u4f5c\u3084\u958b\u767a\u306e\u5b8c\u6210\u5f8c\u3092\u60f3\u5b9a\u3057\u305f\u30e2\u30fc\u30c9\u306b\u306a\u308a\u307e\u3059\u3002\u30d0\u30f3\u30c9\u30eb\u30d5\u30a1\u30a4\u30eb\u306e\u5185\u5bb9\u306b\u7121\u99c4\u306a\u3082\u306e\u304c\u7701\u304b\u308c\u308b\u306e\u3067\u30d5\u30a1\u30a4\u30eb\u5bb9\u91cf\u304c\u5c0f\u3055\u304f\u306a\u308a\u307e\u3059\u3002\u305d\u306e\u70ba\u3001\u30d6\u30e9\u30a6\u30b6\u304b\u3089\u8aad\u307f\u8fbc\u307e\u308c\u308b\u901f\u5ea6\u304c\u901f\u3044\u3067\u3059\u3002<\/p>\n\n\n\n
\u672c\u756a\u74b0\u5883\u7528(production)<\/h2>\n\n\n\n
\u958b\u767a\u74b0\u5883\u7528(development)\u30e2\u30fc\u30c9\u306f\u5236\u4f5c\u3084\u958b\u767a\u4e2d\u3092\u60f3\u5b9a\u3057\u305f\u30e2\u30fc\u30c9\u306b\u306a\u308a\u307e\u3059\u3002\u30d0\u30f3\u30c9\u30eb\u30d5\u30a1\u30a4\u30eb\u306fproduction\u30e2\u30fc\u30c9\u306e\u3082\u306e\u3088\u308a\u898b\u3084\u3059\u304f\u30c7\u30d0\u30c3\u30af\u3057\u3084\u3059\u304f\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u305d\u306e\u5206\u30d5\u30a1\u30a4\u30eb\u5bb9\u91cf\u304c\u5927\u304d\u304f\u3001\u30d6\u30e9\u30a6\u30b6\u304b\u3089\u8aad\u307f\u8fbc\u307e\u308c\u308b\u901f\u5ea6\u304c\u9045\u304f\u306a\u308b\u306e\u3067\u672c\u756a\u306b\u306f\u4e0d\u5411\u304d\u3067\u3059\u3002<\/p>\n\n\n\n
\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306b\u3088\u308bmode\u306e\u6307\u5b9a<\/h1>\n\n\n\n
webpack\u5b9f\u884c\u6642\u306bmode\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u6307\u5b9a\u3057\u5b9f\u884c\u51fa\u6765\u307e\u3059\u304c\u3001webpack.config.js\u306bmode\u3092\u6307\u5b9a\u3057webpack\u3092\u5b9f\u884c\u51fa\u6765\u307e\u3059\u3002\u4ee5\u4e0b\u306fmode\u30aa\u30d7\u30b7\u30e7\u30f3\u306b ‘development’ \u3092\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
'use strict'\n\nconst path = require('path')\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}<\/code><\/pre><\/div>\n\n\n\n
webpack\u306e\u5b9f\u884c<\/h1>\n\n\n\n
webpack\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002webpack.config.js \u306e mode \u306b\u6307\u5b9a\u3055\u308c\u305f\u8a2d\u5b9a\u3067\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002mode\u304c\u6307\u5b9a\u3055\u308c\u305f\u306e\u3067\u524d\u56de\u306e\u3088\u3046\u306a\u8b66\u544a\u304c\u51fa\u306a\u304f\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
npx webpack\nasset main.js 4.14 KiB [emitted] (name: main)\nruntime modules 670 bytes 3 modules\ncacheable modules 116 bytes\n  .\/src\/js\/index.js 57 bytes [built] [code generated]\n  .\/src\/js\/test.mjs 59 bytes [built] [code generated]\nwebpack 5.103.0 compiled successfully in 73 ms<\/code><\/pre><\/div>\n\n\n\n
\u6b21\u56de<\/h1>\n\n\n\n
\u591a\u304f\u306eweb\u30da\u30fc\u30b8\u306e javascript \u306f html \u304b\u3089\u8aad\u307f\u8fbc\u307e\u308c\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002\u306a\u306e\u3067web\u30da\u30fc\u30b8\u5236\u4f5c\u3067\u306f html\u30d5\u30a1\u30a4\u30eb\u304c\u5fc5\u8981\u3067\u3059\u3002
\u901a\u5e38 webpack \u306f js\u30d5\u30a1\u30a4\u30eb \u3092\u5bfe\u8c61\u3068\u3057 dist \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3078\u30d0\u30f3\u30c9\u30eb\u30d5\u30a1\u30a4\u30eb(main.js)\u3092\u51fa\u529b\u3057\u307e\u3059\u3002
\u30d0\u30f3\u30c9\u30eb\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080html\u30d5\u30a1\u30a4\u30eb\u3082\u540c\u6642\u306bdist\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3078\u4f5c\u6210\u3055\u308c\u308b\u3068\u52b9\u7387\u304c\u826f\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
html-webpack-plugin \u3092\u4f7f\u3046\u4e8b\u3067webpack\u5b9f\u884c\u6642\u306b\u30d0\u30f3\u30c9\u30eb\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080html\u30d5\u30a1\u30a4\u30eb\u3082\u540c\u6642\u306bdist\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3078\u51fa\u529b\u3057\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
\u6b21\u56de\u306f\u30d7\u30e9\u30b0\u30a4\u30f3(html-webpack-plugin)\u3092\u4f7f\u7528\u3057\u3066webpack\u3092\u5b9f\u884c\u3057\u3066\u307f\u3088\u3046\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u6b21\u56de<\/span>\n
\u3010webpack\u3011\u30d7\u30e9\u30b0\u30a4\u30f3\n<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
\u524d\u56de\u306fwebpack\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb(webpack.config.js)\u306b\u57fa\u672c\u7684\u306a\u8a2d\u5b9a\u306e\u307f\u3092\u884c\u3044\u307e\u3057\u305f\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-4421","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\/4421","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=4421"}],"version-history":[{"count":10,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/4421\/revisions"}],"predecessor-version":[{"id":4577,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/4421\/revisions\/4577"}],"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=4421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}