{"id":2945,"date":"2024-12-19T09:05:12","date_gmt":"2024-12-19T00:05:12","guid":{"rendered":"https:\/\/www.agile-software.site\/?p=2945"},"modified":"2024-12-19T09:05:14","modified_gmt":"2024-12-19T00:05:14","slug":"webpack","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=2945","title":{"rendered":"Webpack"},"content":{"rendered":"\n


Webpack\uff08\u30a6\u30a7\u30d6\u30d1\u30c3\u30af\uff09<\/strong> \u306f\u3001JavaScript\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u305f\u3081\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u30d0\u30f3\u30c9\u30e9\u30fc<\/strong>\u3067\u3059\u3002\u8907\u6570\u306e\u30d5\u30a1\u30a4\u30eb\u3084\u30a2\u30bb\u30c3\u30c8\uff08CSS\u3001\u753b\u50cf\u3001\u30d5\u30a9\u30f3\u30c8\u3001JavaScript\u306a\u3069\uff09\u3092\u307e\u3068\u3081\u30661\u3064\u307e\u305f\u306f\u8907\u6570\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u7d71\u5408\u3057\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u52b9\u7387\u7684\u306b\u8aad\u307f\u8fbc\u3081\u308b\u5f62\u306b\u5909\u63db\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\u30e2\u30b8\u30e5\u30fc\u30eb\u30d0\u30f3\u30c9\u30e9\u30fc\u3068\u306f\uff1f<\/strong><\/h3>\n\n\n\n

\u30e2\u30b8\u30e5\u30fc\u30eb\u30d0\u30f3\u30c9\u30e9\u30fc\u306f\u3001\u4f9d\u5b58\u95a2\u4fc2\u306e\u3042\u308b\u30d5\u30a1\u30a4\u30eb\u7fa4\u30921\u3064\u307e\u305f\u306f\u8907\u6570\u306e\u51fa\u529b\u30d5\u30a1\u30a4\u30eb\uff08\u30d0\u30f3\u30c9\u30eb\uff09\u306b\u307e\u3068\u3081\u308b\u30c4\u30fc\u30eb\u3067\u3059\u3002Webpack\u306f\u3001\u6b21\u306e\u51e6\u7406\u3092\u884c\u3044\u307e\u3059\uff1a<\/p>\n\n\n\n

1. \u4f9d\u5b58\u95a2\u4fc2\u306e\u89e3\u6790<\/strong>:<\/p>\n\n\n\n

\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\uff08\u958b\u59cb\u30d5\u30a1\u30a4\u30eb\uff09\u304b\u3089\u59cb\u307e\u308a\u3001\u3059\u3079\u3066\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u89e3\u6790\u3002<\/p>\n\n\n\n

2. \u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u7d71\u5408<\/strong>:<\/p>\n\n\n\n

JavaScript\u3060\u3051\u3067\u306a\u304f\u3001CSS\u3001\u753b\u50cf\u3001\u30d5\u30a9\u30f3\u30c8\u306a\u3069\u306e\u30a2\u30bb\u30c3\u30c8\u30821\u3064\u306e\u30d0\u30f3\u30c9\u30eb\u306b\u7d71\u5408\u3002<\/p>\n\n\n\n

3. \u6700\u9069\u5316<\/strong>:<\/p>\n\n\n\n

\u30d5\u30a1\u30a4\u30eb\u306e\u30b5\u30a4\u30ba\u524a\u6e1b\uff08\u5727\u7e2e\uff09\u3084\u3001\u30b3\u30fc\u30c9\u306e\u5206\u5272\uff08\u30b3\u30fc\u30c9\u30b9\u30d7\u30ea\u30c3\u30c6\u30a3\u30f3\u30b0\uff09\u3092\u884c\u3044\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u3002<\/p>\n\n\n\n

\u2465 \u30e2\u30fc\u30c9\uff08Mode\uff09<\/strong><\/p>\n\n\n\n

Webpack\u306b\u306f\u3001\u4ee5\u4e0b2\u3064\u306e\u30e2\u30fc\u30c9\u304c\u3042\u308a\u307e\u3059\uff1a<\/p>\n\n\n\n

\u2022 development<\/strong>: \u958b\u767a\u5411\u3051\u8a2d\u5b9a\uff08\u30c7\u30d0\u30c3\u30b0\u60c5\u5831\u4ed8\u304d\u3001\u6700\u9069\u5316\u306a\u3057\uff09\u3002<\/p>\n\n\n\n

\u2022 production<\/strong>: \u672c\u756a\u5411\u3051\u8a2d\u5b9a\uff08\u30d5\u30a1\u30a4\u30eb\u306e\u5727\u7e2e\u3084\u6700\u9069\u5316\uff09\u3002<\/p>\n\n\n\n

module.exports = {\n  mode: 'production', \/\/ \u307e\u305f\u306f 'development'\n};<\/code><\/pre><\/div>\n\n\n\n
webpack.config.js<\/h4>\n\n\n\n
const path = require('path');\n\nmodule.exports = {\n  mode: 'development',\n  entry: '.\/src\/index.js',\n  output: {\n    filename: 'bundle.js',\n    path: path.resolve(__dirname, 'dist'),\n  },\n  module: {\n    rules: [\n      {\n        test: \/\\.css$\/,\n        use: ['style-loader', 'css-loader'],\n      },\n    ],\n  },\n  plugins: [],\n};<\/code><\/pre><\/div>\n\n\n\n
Webpack\u304c\u3088\u304f\u4f7f\u308f\u308c\u308b\u30b7\u30fc\u30f3<\/strong><\/h3>\n\n\n\n
\u2022 SPA\uff08\u30b7\u30f3\u30b0\u30eb\u30da\u30fc\u30b8\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\uff09<\/strong> \u306e\u30d0\u30f3\u30c9\u30eb\u3002<\/p>\n\n\n\n
\u2022 React\u3001Vue.js\u3001Angular\u306a\u3069\u306e\u30e2\u30c0\u30f3\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3002<\/p>\n\n\n\n
\u2022 \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u30a2\u30bb\u30c3\u30c8\uff08CSS\u3001\u753b\u50cf\u3001\u30d5\u30a9\u30f3\u30c8\uff09\u306e\u6700\u9069\u5316\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Webpack\uff08\u30a6\u30a7\u30d6\u30d1\u30c3\u30af\uff09 \u306f\u3001JavaScript\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u305f\u3081\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u30d0\u30f3\u30c9\u30e9\u30fc\u3067\u3059\u3002\u8907\u6570\u306e\u30d5\u30a1\u30a4\u30eb\u3084\u30a2\u30bb\u30c3\u30c8\uff08CSS\u3001\u753b\u50cf\u3001\u30d5\u30a9\u30f3\u30c8\u3001JavaScript\u306a\u3069\uff09\u3092\u307e\u3068\u3081\u30661\u3064\u307e\u305f\u306f\u8907\u6570\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u7d71<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jin_ogp_image_url":"","_jin_last_featured_id":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2945","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/2945","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2945"}],"version-history":[{"count":1,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/2945\/revisions"}],"predecessor-version":[{"id":2946,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/2945\/revisions\/2946"}],"wp:attachment":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2945"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}