[{"data":1,"prerenderedAt":7754},["ShallowReactive",2],{"series-well-study-webpack-3":3},{"doc":4,"prev":4205,"next":4203},{"id":5,"title":6,"body":7,"category":4189,"createdAt":4191,"description":4192,"extension":4193,"index":151,"meta":4194,"navigation":140,"path":4195,"publish":140,"seo":4196,"series":4197,"seriesTitle":4198,"stem":4199,"tag":4200,"thumbnail":4202,"updatedAt":4203,"__hash__":4204},"series\u002Fseries\u002Fwell-study-webpack-3.md","ちゃんと理解するWebpack5。３：HTMLのバンドルとPUGでのページ作成",{"type":8,"value":9,"toc":4173},"minimark",[10,20,23,33,36,41,58,61,65,68,78,95,99,109,115,118,125,420,423,430,954,961,992,1002,1227,1236,1247,1257,1260,1269,1331,1337,1374,1383,1544,1547,1602,1615,1619,1625,1628,1631,1634,1725,1732,1838,1841,1844,1850,1856,1877,1892,1895,1898,1904,1909,1915,2173,2176,2691,2694,2758,2770,2773,2776,2786,2815,2818,2822,2828,4169],[11,12,13,14,19],"p",{},"こんにちはjunです。前回の記事",[15,16,18],"a",{"href":17},"\u002Fseries\u002Fwell-study-webpack\u002F2","ちゃんと理解するWebpack5。２：Babel、画像の処理と複数バンドル","の続きの記事です。前回は画像のバンドル、Bableのトランスコンパイル、そして複数バンドルを行いました。今回は残りのHTMLの取り扱い方と、テンプレートエンジンと呼ばれるPUGを用いてHTMLでページをガンガン作成していこうと思います。",[11,21,22],{},"シチュエーションとしては、",[24,25,26,30],"ul",{},[27,28,29],"li",{},"サイト制作で上がってきたデザインからHTML・CSS・JSのテンプレートファイルを作る。",[27,31,32],{},"モックとしてサービスのweb部分を作ってみる",[11,34,35],{},"といった感じです。とりあえず「デザイン通りに見た目と動きつくってちょ！」というような依頼が来たと思ってください。",[37,38,40],"h2",{"id":39},"webpakcでhtmlを扱うには","webpakcでHTMLを扱うには",[11,42,43,44,48,49,53,54,57],{},"webpackには「html-loader」というhtmlファイルを扱うloaderがあります。",[15,45,47],{"href":46},"\u002Fseries\u002Fwell-study-webpack\u002F1","ちゃんと理解するWebpack5。１","では最初ということもあり、",[50,51,52],"code",{},"dist","に直接置いていましたが、ローダーを使用することでHTMLも",[50,55,56],{},"src","配下に置いてバンドルできます。複数対応ももちろん可能です。",[11,59,60],{},"今回はまず素のHTMLを扱う方法とテンプレートエンジンという効率的にHTMLを生成できるpugを用いた2つのバンドル方法を今回はお伝えします。",[37,62,64],{"id":63},"単純htmlファイルをバンドルする","単純HTMLファイルをバンドルする",[11,66,67],{},"前回の構成に加えて",[69,70,75],"pre",{"className":71,"code":73,"language":74},[72],"language-text",".\n├── dist\n├── package-lock.json\n├── package.json\n├── src\n│   ├── imgs\n│   ├── html \u002F\u002FNEW!!\n│   │   ├── index.html \u002F\u002FNEW!!\n│   │   └── detail.html \u002F\u002FNEW!!\n│   ├── js\n│   │   ├── functions.js\n│   │   └── main.js\n│   └── sass\n│       ├── compnent.scss\n│       ├── style.scss\n│       └── variable.scss\n├── node_modules\n└── webpack.config.js\n","text",[50,76,73],{"__ignoreMap":77},"",[11,79,80,83,84,87,88,91,92,94],{},[50,81,82],{},"html","というディレクトリを作成し、バンドル対象の",[50,85,86],{},"index.html","と",[50,89,90],{},"detail.html","を作成しました。目標はこの２つのファイルが",[50,93,52],{},"配下に配置されることです。",[96,97,98],"h3",{"id":98},"html扱いに必要なloaderとpluginを入れる",[11,100,101,102,87,105,108],{},"最初にHTMLファイルを扱うために必要な",[50,103,104],{},"html-loader",[50,106,107],{},"HtmlWebpackPlugin","をインストールします。",[69,110,113],{"className":111,"code":112,"language":74},[72],"npm install -D html-loader html-webpack-plugin\n",[50,114,112],{"__ignoreMap":77},[96,116,117],{"id":117},"ruleとloaderを追加",[11,119,120,121,124],{},"そしてwebpack.config.jsにhtmlに関する。記述を追加します。まずは",[50,122,123],{},"rules","にhtmlファイルのルールを追加します。",[69,126,131],{"className":127,"code":128,"filename":129,"language":130,"meta":77,"style":77},"language-javascript shiki shiki-themes material-theme-ocean","\n\u002F\u002F rulesの配列は後で\nlet rules = [\n    \u002F\u002F ... \n    \u002F\u002F 追加↓\n    {\n        test: \u002F\\.(html)$\u002F,\n        use: {\n            loader: 'html-loader',\n        }\n    },\n    \u002F\u002F ...\n]\n\nconst buildDefault = = {\n    entry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: rules\n    },\n\n    rules:rules,\n    \u002F\u002F ...\n}\n\u002F\u002F...\n\nmodule.exports = buildDefault;\n","webpack.config.js","javascript",[50,132,133,142,149,167,173,179,185,220,231,249,255,261,267,273,278,294,311,317,335,341,351,362,367,372,384,389,395,401,406],{"__ignoreMap":77},[134,135,138],"span",{"class":136,"line":137},"line",1,[134,139,141],{"emptyLinePlaceholder":140},true,"\n",[134,143,145],{"class":136,"line":144},2,[134,146,148],{"class":147},"sC9rS","\u002F\u002F rulesの配列は後で\n",[134,150,152,156,160,164],{"class":136,"line":151},3,[134,153,155],{"class":154},"sJ14y","let",[134,157,159],{"class":158},"s0W1g"," rules ",[134,161,163],{"class":162},"sAklC","=",[134,165,166],{"class":158}," [\n",[134,168,170],{"class":136,"line":169},4,[134,171,172],{"class":147},"    \u002F\u002F ... \n",[134,174,176],{"class":136,"line":175},5,[134,177,178],{"class":147},"    \u002F\u002F 追加↓\n",[134,180,182],{"class":136,"line":181},6,[134,183,184],{"class":162},"    {\n",[134,186,188,192,195,198,201,204,207,210,214,217],{"class":136,"line":187},7,[134,189,191],{"class":190},"s-wAU","        test",[134,193,194],{"class":162},":",[134,196,197],{"class":162}," \u002F",[134,199,200],{"class":158},"\\.",[134,202,203],{"class":162},"(",[134,205,82],{"class":206},"sfyAc",[134,208,209],{"class":162},")",[134,211,213],{"class":212},"s6cf3","$",[134,215,216],{"class":162},"\u002F",[134,218,219],{"class":162},",\n",[134,221,223,226,228],{"class":136,"line":222},8,[134,224,225],{"class":190},"        use",[134,227,194],{"class":162},[134,229,230],{"class":162}," {\n",[134,232,234,237,239,242,244,247],{"class":136,"line":233},9,[134,235,236],{"class":190},"            loader",[134,238,194],{"class":162},[134,240,241],{"class":162}," '",[134,243,104],{"class":206},[134,245,246],{"class":162},"'",[134,248,219],{"class":162},[134,250,252],{"class":136,"line":251},10,[134,253,254],{"class":162},"        }\n",[134,256,258],{"class":136,"line":257},11,[134,259,260],{"class":162},"    },\n",[134,262,264],{"class":136,"line":263},12,[134,265,266],{"class":147},"    \u002F\u002F ...\n",[134,268,270],{"class":136,"line":269},13,[134,271,272],{"class":158},"]\n",[134,274,276],{"class":136,"line":275},14,[134,277,141],{"emptyLinePlaceholder":140},[134,279,281,284,287,289,292],{"class":136,"line":280},15,[134,282,283],{"class":154},"const",[134,285,286],{"class":158}," buildDefault ",[134,288,163],{"class":162},[134,290,291],{"class":162}," =",[134,293,230],{"class":162},[134,295,297,300,302,304,307,309],{"class":136,"line":296},16,[134,298,299],{"class":190},"    entry",[134,301,194],{"class":162},[134,303,241],{"class":162},[134,305,306],{"class":206},".\u002Fsrc\u002Fjs\u002Fmain.js",[134,308,246],{"class":162},[134,310,219],{"class":162},[134,312,314],{"class":136,"line":313},17,[134,315,316],{"class":158},"  \n",[134,318,320,323,325,328,331,333],{"class":136,"line":319},18,[134,321,322],{"class":190},"    mode",[134,324,194],{"class":162},[134,326,327],{"class":162},"\"",[134,329,330],{"class":206},"development",[134,332,327],{"class":162},[134,334,219],{"class":162},[134,336,338],{"class":136,"line":337},19,[134,339,340],{"class":158},"    \n",[134,342,344,347,349],{"class":136,"line":343},20,[134,345,346],{"class":190},"    module",[134,348,194],{"class":162},[134,350,230],{"class":162},[134,352,354,357,359],{"class":136,"line":353},21,[134,355,356],{"class":190},"        rules",[134,358,194],{"class":162},[134,360,361],{"class":158}," rules\n",[134,363,365],{"class":136,"line":364},22,[134,366,260],{"class":162},[134,368,370],{"class":136,"line":369},23,[134,371,141],{"emptyLinePlaceholder":140},[134,373,375,378,380,382],{"class":136,"line":374},24,[134,376,377],{"class":190},"    rules",[134,379,194],{"class":162},[134,381,123],{"class":158},[134,383,219],{"class":162},[134,385,387],{"class":136,"line":386},25,[134,388,266],{"class":147},[134,390,392],{"class":136,"line":391},26,[134,393,394],{"class":162},"}\n",[134,396,398],{"class":136,"line":397},27,[134,399,400],{"class":147},"\u002F\u002F...\n",[134,402,404],{"class":136,"line":403},28,[134,405,141],{"emptyLinePlaceholder":140},[134,407,409,412,414,417],{"class":136,"line":408},29,[134,410,411],{"class":162},"module.exports",[134,413,291],{"class":162},[134,415,416],{"class":158}," buildDefault",[134,418,419],{"class":162},";\n",[96,421,422],{"id":422},"html-webpack-pluginの設定",[11,424,425,426,429],{},"とりあえずこれでwebpackはhtmlファイルを扱えるようになりました。次はentryでjsファイルを指定していたように、バンドル対象のhtmlをwebpackに読み込ませるために",[50,427,428],{},"html-webpack-plugin","を使用します。",[69,431,433],{"className":127,"code":432,"filename":129,"language":130,"meta":77,"style":77},"\u002F\u002F ファイル冒頭\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst path = require('path');\n\n\u002F\u002F この２つを追加\nconst globule = require('globule');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nlet rules = [\n    \u002F\u002F 省略... \n]\n\nconst buildDefault = = {\n    entry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: rules\n    },\n\n    rules:rules,\n    \u002F\u002F 以下略...\n}\n\n\u002F\u002F これらを追記\nconst htmlFiles = globule.find('src\u002Fhtml\u002F*.html');\n\nhtmlFiles.forEach((htmlsrc) => {\n    const htmlname = htmlsrc.split('\u002F').slice(-1)[0];\n\n    buildDefault.plugins.push(\n      new HtmlWebpackPlugin({\n        filename: `${path.resolve(__dirname, 'dist')}\u002F${htmlname}`,\n        inject:'body',\n        template: htmlsrc,\n        minify: false\n      })\n    )\n});\n\nmodule.exports = buildDefault;\n",[50,434,435,440,466,490,494,499,523,546,550,560,565,569,573,585,599,603,617,621,629,637,641,645,655,660,664,668,673,704,708,733,787,792,811,825,873,890,902,914,923,929,938,943],{"__ignoreMap":77},[134,436,437],{"class":136,"line":137},[134,438,439],{"class":147},"\u002F\u002F ファイル冒頭\n",[134,441,442,444,447,449,453,455,457,460,462,464],{"class":136,"line":144},[134,443,283],{"class":154},[134,445,446],{"class":158}," MiniCssExtractPlugin ",[134,448,163],{"class":162},[134,450,452],{"class":451},"sdLwU"," require",[134,454,203],{"class":158},[134,456,246],{"class":162},[134,458,459],{"class":206},"mini-css-extract-plugin",[134,461,246],{"class":162},[134,463,209],{"class":158},[134,465,419],{"class":162},[134,467,468,470,473,475,477,479,481,484,486,488],{"class":136,"line":151},[134,469,283],{"class":154},[134,471,472],{"class":158}," path ",[134,474,163],{"class":162},[134,476,452],{"class":451},[134,478,203],{"class":158},[134,480,246],{"class":162},[134,482,483],{"class":206},"path",[134,485,246],{"class":162},[134,487,209],{"class":158},[134,489,419],{"class":162},[134,491,492],{"class":136,"line":169},[134,493,141],{"emptyLinePlaceholder":140},[134,495,496],{"class":136,"line":175},[134,497,498],{"class":147},"\u002F\u002F この２つを追加\n",[134,500,501,503,506,508,510,512,514,517,519,521],{"class":136,"line":181},[134,502,283],{"class":154},[134,504,505],{"class":158}," globule ",[134,507,163],{"class":162},[134,509,452],{"class":451},[134,511,203],{"class":158},[134,513,246],{"class":162},[134,515,516],{"class":206},"globule",[134,518,246],{"class":162},[134,520,209],{"class":158},[134,522,419],{"class":162},[134,524,525,527,530,532,534,536,538,540,542,544],{"class":136,"line":187},[134,526,283],{"class":154},[134,528,529],{"class":158}," HtmlWebpackPlugin ",[134,531,163],{"class":162},[134,533,452],{"class":451},[134,535,203],{"class":158},[134,537,246],{"class":162},[134,539,428],{"class":206},[134,541,246],{"class":162},[134,543,209],{"class":158},[134,545,419],{"class":162},[134,547,548],{"class":136,"line":222},[134,549,141],{"emptyLinePlaceholder":140},[134,551,552,554,556,558],{"class":136,"line":233},[134,553,155],{"class":154},[134,555,159],{"class":158},[134,557,163],{"class":162},[134,559,166],{"class":158},[134,561,562],{"class":136,"line":251},[134,563,564],{"class":147},"    \u002F\u002F 省略... \n",[134,566,567],{"class":136,"line":257},[134,568,272],{"class":158},[134,570,571],{"class":136,"line":263},[134,572,141],{"emptyLinePlaceholder":140},[134,574,575,577,579,581,583],{"class":136,"line":269},[134,576,283],{"class":154},[134,578,286],{"class":158},[134,580,163],{"class":162},[134,582,291],{"class":162},[134,584,230],{"class":162},[134,586,587,589,591,593,595,597],{"class":136,"line":275},[134,588,299],{"class":190},[134,590,194],{"class":162},[134,592,241],{"class":162},[134,594,306],{"class":206},[134,596,246],{"class":162},[134,598,219],{"class":162},[134,600,601],{"class":136,"line":280},[134,602,316],{"class":158},[134,604,605,607,609,611,613,615],{"class":136,"line":296},[134,606,322],{"class":190},[134,608,194],{"class":162},[134,610,327],{"class":162},[134,612,330],{"class":206},[134,614,327],{"class":162},[134,616,219],{"class":162},[134,618,619],{"class":136,"line":313},[134,620,340],{"class":158},[134,622,623,625,627],{"class":136,"line":319},[134,624,346],{"class":190},[134,626,194],{"class":162},[134,628,230],{"class":162},[134,630,631,633,635],{"class":136,"line":337},[134,632,356],{"class":190},[134,634,194],{"class":162},[134,636,361],{"class":158},[134,638,639],{"class":136,"line":343},[134,640,260],{"class":162},[134,642,643],{"class":136,"line":353},[134,644,141],{"emptyLinePlaceholder":140},[134,646,647,649,651,653],{"class":136,"line":364},[134,648,377],{"class":190},[134,650,194],{"class":162},[134,652,123],{"class":158},[134,654,219],{"class":162},[134,656,657],{"class":136,"line":369},[134,658,659],{"class":147},"    \u002F\u002F 以下略...\n",[134,661,662],{"class":136,"line":374},[134,663,394],{"class":162},[134,665,666],{"class":136,"line":386},[134,667,141],{"emptyLinePlaceholder":140},[134,669,670],{"class":136,"line":391},[134,671,672],{"class":147},"\u002F\u002F これらを追記\n",[134,674,675,677,680,682,685,688,691,693,695,698,700,702],{"class":136,"line":397},[134,676,283],{"class":154},[134,678,679],{"class":158}," htmlFiles ",[134,681,163],{"class":162},[134,683,684],{"class":158}," globule",[134,686,687],{"class":162},".",[134,689,690],{"class":451},"find",[134,692,203],{"class":158},[134,694,246],{"class":162},[134,696,697],{"class":206},"src\u002Fhtml\u002F*.html",[134,699,246],{"class":162},[134,701,209],{"class":158},[134,703,419],{"class":162},[134,705,706],{"class":136,"line":403},[134,707,141],{"emptyLinePlaceholder":140},[134,709,710,713,715,718,720,722,726,728,731],{"class":136,"line":408},[134,711,712],{"class":158},"htmlFiles",[134,714,687],{"class":162},[134,716,717],{"class":451},"forEach",[134,719,203],{"class":158},[134,721,203],{"class":162},[134,723,725],{"class":724},"s7ZW3","htmlsrc",[134,727,209],{"class":162},[134,729,730],{"class":154}," =>",[134,732,230],{"class":162},[134,734,736,739,742,744,747,749,752,754,756,758,760,762,764,767,769,772,776,779,782,785],{"class":136,"line":735},30,[134,737,738],{"class":154},"    const",[134,740,741],{"class":158}," htmlname",[134,743,291],{"class":162},[134,745,746],{"class":158}," htmlsrc",[134,748,687],{"class":162},[134,750,751],{"class":451},"split",[134,753,203],{"class":190},[134,755,246],{"class":162},[134,757,216],{"class":206},[134,759,246],{"class":162},[134,761,209],{"class":190},[134,763,687],{"class":162},[134,765,766],{"class":451},"slice",[134,768,203],{"class":190},[134,770,771],{"class":162},"-",[134,773,775],{"class":774},"sx098","1",[134,777,778],{"class":190},")[",[134,780,781],{"class":774},"0",[134,783,784],{"class":190},"]",[134,786,419],{"class":162},[134,788,790],{"class":136,"line":789},31,[134,791,141],{"emptyLinePlaceholder":140},[134,793,795,798,800,803,805,808],{"class":136,"line":794},32,[134,796,797],{"class":158},"    buildDefault",[134,799,687],{"class":162},[134,801,802],{"class":158},"plugins",[134,804,687],{"class":162},[134,806,807],{"class":451},"push",[134,809,810],{"class":190},"(\n",[134,812,814,817,820,822],{"class":136,"line":813},33,[134,815,816],{"class":162},"      new",[134,818,819],{"class":451}," HtmlWebpackPlugin",[134,821,203],{"class":190},[134,823,824],{"class":162},"{\n",[134,826,828,831,833,836,838,840,843,846,849,851,853,855,857,860,862,865,868,871],{"class":136,"line":827},34,[134,829,830],{"class":190},"        filename",[134,832,194],{"class":162},[134,834,835],{"class":162}," `${",[134,837,483],{"class":158},[134,839,687],{"class":162},[134,841,842],{"class":451},"resolve",[134,844,845],{"class":158},"(__dirname",[134,847,848],{"class":162},",",[134,850,241],{"class":162},[134,852,52],{"class":206},[134,854,246],{"class":162},[134,856,209],{"class":158},[134,858,859],{"class":162},"}",[134,861,216],{"class":206},[134,863,864],{"class":162},"${",[134,866,867],{"class":158},"htmlname",[134,869,870],{"class":162},"}`",[134,872,219],{"class":162},[134,874,876,879,881,883,886,888],{"class":136,"line":875},35,[134,877,878],{"class":190},"        inject",[134,880,194],{"class":162},[134,882,246],{"class":162},[134,884,885],{"class":206},"body",[134,887,246],{"class":162},[134,889,219],{"class":162},[134,891,893,896,898,900],{"class":136,"line":892},36,[134,894,895],{"class":190},"        template",[134,897,194],{"class":162},[134,899,746],{"class":158},[134,901,219],{"class":162},[134,903,905,908,910],{"class":136,"line":904},37,[134,906,907],{"class":190},"        minify",[134,909,194],{"class":162},[134,911,913],{"class":912},"sbqyR"," false\n",[134,915,917,920],{"class":136,"line":916},38,[134,918,919],{"class":162},"      }",[134,921,922],{"class":190},")\n",[134,924,926],{"class":136,"line":925},39,[134,927,928],{"class":190},"    )\n",[134,930,932,934,936],{"class":136,"line":931},40,[134,933,859],{"class":162},[134,935,209],{"class":158},[134,937,419],{"class":162},[134,939,941],{"class":136,"line":940},41,[134,942,141],{"emptyLinePlaceholder":140},[134,944,946,948,950,952],{"class":136,"line":945},42,[134,947,411],{"class":162},[134,949,291],{"class":162},[134,951,416],{"class":158},[134,953,419],{"class":162},[11,955,956,957,960],{},"詳細の解説をします。まず最初に必要なプラグインとnode.jsのモジュールをインポートします。そして以下の記述は",[50,958,959],{},"src\u002Fhtml","配下にあるhtmlファイルを全て取得する処理です。",[69,962,964],{"className":127,"code":963,"language":130,"meta":77,"style":77},"const htmlFiles = globule.find('src\u002Fhtml\u002F*.html');\n",[50,965,966],{"__ignoreMap":77},[134,967,968,970,972,974,976,978,980,982,984,986,988,990],{"class":136,"line":137},[134,969,283],{"class":154},[134,971,679],{"class":158},[134,973,163],{"class":162},[134,975,684],{"class":158},[134,977,687],{"class":162},[134,979,690],{"class":451},[134,981,203],{"class":158},[134,983,246],{"class":162},[134,985,697],{"class":206},[134,987,246],{"class":162},[134,989,209],{"class":158},[134,991,419],{"class":162},[11,993,994,995,997,998,1001],{},"配列でhtmlファイルのパスが戻ってきますので、それらを",[50,996,107],{},"にファイル分だけ",[50,999,1000],{},"new","します。",[69,1003,1005],{"className":127,"code":1004,"language":130,"meta":77,"style":77},"htmlFiles.forEach((htmlsrc) => {\n    \u002F\u002F ファイル名を取得 src\u002Fhtml\u002Findex.html → index.html\n    const htmlname = htmlsrc.split('\u002F').slice(-1)[0];\n\n    \u002F\u002F webpackの設定にある、pluginsに以下のプラグインインスタンスを入れる。\n    buildDefault.plugins.push(\n      new HtmlWebpackPlugin({\n        \u002F\u002F distのファイル名。今回はsrcと同じ。\n        filename: `${path.resolve(__dirname, 'dist')}\u002F${htmlname}`,\n\n        \u002F\u002F 自動的にバンドル対象のjs\b(main.js)とcss(style.css)を入れる。お節介ならfalseにする。\n        inject:'body',\n\n        \u002F\u002F 対象のhtmlファイル\n        template: htmlsrc,\n\n        \u002F\u002F 圧縮するかどうか。defaultはtrue\n        minify: false\n      })\n    )\n});\n",[50,1006,1007,1027,1032,1074,1078,1083,1097,1107,1112,1150,1154,1159,1173,1177,1182,1192,1196,1201,1209,1215,1219],{"__ignoreMap":77},[134,1008,1009,1011,1013,1015,1017,1019,1021,1023,1025],{"class":136,"line":137},[134,1010,712],{"class":158},[134,1012,687],{"class":162},[134,1014,717],{"class":451},[134,1016,203],{"class":158},[134,1018,203],{"class":162},[134,1020,725],{"class":724},[134,1022,209],{"class":162},[134,1024,730],{"class":154},[134,1026,230],{"class":162},[134,1028,1029],{"class":136,"line":144},[134,1030,1031],{"class":147},"    \u002F\u002F ファイル名を取得 src\u002Fhtml\u002Findex.html → index.html\n",[134,1033,1034,1036,1038,1040,1042,1044,1046,1048,1050,1052,1054,1056,1058,1060,1062,1064,1066,1068,1070,1072],{"class":136,"line":151},[134,1035,738],{"class":154},[134,1037,741],{"class":158},[134,1039,291],{"class":162},[134,1041,746],{"class":158},[134,1043,687],{"class":162},[134,1045,751],{"class":451},[134,1047,203],{"class":190},[134,1049,246],{"class":162},[134,1051,216],{"class":206},[134,1053,246],{"class":162},[134,1055,209],{"class":190},[134,1057,687],{"class":162},[134,1059,766],{"class":451},[134,1061,203],{"class":190},[134,1063,771],{"class":162},[134,1065,775],{"class":774},[134,1067,778],{"class":190},[134,1069,781],{"class":774},[134,1071,784],{"class":190},[134,1073,419],{"class":162},[134,1075,1076],{"class":136,"line":169},[134,1077,141],{"emptyLinePlaceholder":140},[134,1079,1080],{"class":136,"line":175},[134,1081,1082],{"class":147},"    \u002F\u002F webpackの設定にある、pluginsに以下のプラグインインスタンスを入れる。\n",[134,1084,1085,1087,1089,1091,1093,1095],{"class":136,"line":181},[134,1086,797],{"class":158},[134,1088,687],{"class":162},[134,1090,802],{"class":158},[134,1092,687],{"class":162},[134,1094,807],{"class":451},[134,1096,810],{"class":190},[134,1098,1099,1101,1103,1105],{"class":136,"line":187},[134,1100,816],{"class":162},[134,1102,819],{"class":451},[134,1104,203],{"class":190},[134,1106,824],{"class":162},[134,1108,1109],{"class":136,"line":222},[134,1110,1111],{"class":147},"        \u002F\u002F distのファイル名。今回はsrcと同じ。\n",[134,1113,1114,1116,1118,1120,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148],{"class":136,"line":233},[134,1115,830],{"class":190},[134,1117,194],{"class":162},[134,1119,835],{"class":162},[134,1121,483],{"class":158},[134,1123,687],{"class":162},[134,1125,842],{"class":451},[134,1127,845],{"class":158},[134,1129,848],{"class":162},[134,1131,241],{"class":162},[134,1133,52],{"class":206},[134,1135,246],{"class":162},[134,1137,209],{"class":158},[134,1139,859],{"class":162},[134,1141,216],{"class":206},[134,1143,864],{"class":162},[134,1145,867],{"class":158},[134,1147,870],{"class":162},[134,1149,219],{"class":162},[134,1151,1152],{"class":136,"line":251},[134,1153,141],{"emptyLinePlaceholder":140},[134,1155,1156],{"class":136,"line":257},[134,1157,1158],{"class":147},"        \u002F\u002F 自動的にバンドル対象のjs\b(main.js)とcss(style.css)を入れる。お節介ならfalseにする。\n",[134,1160,1161,1163,1165,1167,1169,1171],{"class":136,"line":263},[134,1162,878],{"class":190},[134,1164,194],{"class":162},[134,1166,246],{"class":162},[134,1168,885],{"class":206},[134,1170,246],{"class":162},[134,1172,219],{"class":162},[134,1174,1175],{"class":136,"line":269},[134,1176,141],{"emptyLinePlaceholder":140},[134,1178,1179],{"class":136,"line":275},[134,1180,1181],{"class":147},"        \u002F\u002F 対象のhtmlファイル\n",[134,1183,1184,1186,1188,1190],{"class":136,"line":280},[134,1185,895],{"class":190},[134,1187,194],{"class":162},[134,1189,746],{"class":158},[134,1191,219],{"class":162},[134,1193,1194],{"class":136,"line":296},[134,1195,141],{"emptyLinePlaceholder":140},[134,1197,1198],{"class":136,"line":313},[134,1199,1200],{"class":147},"        \u002F\u002F 圧縮するかどうか。defaultはtrue\n",[134,1202,1203,1205,1207],{"class":136,"line":319},[134,1204,907],{"class":190},[134,1206,194],{"class":162},[134,1208,913],{"class":912},[134,1210,1211,1213],{"class":136,"line":337},[134,1212,919],{"class":162},[134,1214,922],{"class":190},[134,1216,1217],{"class":136,"line":343},[134,1218,928],{"class":190},[134,1220,1221,1223,1225],{"class":136,"line":353},[134,1222,859],{"class":162},[134,1224,209],{"class":158},[134,1226,419],{"class":162},[11,1228,1229,1232,1233,1235],{},[50,1230,1231],{},"new HtmlWebpackPlugin()","では対象のHTMLファイルをwebpackに読み込ませますが、１ファイルづつなのでhtmlが複数ある場合、",[50,1234,516],{},"などを使用して複数の対象ファイルを取得してforeachで回します。",[11,1237,1238,1239,1241,1242,87,1244,1246],{},"こうすることで",[50,1240,959],{},"配下のhtmlがバンドルされます。適当に内容を書いてnpm run buildしてみましょう。dist配下に",[50,1243,86],{},[50,1245,90],{},"が出力されるはずです。",[1248,1249,1253,1256],"div",{"className":1250},[1251,1252],"alert","alert-info",[50,1254,1255],{},"inject:'body'","がある場合、htmlにはバンドル対象のcss\u002Fjsを読み込む為のscriptやlinkを記述する必要はありません。自動的に挿入されます。\n",[96,1258,1259],{"id":1259},"画像パスの解決",[11,1261,1262,1263,1265,1266,1268],{},"HTML編の最後に画像パスの解決を行います。",[50,1264,104],{},"は",[50,1267,56],{},"などロード可能な属性を見つけるとそのパスなどの解決を行おうとします。たとえば以下のようなタグある場合",[69,1270,1273],{"className":1271,"code":1272,"language":82,"meta":77,"style":77},"language-html shiki shiki-themes material-theme-ocean","\u003C!-- バンドル前 -->\n\u003Cimg src=\"image.png\"\u002F>\n\n\u003C!-- バンドル後 -->\n\u003Cimg src=\".\u002Fimage.png\"\u002F>\n",[50,1274,1275,1280,1303,1307,1312],{"__ignoreMap":77},[134,1276,1277],{"class":136,"line":137},[134,1278,1279],{"class":147},"\u003C!-- バンドル前 -->\n",[134,1281,1282,1285,1288,1291,1293,1295,1298,1300],{"class":136,"line":144},[134,1283,1284],{"class":162},"\u003C",[134,1286,1287],{"class":190},"img",[134,1289,1290],{"class":154}," src",[134,1292,163],{"class":162},[134,1294,327],{"class":162},[134,1296,1297],{"class":206},"image.png",[134,1299,327],{"class":162},[134,1301,1302],{"class":162},"\u002F>\n",[134,1304,1305],{"class":136,"line":151},[134,1306,141],{"emptyLinePlaceholder":140},[134,1308,1309],{"class":136,"line":169},[134,1310,1311],{"class":147},"\u003C!-- バンドル後 -->\n",[134,1313,1314,1316,1318,1320,1322,1324,1327,1329],{"class":136,"line":175},[134,1315,1284],{"class":162},[134,1317,1287],{"class":190},[134,1319,1290],{"class":154},[134,1321,163],{"class":162},[134,1323,327],{"class":162},[134,1325,1326],{"class":206},".\u002Fimage.png",[134,1328,327],{"class":162},[134,1330,1302],{"class":162},[11,1332,1333,1334,1336],{},"このように自動的にパスの調整を行います。相対パスだと階層が深い時大変ですので、scssではエイリアスを用いて",[50,1335,56],{},"を指定できましたが、htmlは残念ながらできません。",[69,1338,1340],{"className":1271,"code":1339,"language":82,"meta":77,"style":77},"\u003C!-- バンドル前 -->\n\u003Cimg src=\"~\u002Fimg\u002Fimage.png\"\u002F>\n\n\u003C!-- Module not found -->\n",[50,1341,1342,1346,1365,1369],{"__ignoreMap":77},[134,1343,1344],{"class":136,"line":137},[134,1345,1279],{"class":147},[134,1347,1348,1350,1352,1354,1356,1358,1361,1363],{"class":136,"line":144},[134,1349,1284],{"class":162},[134,1351,1287],{"class":190},[134,1353,1290],{"class":154},[134,1355,163],{"class":162},[134,1357,327],{"class":162},[134,1359,1360],{"class":206},"~\u002Fimg\u002Fimage.png",[134,1362,327],{"class":162},[134,1364,1302],{"class":162},[134,1366,1367],{"class":136,"line":151},[134,1368,141],{"emptyLinePlaceholder":140},[134,1370,1371],{"class":136,"line":169},[134,1372,1373],{"class":147},"\u003C!-- Module not found -->\n",[11,1375,1376,1377,1379,1380,1382],{},"しかし対処法はあります。",[50,1378,129],{},"の",[50,1381,842],{},"にrootsプロパティーを記述します。",[69,1384,1386],{"className":127,"code":1385,"filename":129,"language":130,"meta":77,"style":77},"const buildDefault = {\n    resolve:{\n        extensions: ['.js', '.json', '.scss', '.css'],\n        alias: {\n            '~': path.resolve(__dirname, 'src'),\n        },\n        \u002F\u002F ↓追加！\n        roots: [path.resolve(__dirname, \"src\")],\n    },\n}\n",[50,1387,1388,1398,1406,1454,1463,1496,1501,1506,1536,1540],{"__ignoreMap":77},[134,1389,1390,1392,1394,1396],{"class":136,"line":137},[134,1391,283],{"class":154},[134,1393,286],{"class":158},[134,1395,163],{"class":162},[134,1397,230],{"class":162},[134,1399,1400,1403],{"class":136,"line":144},[134,1401,1402],{"class":190},"    resolve",[134,1404,1405],{"class":162},":{\n",[134,1407,1408,1411,1413,1416,1418,1421,1423,1425,1427,1430,1432,1434,1436,1439,1441,1443,1445,1448,1450,1452],{"class":136,"line":151},[134,1409,1410],{"class":190},"        extensions",[134,1412,194],{"class":162},[134,1414,1415],{"class":158}," [",[134,1417,246],{"class":162},[134,1419,1420],{"class":206},".js",[134,1422,246],{"class":162},[134,1424,848],{"class":162},[134,1426,241],{"class":162},[134,1428,1429],{"class":206},".json",[134,1431,246],{"class":162},[134,1433,848],{"class":162},[134,1435,241],{"class":162},[134,1437,1438],{"class":206},".scss",[134,1440,246],{"class":162},[134,1442,848],{"class":162},[134,1444,241],{"class":162},[134,1446,1447],{"class":206},".css",[134,1449,246],{"class":162},[134,1451,784],{"class":158},[134,1453,219],{"class":162},[134,1455,1456,1459,1461],{"class":136,"line":169},[134,1457,1458],{"class":190},"        alias",[134,1460,194],{"class":162},[134,1462,230],{"class":162},[134,1464,1465,1468,1471,1473,1475,1478,1480,1482,1484,1486,1488,1490,1492,1494],{"class":136,"line":175},[134,1466,1467],{"class":162},"            '",[134,1469,1470],{"class":190},"~",[134,1472,246],{"class":162},[134,1474,194],{"class":162},[134,1476,1477],{"class":158}," path",[134,1479,687],{"class":162},[134,1481,842],{"class":451},[134,1483,845],{"class":158},[134,1485,848],{"class":162},[134,1487,241],{"class":162},[134,1489,56],{"class":206},[134,1491,246],{"class":162},[134,1493,209],{"class":158},[134,1495,219],{"class":162},[134,1497,1498],{"class":136,"line":181},[134,1499,1500],{"class":162},"        },\n",[134,1502,1503],{"class":136,"line":187},[134,1504,1505],{"class":147},"        \u002F\u002F ↓追加！\n",[134,1507,1508,1511,1513,1516,1518,1520,1522,1524,1527,1529,1531,1534],{"class":136,"line":222},[134,1509,1510],{"class":190},"        roots",[134,1512,194],{"class":162},[134,1514,1515],{"class":158}," [path",[134,1517,687],{"class":162},[134,1519,842],{"class":451},[134,1521,845],{"class":158},[134,1523,848],{"class":162},[134,1525,1526],{"class":162}," \"",[134,1528,56],{"class":206},[134,1530,327],{"class":162},[134,1532,1533],{"class":158},")]",[134,1535,219],{"class":162},[134,1537,1538],{"class":136,"line":233},[134,1539,260],{"class":162},[134,1541,1542],{"class":136,"line":251},[134,1543,394],{"class":162},[11,1545,1546],{},"このrootsプロパティを追加した後、パスは以下のようにします。",[69,1548,1550],{"className":1271,"code":1549,"language":82,"meta":77,"style":77},"\u003C!-- バンドル前 -->\n\u003Cimg src=\"\u002Fimg\u002Fimage.png\"\u002F>\n\n\u003C!-- バンドル後 -->\n\u003Cimg src=\"img\u002Fimage.png\"\u002F>\n",[50,1551,1552,1556,1575,1579,1583],{"__ignoreMap":77},[134,1553,1554],{"class":136,"line":137},[134,1555,1279],{"class":147},[134,1557,1558,1560,1562,1564,1566,1568,1571,1573],{"class":136,"line":144},[134,1559,1284],{"class":162},[134,1561,1287],{"class":190},[134,1563,1290],{"class":154},[134,1565,163],{"class":162},[134,1567,327],{"class":162},[134,1569,1570],{"class":206},"\u002Fimg\u002Fimage.png",[134,1572,327],{"class":162},[134,1574,1302],{"class":162},[134,1576,1577],{"class":136,"line":151},[134,1578,141],{"emptyLinePlaceholder":140},[134,1580,1581],{"class":136,"line":169},[134,1582,1311],{"class":147},[134,1584,1585,1587,1589,1591,1593,1595,1598,1600],{"class":136,"line":175},[134,1586,1284],{"class":162},[134,1588,1287],{"class":190},[134,1590,1290],{"class":154},[134,1592,163],{"class":162},[134,1594,327],{"class":162},[134,1596,1597],{"class":206},"img\u002Fimage.png",[134,1599,327],{"class":162},[134,1601,1302],{"class":162},[11,1603,1604,1607,1608,1610,1611,1614],{},[50,1605,1606],{},"roots: [path.resolve(__dirname, \"src\")],","によって",[50,1609,1570],{},"のパスを",[50,1612,1613],{},"src\u002F","を基準に探してくれるようになります。HTMLの場合はこのようにして画像を指定します。",[37,1616,1618],{"id":1617},"pugでhtmlファイルをバンドルする","pugでHTMLファイルをバンドルする",[11,1620,1621,1622,1624],{},"ひとまず以上の設定でhtmlファイルが使用できるようになりました。",[50,1623,959],{},"配下で必要なページ分だけのHTMLを作成して、スタイルはscss、jsも一つにまとめられてスマートに見えます。しかし、繰り返しの記述をしたりテンプレートを作成してより効率的に描きたい時もあると思います。そんな時、テンプレートエンジンと呼ばれるものを使用することでより効率よくマークアップができるようになります。今回はpugを用います。（他の候補としてEJSなどがある）",[96,1626,1627],{"id":1627},"pugの使い方",[11,1629,1630],{},"今回は詳しい説明は省略しますが、概要的に伝えます。pugは以下のような記述でhtmlのマークアップが可能です。",[11,1632,1633],{},"レイアウトテンプレートファイル",[69,1635,1640],{"className":1636,"code":1637,"filename":1638,"language":1639,"meta":77,"style":77},"language-pug shiki shiki-themes material-theme-ocean","doctype html\nhtml(lang=\"ja\")\n    block head\n        include ..\u002Fcomponents\u002Fhead_conf\n    body\n        .body-wrapper\n            block header\n                include ..\u002Fcomponents\u002Fheader\n\n            main.p-main-content\n                block content\n\n            block footer\n                include ..\u002Fcomponents\u002Ffooter\n            \n            block footerNav \n                include ..\u002Fcomponents\u002FfooterNav\n","layout\u002Fdefault.pug","pug",[50,1641,1642,1647,1652,1657,1662,1667,1672,1677,1682,1686,1691,1696,1700,1705,1710,1715,1720],{"__ignoreMap":77},[134,1643,1644],{"class":136,"line":137},[134,1645,1646],{},"doctype html\n",[134,1648,1649],{"class":136,"line":144},[134,1650,1651],{},"html(lang=\"ja\")\n",[134,1653,1654],{"class":136,"line":151},[134,1655,1656],{},"    block head\n",[134,1658,1659],{"class":136,"line":169},[134,1660,1661],{},"        include ..\u002Fcomponents\u002Fhead_conf\n",[134,1663,1664],{"class":136,"line":175},[134,1665,1666],{},"    body\n",[134,1668,1669],{"class":136,"line":181},[134,1670,1671],{},"        .body-wrapper\n",[134,1673,1674],{"class":136,"line":187},[134,1675,1676],{},"            block header\n",[134,1678,1679],{"class":136,"line":222},[134,1680,1681],{},"                include ..\u002Fcomponents\u002Fheader\n",[134,1683,1684],{"class":136,"line":233},[134,1685,141],{"emptyLinePlaceholder":140},[134,1687,1688],{"class":136,"line":251},[134,1689,1690],{},"            main.p-main-content\n",[134,1692,1693],{"class":136,"line":257},[134,1694,1695],{},"                block content\n",[134,1697,1698],{"class":136,"line":263},[134,1699,141],{"emptyLinePlaceholder":140},[134,1701,1702],{"class":136,"line":269},[134,1703,1704],{},"            block footer\n",[134,1706,1707],{"class":136,"line":275},[134,1708,1709],{},"                include ..\u002Fcomponents\u002Ffooter\n",[134,1711,1712],{"class":136,"line":280},[134,1713,1714],{},"            \n",[134,1716,1717],{"class":136,"line":296},[134,1718,1719],{},"            block footerNav \n",[134,1721,1722],{"class":136,"line":313},[134,1723,1724],{},"                include ..\u002Fcomponents\u002FfooterNav\n",[11,1726,1727,1728,1731],{},"main配下のページ内容（上記のテンプレートファイルの",[50,1729,1730],{},"block content","に展開）",[69,1733,1736],{"className":1636,"code":1734,"filename":1735,"language":1639,"meta":77,"style":77},"extends ..\u002Flayouts\u002Fdefault.pug\ninclude ..\u002Fcomponents\u002Fbadge\n    include ..\u002Fcomponents\u002F_data\n        - var recommneds = variables.recommneds\n\nblock content\n    .p-first-view-content\n        .p-sliders.swiper(id=\"top-slider\")\n            .p-slider-wrapper.swiper-wrapper\n                .c-slider.swiper-slide\n                    .c-img-adjuster\n                        img(src=require(\"~\u002Fimg\u002Fsample\u002Ftop_slider_img.jpg\"), alt=\"スライダーの写真\")\n                .c-slider.swiper-slide\n                    .c-img-adjuster\n                        img(src=require(\"~\u002Fimg\u002Fsample\u002Ftop_slider_img.jpg\"), alt=\"スライダーの写真\")\n    \n    div.p-fullfilled\n        .p-row-container\n            .p-row-wrapper\n                each val,index in recommneds\n                    +badge(val,\"recommend-\"+index)\n","pages\u002Findex.pug",[50,1737,1738,1743,1748,1753,1758,1762,1767,1772,1777,1782,1787,1792,1797,1801,1805,1809,1813,1818,1823,1828,1833],{"__ignoreMap":77},[134,1739,1740],{"class":136,"line":137},[134,1741,1742],{},"extends ..\u002Flayouts\u002Fdefault.pug\n",[134,1744,1745],{"class":136,"line":144},[134,1746,1747],{},"include ..\u002Fcomponents\u002Fbadge\n",[134,1749,1750],{"class":136,"line":151},[134,1751,1752],{},"    include ..\u002Fcomponents\u002F_data\n",[134,1754,1755],{"class":136,"line":169},[134,1756,1757],{},"        - var recommneds = variables.recommneds\n",[134,1759,1760],{"class":136,"line":175},[134,1761,141],{"emptyLinePlaceholder":140},[134,1763,1764],{"class":136,"line":181},[134,1765,1766],{},"block content\n",[134,1768,1769],{"class":136,"line":187},[134,1770,1771],{},"    .p-first-view-content\n",[134,1773,1774],{"class":136,"line":222},[134,1775,1776],{},"        .p-sliders.swiper(id=\"top-slider\")\n",[134,1778,1779],{"class":136,"line":233},[134,1780,1781],{},"            .p-slider-wrapper.swiper-wrapper\n",[134,1783,1784],{"class":136,"line":251},[134,1785,1786],{},"                .c-slider.swiper-slide\n",[134,1788,1789],{"class":136,"line":257},[134,1790,1791],{},"                    .c-img-adjuster\n",[134,1793,1794],{"class":136,"line":263},[134,1795,1796],{},"                        img(src=require(\"~\u002Fimg\u002Fsample\u002Ftop_slider_img.jpg\"), alt=\"スライダーの写真\")\n",[134,1798,1799],{"class":136,"line":269},[134,1800,1786],{},[134,1802,1803],{"class":136,"line":275},[134,1804,1791],{},[134,1806,1807],{"class":136,"line":280},[134,1808,1796],{},[134,1810,1811],{"class":136,"line":296},[134,1812,340],{},[134,1814,1815],{"class":136,"line":313},[134,1816,1817],{},"    div.p-fullfilled\n",[134,1819,1820],{"class":136,"line":319},[134,1821,1822],{},"        .p-row-container\n",[134,1824,1825],{"class":136,"line":337},[134,1826,1827],{},"            .p-row-wrapper\n",[134,1829,1830],{"class":136,"line":343},[134,1831,1832],{},"                each val,index in recommneds\n",[134,1834,1835],{"class":136,"line":353},[134,1836,1837],{},"                    +badge(val,\"recommend-\"+index)\n",[11,1839,1840],{},"for文によるループ、テンプレート、mixinやインポートなどPHPなどバック側で行っていたような、htmlの構築ができます。laravelのbladeみたいな感じです。pugを使うことでhtmlで面倒と思っていたことは大体解消できます。変更にも強いのでpugは使うことをお勧めします。",[96,1842,1843],{"id":1843},"ディレクトリを少し変更",[11,1845,1846,1847,1849],{},"htmlの時は単に",[50,1848,959],{},"配下にファイルを配置するだけでしたが、もう少しpugで管理しやすいように以下のように変更します。",[69,1851,1854],{"className":1852,"code":1853,"language":74},[72],".\n├── dist\n├── package-lock.json\n├── package.json\n├── src\n│   ├── imgs\n│   ├── html\n│   │   ├── component\n│   │   ├── layout\n│   │   └── page\n│   ├── js\n│   │   ├── functions.js\n│   │   └── main.js\n│   └── sass\n│       ├── compnent.scss\n│       ├── style.scss\n│       └── variable.scss\n├── node_modules\n└── webpack.config.js\n",[50,1855,1853],{"__ignoreMap":77},[11,1857,1858,848,1861,848,1864,1867,1868,1870,1871,1873,1874,1876],{},[50,1859,1860],{},"component",[50,1862,1863],{},"layout",[50,1865,1866],{},"page",",というものを追加しました。",[50,1869,1860],{},"は繰り返し使われるパーツ（ボタンとかカードとか）のpugを格納、",[50,1872,1863],{},"はhead,bodyの構成を含めたmainタグ以外の箇所のレイアウトを決めるpugを格納し、",[50,1875,1866],{},"にバンドル対象の各種ページのpugを配置します。",[11,1878,1879,1881,1882,87,1885,1888,1889,1891],{},[50,1880,1866],{},"に先ほどの",[50,1883,1884],{},"index.pug",[50,1886,1887],{}," detail.pug","を配置して、最終的にhtmlにして",[50,1890,52],{},"に配置します。適宜component、layoutからファイルをインポートして使用します。私は大体のプロジェクトはこれで十分なカバーできる気がします。",[96,1893,1894],{"id":1894},"webpackでpugを扱う",[11,1896,1897],{},"それではwebpackでpugを扱えるようにしましょう。以下のloaderとpluginを入れます。",[69,1899,1902],{"className":1900,"code":1901,"language":74},[72],"npm install -D pug-loader html-webpack-plugin\n",[50,1903,1901],{"__ignoreMap":77},[11,1905,1906,1908],{},[50,1907,428],{}," はHTML編でここでは入っていれば入りません。",[11,1910,1911,1912,1914],{},"まずは",[50,1913,123],{},"にpugのruleとloaderを追加します。",[69,1916,1918],{"className":127,"code":1917,"filename":129,"language":130,"meta":77,"style":77},"\n\u002F\u002F rulesの配列は後で\nlet rules = [\n    \u002F\u002F ... \n    \u002F\u002F 追加↓\n    {\n        test: \u002F\\.pug$\u002F,\n        exclude: \u002Fnode_modules\u002F,\n        use: [\n          {\n            loader: 'pug-loader',\n            options: {\n              pretty: true,\n            }\n          }\n        ]\n    }\n    \u002F\u002F ...\n]\n\nconst buildDefault = = {\n    entry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: rules\n    },\n\n    rules:rules,\n    \u002F\u002F ...\n}\n\u002F\u002F...\n\nmodule.exports = buildDefault;\n",[50,1919,1920,1924,1928,1938,1942,1946,1950,1968,1984,1992,1997,2012,2021,2033,2038,2043,2048,2053,2057,2061,2065,2077,2091,2095,2109,2113,2121,2129,2133,2137,2147,2151,2155,2159,2163],{"__ignoreMap":77},[134,1921,1922],{"class":136,"line":137},[134,1923,141],{"emptyLinePlaceholder":140},[134,1925,1926],{"class":136,"line":144},[134,1927,148],{"class":147},[134,1929,1930,1932,1934,1936],{"class":136,"line":151},[134,1931,155],{"class":154},[134,1933,159],{"class":158},[134,1935,163],{"class":162},[134,1937,166],{"class":158},[134,1939,1940],{"class":136,"line":169},[134,1941,172],{"class":147},[134,1943,1944],{"class":136,"line":175},[134,1945,178],{"class":147},[134,1947,1948],{"class":136,"line":181},[134,1949,184],{"class":162},[134,1951,1952,1954,1956,1958,1960,1962,1964,1966],{"class":136,"line":187},[134,1953,191],{"class":190},[134,1955,194],{"class":162},[134,1957,197],{"class":162},[134,1959,200],{"class":158},[134,1961,1639],{"class":206},[134,1963,213],{"class":212},[134,1965,216],{"class":162},[134,1967,219],{"class":162},[134,1969,1970,1973,1975,1977,1980,1982],{"class":136,"line":222},[134,1971,1972],{"class":190},"        exclude",[134,1974,194],{"class":162},[134,1976,197],{"class":162},[134,1978,1979],{"class":206},"node_modules",[134,1981,216],{"class":162},[134,1983,219],{"class":162},[134,1985,1986,1988,1990],{"class":136,"line":233},[134,1987,225],{"class":190},[134,1989,194],{"class":162},[134,1991,166],{"class":158},[134,1993,1994],{"class":136,"line":251},[134,1995,1996],{"class":162},"          {\n",[134,1998,1999,2001,2003,2005,2008,2010],{"class":136,"line":257},[134,2000,236],{"class":190},[134,2002,194],{"class":162},[134,2004,241],{"class":162},[134,2006,2007],{"class":206},"pug-loader",[134,2009,246],{"class":162},[134,2011,219],{"class":162},[134,2013,2014,2017,2019],{"class":136,"line":263},[134,2015,2016],{"class":190},"            options",[134,2018,194],{"class":162},[134,2020,230],{"class":162},[134,2022,2023,2026,2028,2031],{"class":136,"line":269},[134,2024,2025],{"class":190},"              pretty",[134,2027,194],{"class":162},[134,2029,2030],{"class":912}," true",[134,2032,219],{"class":162},[134,2034,2035],{"class":136,"line":275},[134,2036,2037],{"class":162},"            }\n",[134,2039,2040],{"class":136,"line":280},[134,2041,2042],{"class":162},"          }\n",[134,2044,2045],{"class":136,"line":296},[134,2046,2047],{"class":158},"        ]\n",[134,2049,2050],{"class":136,"line":313},[134,2051,2052],{"class":162},"    }\n",[134,2054,2055],{"class":136,"line":319},[134,2056,266],{"class":147},[134,2058,2059],{"class":136,"line":337},[134,2060,272],{"class":158},[134,2062,2063],{"class":136,"line":343},[134,2064,141],{"emptyLinePlaceholder":140},[134,2066,2067,2069,2071,2073,2075],{"class":136,"line":353},[134,2068,283],{"class":154},[134,2070,286],{"class":158},[134,2072,163],{"class":162},[134,2074,291],{"class":162},[134,2076,230],{"class":162},[134,2078,2079,2081,2083,2085,2087,2089],{"class":136,"line":364},[134,2080,299],{"class":190},[134,2082,194],{"class":162},[134,2084,241],{"class":162},[134,2086,306],{"class":206},[134,2088,246],{"class":162},[134,2090,219],{"class":162},[134,2092,2093],{"class":136,"line":369},[134,2094,316],{"class":158},[134,2096,2097,2099,2101,2103,2105,2107],{"class":136,"line":374},[134,2098,322],{"class":190},[134,2100,194],{"class":162},[134,2102,327],{"class":162},[134,2104,330],{"class":206},[134,2106,327],{"class":162},[134,2108,219],{"class":162},[134,2110,2111],{"class":136,"line":386},[134,2112,340],{"class":158},[134,2114,2115,2117,2119],{"class":136,"line":391},[134,2116,346],{"class":190},[134,2118,194],{"class":162},[134,2120,230],{"class":162},[134,2122,2123,2125,2127],{"class":136,"line":397},[134,2124,356],{"class":190},[134,2126,194],{"class":162},[134,2128,361],{"class":158},[134,2130,2131],{"class":136,"line":403},[134,2132,260],{"class":162},[134,2134,2135],{"class":136,"line":408},[134,2136,141],{"emptyLinePlaceholder":140},[134,2138,2139,2141,2143,2145],{"class":136,"line":735},[134,2140,377],{"class":190},[134,2142,194],{"class":162},[134,2144,123],{"class":158},[134,2146,219],{"class":162},[134,2148,2149],{"class":136,"line":789},[134,2150,266],{"class":147},[134,2152,2153],{"class":136,"line":794},[134,2154,394],{"class":162},[134,2156,2157],{"class":136,"line":813},[134,2158,400],{"class":147},[134,2160,2161],{"class":136,"line":827},[134,2162,141],{"emptyLinePlaceholder":140},[134,2164,2165,2167,2169,2171],{"class":136,"line":875},[134,2166,411],{"class":162},[134,2168,291],{"class":162},[134,2170,416],{"class":158},[134,2172,419],{"class":162},[11,2174,2175],{},"次に",[69,2177,2179],{"className":127,"code":2178,"filename":129,"language":130,"meta":77,"style":77},"\u002F\u002F ファイル冒頭\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst path = require('path');\n\n\u002F\u002F この２つを追加\nconst globule = require('globule');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nlet rules = [\n    \u002F\u002F 省略... \n]\n\nconst buildDefault = = {\n    entry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: rules\n    },\n\n    rules:rules,\n    \u002F\u002F 以下略...\n}\n\n\u002F\u002F これらを追記\nconst pugFiles = globule.find('src\u002Fhtml\u002Fpage\u002F*', {\n    ignore: [ 'src\u002Fhtml\u002Fcomponents\u002F*','src\u002Fhtml.layouts\u002F*' ]\n});\n\npugFiles.forEach((pug) => {\n    const html = pug.split('\u002F').slice(-1)[0].replace('.pug', '.html');\n    buildDefault.plugins.push(\n      new HtmlWebpackPlugin({\n        filename: `${path.resolve(__dirname, 'dist')}\u002F${html}`,\n        inject:'body',\n        template: pug,\n        minify: false\n      })\n    )\n});\n\nmodule.exports = buildDefault;\n",[50,2180,2181,2185,2207,2229,2233,2237,2259,2281,2285,2295,2299,2303,2307,2319,2333,2337,2351,2355,2363,2371,2375,2379,2389,2393,2397,2401,2405,2433,2462,2470,2474,2495,2564,2578,2588,2626,2640,2650,2658,2664,2668,2676,2680],{"__ignoreMap":77},[134,2182,2183],{"class":136,"line":137},[134,2184,439],{"class":147},[134,2186,2187,2189,2191,2193,2195,2197,2199,2201,2203,2205],{"class":136,"line":144},[134,2188,283],{"class":154},[134,2190,446],{"class":158},[134,2192,163],{"class":162},[134,2194,452],{"class":451},[134,2196,203],{"class":158},[134,2198,246],{"class":162},[134,2200,459],{"class":206},[134,2202,246],{"class":162},[134,2204,209],{"class":158},[134,2206,419],{"class":162},[134,2208,2209,2211,2213,2215,2217,2219,2221,2223,2225,2227],{"class":136,"line":151},[134,2210,283],{"class":154},[134,2212,472],{"class":158},[134,2214,163],{"class":162},[134,2216,452],{"class":451},[134,2218,203],{"class":158},[134,2220,246],{"class":162},[134,2222,483],{"class":206},[134,2224,246],{"class":162},[134,2226,209],{"class":158},[134,2228,419],{"class":162},[134,2230,2231],{"class":136,"line":169},[134,2232,141],{"emptyLinePlaceholder":140},[134,2234,2235],{"class":136,"line":175},[134,2236,498],{"class":147},[134,2238,2239,2241,2243,2245,2247,2249,2251,2253,2255,2257],{"class":136,"line":181},[134,2240,283],{"class":154},[134,2242,505],{"class":158},[134,2244,163],{"class":162},[134,2246,452],{"class":451},[134,2248,203],{"class":158},[134,2250,246],{"class":162},[134,2252,516],{"class":206},[134,2254,246],{"class":162},[134,2256,209],{"class":158},[134,2258,419],{"class":162},[134,2260,2261,2263,2265,2267,2269,2271,2273,2275,2277,2279],{"class":136,"line":187},[134,2262,283],{"class":154},[134,2264,529],{"class":158},[134,2266,163],{"class":162},[134,2268,452],{"class":451},[134,2270,203],{"class":158},[134,2272,246],{"class":162},[134,2274,428],{"class":206},[134,2276,246],{"class":162},[134,2278,209],{"class":158},[134,2280,419],{"class":162},[134,2282,2283],{"class":136,"line":222},[134,2284,141],{"emptyLinePlaceholder":140},[134,2286,2287,2289,2291,2293],{"class":136,"line":233},[134,2288,155],{"class":154},[134,2290,159],{"class":158},[134,2292,163],{"class":162},[134,2294,166],{"class":158},[134,2296,2297],{"class":136,"line":251},[134,2298,564],{"class":147},[134,2300,2301],{"class":136,"line":257},[134,2302,272],{"class":158},[134,2304,2305],{"class":136,"line":263},[134,2306,141],{"emptyLinePlaceholder":140},[134,2308,2309,2311,2313,2315,2317],{"class":136,"line":269},[134,2310,283],{"class":154},[134,2312,286],{"class":158},[134,2314,163],{"class":162},[134,2316,291],{"class":162},[134,2318,230],{"class":162},[134,2320,2321,2323,2325,2327,2329,2331],{"class":136,"line":275},[134,2322,299],{"class":190},[134,2324,194],{"class":162},[134,2326,241],{"class":162},[134,2328,306],{"class":206},[134,2330,246],{"class":162},[134,2332,219],{"class":162},[134,2334,2335],{"class":136,"line":280},[134,2336,316],{"class":158},[134,2338,2339,2341,2343,2345,2347,2349],{"class":136,"line":296},[134,2340,322],{"class":190},[134,2342,194],{"class":162},[134,2344,327],{"class":162},[134,2346,330],{"class":206},[134,2348,327],{"class":162},[134,2350,219],{"class":162},[134,2352,2353],{"class":136,"line":313},[134,2354,340],{"class":158},[134,2356,2357,2359,2361],{"class":136,"line":319},[134,2358,346],{"class":190},[134,2360,194],{"class":162},[134,2362,230],{"class":162},[134,2364,2365,2367,2369],{"class":136,"line":337},[134,2366,356],{"class":190},[134,2368,194],{"class":162},[134,2370,361],{"class":158},[134,2372,2373],{"class":136,"line":343},[134,2374,260],{"class":162},[134,2376,2377],{"class":136,"line":353},[134,2378,141],{"emptyLinePlaceholder":140},[134,2380,2381,2383,2385,2387],{"class":136,"line":364},[134,2382,377],{"class":190},[134,2384,194],{"class":162},[134,2386,123],{"class":158},[134,2388,219],{"class":162},[134,2390,2391],{"class":136,"line":369},[134,2392,659],{"class":147},[134,2394,2395],{"class":136,"line":374},[134,2396,394],{"class":162},[134,2398,2399],{"class":136,"line":386},[134,2400,141],{"emptyLinePlaceholder":140},[134,2402,2403],{"class":136,"line":391},[134,2404,672],{"class":147},[134,2406,2407,2409,2412,2414,2416,2418,2420,2422,2424,2427,2429,2431],{"class":136,"line":397},[134,2408,283],{"class":154},[134,2410,2411],{"class":158}," pugFiles ",[134,2413,163],{"class":162},[134,2415,684],{"class":158},[134,2417,687],{"class":162},[134,2419,690],{"class":451},[134,2421,203],{"class":158},[134,2423,246],{"class":162},[134,2425,2426],{"class":206},"src\u002Fhtml\u002Fpage\u002F*",[134,2428,246],{"class":162},[134,2430,848],{"class":162},[134,2432,230],{"class":162},[134,2434,2435,2438,2440,2443,2445,2448,2450,2452,2454,2457,2459],{"class":136,"line":403},[134,2436,2437],{"class":190},"    ignore",[134,2439,194],{"class":162},[134,2441,2442],{"class":158}," [ ",[134,2444,246],{"class":162},[134,2446,2447],{"class":206},"src\u002Fhtml\u002Fcomponents\u002F*",[134,2449,246],{"class":162},[134,2451,848],{"class":162},[134,2453,246],{"class":162},[134,2455,2456],{"class":206},"src\u002Fhtml.layouts\u002F*",[134,2458,246],{"class":162},[134,2460,2461],{"class":158}," ]\n",[134,2463,2464,2466,2468],{"class":136,"line":408},[134,2465,859],{"class":162},[134,2467,209],{"class":158},[134,2469,419],{"class":162},[134,2471,2472],{"class":136,"line":735},[134,2473,141],{"emptyLinePlaceholder":140},[134,2475,2476,2479,2481,2483,2485,2487,2489,2491,2493],{"class":136,"line":789},[134,2477,2478],{"class":158},"pugFiles",[134,2480,687],{"class":162},[134,2482,717],{"class":451},[134,2484,203],{"class":158},[134,2486,203],{"class":162},[134,2488,1639],{"class":724},[134,2490,209],{"class":162},[134,2492,730],{"class":154},[134,2494,230],{"class":162},[134,2496,2497,2499,2502,2504,2507,2509,2511,2513,2515,2517,2519,2521,2523,2525,2527,2529,2531,2533,2535,2537,2539,2542,2544,2546,2549,2551,2553,2555,2558,2560,2562],{"class":136,"line":794},[134,2498,738],{"class":154},[134,2500,2501],{"class":158}," html",[134,2503,291],{"class":162},[134,2505,2506],{"class":158}," pug",[134,2508,687],{"class":162},[134,2510,751],{"class":451},[134,2512,203],{"class":190},[134,2514,246],{"class":162},[134,2516,216],{"class":206},[134,2518,246],{"class":162},[134,2520,209],{"class":190},[134,2522,687],{"class":162},[134,2524,766],{"class":451},[134,2526,203],{"class":190},[134,2528,771],{"class":162},[134,2530,775],{"class":774},[134,2532,778],{"class":190},[134,2534,781],{"class":774},[134,2536,784],{"class":190},[134,2538,687],{"class":162},[134,2540,2541],{"class":451},"replace",[134,2543,203],{"class":190},[134,2545,246],{"class":162},[134,2547,2548],{"class":206},".pug",[134,2550,246],{"class":162},[134,2552,848],{"class":162},[134,2554,241],{"class":162},[134,2556,2557],{"class":206},".html",[134,2559,246],{"class":162},[134,2561,209],{"class":190},[134,2563,419],{"class":162},[134,2565,2566,2568,2570,2572,2574,2576],{"class":136,"line":813},[134,2567,797],{"class":158},[134,2569,687],{"class":162},[134,2571,802],{"class":158},[134,2573,687],{"class":162},[134,2575,807],{"class":451},[134,2577,810],{"class":190},[134,2579,2580,2582,2584,2586],{"class":136,"line":827},[134,2581,816],{"class":162},[134,2583,819],{"class":451},[134,2585,203],{"class":190},[134,2587,824],{"class":162},[134,2589,2590,2592,2594,2596,2598,2600,2602,2604,2606,2608,2610,2612,2614,2616,2618,2620,2622,2624],{"class":136,"line":875},[134,2591,830],{"class":190},[134,2593,194],{"class":162},[134,2595,835],{"class":162},[134,2597,483],{"class":158},[134,2599,687],{"class":162},[134,2601,842],{"class":451},[134,2603,845],{"class":158},[134,2605,848],{"class":162},[134,2607,241],{"class":162},[134,2609,52],{"class":206},[134,2611,246],{"class":162},[134,2613,209],{"class":158},[134,2615,859],{"class":162},[134,2617,216],{"class":206},[134,2619,864],{"class":162},[134,2621,82],{"class":158},[134,2623,870],{"class":162},[134,2625,219],{"class":162},[134,2627,2628,2630,2632,2634,2636,2638],{"class":136,"line":892},[134,2629,878],{"class":190},[134,2631,194],{"class":162},[134,2633,246],{"class":162},[134,2635,885],{"class":206},[134,2637,246],{"class":162},[134,2639,219],{"class":162},[134,2641,2642,2644,2646,2648],{"class":136,"line":904},[134,2643,895],{"class":190},[134,2645,194],{"class":162},[134,2647,2506],{"class":158},[134,2649,219],{"class":162},[134,2651,2652,2654,2656],{"class":136,"line":916},[134,2653,907],{"class":190},[134,2655,194],{"class":162},[134,2657,913],{"class":912},[134,2659,2660,2662],{"class":136,"line":925},[134,2661,919],{"class":162},[134,2663,922],{"class":190},[134,2665,2666],{"class":136,"line":931},[134,2667,928],{"class":190},[134,2669,2670,2672,2674],{"class":136,"line":940},[134,2671,859],{"class":162},[134,2673,209],{"class":158},[134,2675,419],{"class":162},[134,2677,2678],{"class":136,"line":945},[134,2679,141],{"emptyLinePlaceholder":140},[134,2681,2683,2685,2687,2689],{"class":136,"line":2682},43,[134,2684,411],{"class":162},[134,2686,291],{"class":162},[134,2688,416],{"class":158},[134,2690,419],{"class":162},[11,2692,2693],{},"詳細はHTML編の記述を見てください。HTML編と似ていますが、",[69,2695,2697],{"className":127,"code":2696,"language":130,"meta":77,"style":77},"const pugFiles = globule.find('src\u002Fhtml\u002F*', {\n    ignore: [ 'src\u002Fhtml\u002Fcomponents\u002F*','src\u002Fhtml.layouts\u002F*' ]\n});\n",[50,2698,2699,2726,2750],{"__ignoreMap":77},[134,2700,2701,2703,2705,2707,2709,2711,2713,2715,2717,2720,2722,2724],{"class":136,"line":137},[134,2702,283],{"class":154},[134,2704,2411],{"class":158},[134,2706,163],{"class":162},[134,2708,684],{"class":158},[134,2710,687],{"class":162},[134,2712,690],{"class":451},[134,2714,203],{"class":158},[134,2716,246],{"class":162},[134,2718,2719],{"class":206},"src\u002Fhtml\u002F*",[134,2721,246],{"class":162},[134,2723,848],{"class":162},[134,2725,230],{"class":162},[134,2727,2728,2730,2732,2734,2736,2738,2740,2742,2744,2746,2748],{"class":136,"line":144},[134,2729,2437],{"class":190},[134,2731,194],{"class":162},[134,2733,2442],{"class":158},[134,2735,246],{"class":162},[134,2737,2447],{"class":206},[134,2739,246],{"class":162},[134,2741,848],{"class":162},[134,2743,246],{"class":162},[134,2745,2456],{"class":206},[134,2747,246],{"class":162},[134,2749,2461],{"class":158},[134,2751,2752,2754,2756],{"class":136,"line":151},[134,2753,859],{"class":162},[134,2755,209],{"class":158},[134,2757,419],{"class":162},[11,2759,2760,2762,2763,2766,2767,2769],{},[50,2761,516],{},"では",[50,2764,2765],{},"ignore","を指定して全てのpugファイルを拾わないようにします。（今回の構成ならfindするディレクトリを ",[50,2768,2426],{}," にしてもいいかもしれません）",[11,2771,2772],{},"基本的にはこれでpugは使えるようになります。",[96,2774,2775],{"id":2775},"pugでの画像パスの解決",[11,2777,2778,2779,2781,2782,2785],{},"HTMLでは",[50,2780,842],{},"で",[50,2783,2784],{},"roots","を指定していました。pugではそれらの指定は特に必要なく、以下のように指定します。",[69,2787,2789],{"className":1636,"code":2788,"language":1639,"meta":77,"style":77},"\u002F\u002F- OK\nimg(src=require(\"~\u002Fimg\u002Fsample.png\"), alt=\"\")\n\n\u002F\u002F- NG\nimg(src=\"~\u002Fimg\u002Fsample.png\", alt=\"\")\n",[50,2790,2791,2796,2801,2805,2810],{"__ignoreMap":77},[134,2792,2793],{"class":136,"line":137},[134,2794,2795],{},"\u002F\u002F- OK\n",[134,2797,2798],{"class":136,"line":144},[134,2799,2800],{},"img(src=require(\"~\u002Fimg\u002Fsample.png\"), alt=\"\")\n",[134,2802,2803],{"class":136,"line":151},[134,2804,141],{"emptyLinePlaceholder":140},[134,2806,2807],{"class":136,"line":169},[134,2808,2809],{},"\u002F\u002F- NG\n",[134,2811,2812],{"class":136,"line":175},[134,2813,2814],{},"img(src=\"~\u002Fimg\u002Fsample.png\", alt=\"\")\n",[11,2816,2817],{},"pugではnode.jsやjsの記述が利用できる為、requireを用いてエイリアスと一緒にパスの解決ができます。",[37,2819,2821],{"id":2820},"以上","以上！",[11,2823,2824,2825,2827],{},"以上でwebpackを用いたjs,scss,画像,htmlのバンドルは以上となります。vueやtypecriptの導入を考えるとさらに深い理解は必要そうですが、ひとまずHTMLのマークアップ程度であれば今回の構成を用いれば十分な気がします。vue・typesciptもいずれやってみようと思います。また今回使用した",[50,2826,129],{},"は以下の通りとなります。参考にどうぞ。",[69,2829,2831],{"className":127,"code":2830,"filename":129,"language":130,"meta":77,"style":77},"const MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst path = require('path');\nconst globule = require('globule');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n  \nlet rules = [\n    {\n        test: \u002F\\.(sa|sc|c)ss$\u002F,\n        exclude: \u002Fnode_modules\u002F,\n        use: [\n            MiniCssExtractPlugin.loader,\n            {\n                loader: 'css-loader',\n                options: { url: true }\n            },\n            'sass-loader',\n        ],\n    },\n    {\n        test: \u002F\\.(png|jpg|gif|svg)$\u002Fi,\n        generator: {\n            filename: 'img\u002F[name][ext][query]'\n        },\n        type: 'asset\u002Fresource'\n    },\n    {\n        test: \u002F\\.(html)$\u002F,\n        use: {\n            loader: 'html-loader',\n        }\n     },\n    {\n        test: \u002F\\.pug$\u002F,\n        exclude: \u002Fnode_modules\u002F,\n        use: [\n          {\n            loader: 'pug-loader',\n            options: {\n              pretty: true,\n            }\n          }\n        ]\n    }\n]\n\nif(process.env.es5){\n    rules.push(\n        {\n            test: \u002F\\.m?js$\u002F,\n            exclude: \u002F(node_modules|bower_components)\u002F,\n            use: {\n              loader: 'babel-loader',\n              options: {\n                presets: ['@babel\u002Fpreset-env']\n              }\n            },\n            generator: {\n              filename: '[name].js'\n            }\n        }\n    )\n}\n\nconst buildDefault = {\n    entry:['.\u002Fsrc\u002Findex.js'],\n  \n    mode:process.env.mode,\n    \n    module: {\n        rules: rules\n    },\n    resolve:{\n        extensions: ['.js', '.json', '.scss', '.css'],\n        alias: {\n          '~': path.resolve(__dirname, 'src'),\n        },\n        roots: [path.resolve(__dirname, \"src\")],\n    },\n    \u002F\u002F ファイルの出力設定\n    output: {\n        \u002F\u002F  出力ファイルのディレクトリ名\n        path: `${__dirname}\u002Fdist`,\n        filename: '[name].js',\n    },\n    plugins: [\n        new MiniCssExtractPlugin({\n            filename: '[name].css'\n        }),\n    ]\n};\n\nconst pugFiles = globule.find('src\u002Fhtml\u002F*', {\n    ignore: [ 'src\u002Fhtml\u002Fcomponents\u002F*','src\u002Fhtml.layouts\u002F*' ]\n});\n\npugFiles.forEach((pug) => {\n    const html = pug.split('\u002F').slice(-1)[0].replace('.pug', '.html');\n    buildDefault.plugins.push(\n      new HtmlWebpackPlugin({\n        filename: `${path.resolve(__dirname, 'dist')}\u002F${html}`,\n        inject:'body',\n        template: pug,\n        minify: false\n      })\n    )\n});\n\nmodule.exports = buildDefault;\n",[50,2832,2833,2855,2877,2899,2921,2925,2935,2939,2976,2990,2998,3010,3015,3031,3051,3056,3067,3074,3078,3082,3123,3132,3147,3151,3165,3169,3173,3195,3203,3217,3221,3226,3230,3248,3262,3270,3274,3288,3296,3306,3310,3314,3318,3322,3327,3332,3353,3364,3370,3397,3420,3430,3447,3457,3476,3482,3487,3497,3512,3517,3522,3527,3532,3537,3548,3569,3574,3595,3600,3609,3618,3623,3630,3673,3682,3714,3719,3746,3751,3757,3767,3773,3796,3811,3816,3826,3839,3853,3863,3869,3875,3880,3907,3932,3941,3946,3967,4032,4047,4058,4097,4112,4123,4132,4139,4144,4153,4158],{"__ignoreMap":77},[134,2834,2835,2837,2839,2841,2843,2845,2847,2849,2851,2853],{"class":136,"line":137},[134,2836,283],{"class":154},[134,2838,446],{"class":158},[134,2840,163],{"class":162},[134,2842,452],{"class":451},[134,2844,203],{"class":158},[134,2846,246],{"class":162},[134,2848,459],{"class":206},[134,2850,246],{"class":162},[134,2852,209],{"class":158},[134,2854,419],{"class":162},[134,2856,2857,2859,2861,2863,2865,2867,2869,2871,2873,2875],{"class":136,"line":144},[134,2858,283],{"class":154},[134,2860,472],{"class":158},[134,2862,163],{"class":162},[134,2864,452],{"class":451},[134,2866,203],{"class":158},[134,2868,246],{"class":162},[134,2870,483],{"class":206},[134,2872,246],{"class":162},[134,2874,209],{"class":158},[134,2876,419],{"class":162},[134,2878,2879,2881,2883,2885,2887,2889,2891,2893,2895,2897],{"class":136,"line":151},[134,2880,283],{"class":154},[134,2882,505],{"class":158},[134,2884,163],{"class":162},[134,2886,452],{"class":451},[134,2888,203],{"class":158},[134,2890,246],{"class":162},[134,2892,516],{"class":206},[134,2894,246],{"class":162},[134,2896,209],{"class":158},[134,2898,419],{"class":162},[134,2900,2901,2903,2905,2907,2909,2911,2913,2915,2917,2919],{"class":136,"line":169},[134,2902,283],{"class":154},[134,2904,529],{"class":158},[134,2906,163],{"class":162},[134,2908,452],{"class":451},[134,2910,203],{"class":158},[134,2912,246],{"class":162},[134,2914,428],{"class":206},[134,2916,246],{"class":162},[134,2918,209],{"class":158},[134,2920,419],{"class":162},[134,2922,2923],{"class":136,"line":175},[134,2924,316],{"class":158},[134,2926,2927,2929,2931,2933],{"class":136,"line":181},[134,2928,155],{"class":154},[134,2930,159],{"class":158},[134,2932,163],{"class":162},[134,2934,166],{"class":158},[134,2936,2937],{"class":136,"line":187},[134,2938,184],{"class":162},[134,2940,2941,2943,2945,2947,2949,2951,2954,2957,2960,2962,2965,2967,2970,2972,2974],{"class":136,"line":222},[134,2942,191],{"class":190},[134,2944,194],{"class":162},[134,2946,197],{"class":162},[134,2948,200],{"class":158},[134,2950,203],{"class":162},[134,2952,2953],{"class":206},"sa",[134,2955,2956],{"class":162},"|",[134,2958,2959],{"class":206},"sc",[134,2961,2956],{"class":162},[134,2963,2964],{"class":206},"c",[134,2966,209],{"class":162},[134,2968,2969],{"class":206},"ss",[134,2971,213],{"class":212},[134,2973,216],{"class":162},[134,2975,219],{"class":162},[134,2977,2978,2980,2982,2984,2986,2988],{"class":136,"line":233},[134,2979,1972],{"class":190},[134,2981,194],{"class":162},[134,2983,197],{"class":162},[134,2985,1979],{"class":206},[134,2987,216],{"class":162},[134,2989,219],{"class":162},[134,2991,2992,2994,2996],{"class":136,"line":251},[134,2993,225],{"class":190},[134,2995,194],{"class":162},[134,2997,166],{"class":158},[134,2999,3000,3003,3005,3008],{"class":136,"line":257},[134,3001,3002],{"class":158},"            MiniCssExtractPlugin",[134,3004,687],{"class":162},[134,3006,3007],{"class":158},"loader",[134,3009,219],{"class":162},[134,3011,3012],{"class":136,"line":263},[134,3013,3014],{"class":162},"            {\n",[134,3016,3017,3020,3022,3024,3027,3029],{"class":136,"line":269},[134,3018,3019],{"class":190},"                loader",[134,3021,194],{"class":162},[134,3023,241],{"class":162},[134,3025,3026],{"class":206},"css-loader",[134,3028,246],{"class":162},[134,3030,219],{"class":162},[134,3032,3033,3036,3038,3041,3044,3046,3048],{"class":136,"line":275},[134,3034,3035],{"class":190},"                options",[134,3037,194],{"class":162},[134,3039,3040],{"class":162}," {",[134,3042,3043],{"class":190}," url",[134,3045,194],{"class":162},[134,3047,2030],{"class":912},[134,3049,3050],{"class":162}," }\n",[134,3052,3053],{"class":136,"line":280},[134,3054,3055],{"class":162},"            },\n",[134,3057,3058,3060,3063,3065],{"class":136,"line":296},[134,3059,1467],{"class":162},[134,3061,3062],{"class":206},"sass-loader",[134,3064,246],{"class":162},[134,3066,219],{"class":162},[134,3068,3069,3072],{"class":136,"line":313},[134,3070,3071],{"class":158},"        ]",[134,3073,219],{"class":162},[134,3075,3076],{"class":136,"line":319},[134,3077,260],{"class":162},[134,3079,3080],{"class":136,"line":337},[134,3081,184],{"class":162},[134,3083,3084,3086,3088,3090,3092,3094,3097,3099,3102,3104,3107,3109,3112,3114,3116,3118,3121],{"class":136,"line":343},[134,3085,191],{"class":190},[134,3087,194],{"class":162},[134,3089,197],{"class":162},[134,3091,200],{"class":158},[134,3093,203],{"class":162},[134,3095,3096],{"class":206},"png",[134,3098,2956],{"class":162},[134,3100,3101],{"class":206},"jpg",[134,3103,2956],{"class":162},[134,3105,3106],{"class":206},"gif",[134,3108,2956],{"class":162},[134,3110,3111],{"class":206},"svg",[134,3113,209],{"class":162},[134,3115,213],{"class":212},[134,3117,216],{"class":162},[134,3119,3120],{"class":774},"i",[134,3122,219],{"class":162},[134,3124,3125,3128,3130],{"class":136,"line":353},[134,3126,3127],{"class":190},"        generator",[134,3129,194],{"class":162},[134,3131,230],{"class":162},[134,3133,3134,3137,3139,3141,3144],{"class":136,"line":364},[134,3135,3136],{"class":190},"            filename",[134,3138,194],{"class":162},[134,3140,241],{"class":162},[134,3142,3143],{"class":206},"img\u002F[name][ext][query]",[134,3145,3146],{"class":162},"'\n",[134,3148,3149],{"class":136,"line":369},[134,3150,1500],{"class":162},[134,3152,3153,3156,3158,3160,3163],{"class":136,"line":374},[134,3154,3155],{"class":190},"        type",[134,3157,194],{"class":162},[134,3159,241],{"class":162},[134,3161,3162],{"class":206},"asset\u002Fresource",[134,3164,3146],{"class":162},[134,3166,3167],{"class":136,"line":386},[134,3168,260],{"class":162},[134,3170,3171],{"class":136,"line":391},[134,3172,184],{"class":162},[134,3174,3175,3177,3179,3181,3183,3185,3187,3189,3191,3193],{"class":136,"line":397},[134,3176,191],{"class":190},[134,3178,194],{"class":162},[134,3180,197],{"class":162},[134,3182,200],{"class":158},[134,3184,203],{"class":162},[134,3186,82],{"class":206},[134,3188,209],{"class":162},[134,3190,213],{"class":212},[134,3192,216],{"class":162},[134,3194,219],{"class":162},[134,3196,3197,3199,3201],{"class":136,"line":403},[134,3198,225],{"class":190},[134,3200,194],{"class":162},[134,3202,230],{"class":162},[134,3204,3205,3207,3209,3211,3213,3215],{"class":136,"line":408},[134,3206,236],{"class":190},[134,3208,194],{"class":162},[134,3210,241],{"class":162},[134,3212,104],{"class":206},[134,3214,246],{"class":162},[134,3216,219],{"class":162},[134,3218,3219],{"class":136,"line":735},[134,3220,254],{"class":162},[134,3222,3223],{"class":136,"line":789},[134,3224,3225],{"class":162},"     },\n",[134,3227,3228],{"class":136,"line":794},[134,3229,184],{"class":162},[134,3231,3232,3234,3236,3238,3240,3242,3244,3246],{"class":136,"line":813},[134,3233,191],{"class":190},[134,3235,194],{"class":162},[134,3237,197],{"class":162},[134,3239,200],{"class":158},[134,3241,1639],{"class":206},[134,3243,213],{"class":212},[134,3245,216],{"class":162},[134,3247,219],{"class":162},[134,3249,3250,3252,3254,3256,3258,3260],{"class":136,"line":827},[134,3251,1972],{"class":190},[134,3253,194],{"class":162},[134,3255,197],{"class":162},[134,3257,1979],{"class":206},[134,3259,216],{"class":162},[134,3261,219],{"class":162},[134,3263,3264,3266,3268],{"class":136,"line":875},[134,3265,225],{"class":190},[134,3267,194],{"class":162},[134,3269,166],{"class":158},[134,3271,3272],{"class":136,"line":892},[134,3273,1996],{"class":162},[134,3275,3276,3278,3280,3282,3284,3286],{"class":136,"line":904},[134,3277,236],{"class":190},[134,3279,194],{"class":162},[134,3281,241],{"class":162},[134,3283,2007],{"class":206},[134,3285,246],{"class":162},[134,3287,219],{"class":162},[134,3289,3290,3292,3294],{"class":136,"line":916},[134,3291,2016],{"class":190},[134,3293,194],{"class":162},[134,3295,230],{"class":162},[134,3297,3298,3300,3302,3304],{"class":136,"line":925},[134,3299,2025],{"class":190},[134,3301,194],{"class":162},[134,3303,2030],{"class":912},[134,3305,219],{"class":162},[134,3307,3308],{"class":136,"line":931},[134,3309,2037],{"class":162},[134,3311,3312],{"class":136,"line":940},[134,3313,2042],{"class":162},[134,3315,3316],{"class":136,"line":945},[134,3317,2047],{"class":158},[134,3319,3320],{"class":136,"line":2682},[134,3321,2052],{"class":162},[134,3323,3325],{"class":136,"line":3324},44,[134,3326,272],{"class":158},[134,3328,3330],{"class":136,"line":3329},45,[134,3331,141],{"emptyLinePlaceholder":140},[134,3333,3335,3338,3341,3343,3346,3348,3351],{"class":136,"line":3334},46,[134,3336,3337],{"class":212},"if",[134,3339,3340],{"class":158},"(process",[134,3342,687],{"class":162},[134,3344,3345],{"class":158},"env",[134,3347,687],{"class":162},[134,3349,3350],{"class":158},"es5)",[134,3352,824],{"class":162},[134,3354,3356,3358,3360,3362],{"class":136,"line":3355},47,[134,3357,377],{"class":158},[134,3359,687],{"class":162},[134,3361,807],{"class":451},[134,3363,810],{"class":190},[134,3365,3367],{"class":136,"line":3366},48,[134,3368,3369],{"class":162},"        {\n",[134,3371,3373,3376,3378,3380,3382,3385,3388,3391,3393,3395],{"class":136,"line":3372},49,[134,3374,3375],{"class":190},"            test",[134,3377,194],{"class":162},[134,3379,197],{"class":162},[134,3381,200],{"class":158},[134,3383,3384],{"class":206},"m",[134,3386,3387],{"class":162},"?",[134,3389,3390],{"class":206},"js",[134,3392,213],{"class":212},[134,3394,216],{"class":162},[134,3396,219],{"class":162},[134,3398,3400,3403,3405,3408,3410,3412,3415,3418],{"class":136,"line":3399},50,[134,3401,3402],{"class":190},"            exclude",[134,3404,194],{"class":162},[134,3406,3407],{"class":162}," \u002F(",[134,3409,1979],{"class":206},[134,3411,2956],{"class":162},[134,3413,3414],{"class":206},"bower_components",[134,3416,3417],{"class":162},")\u002F",[134,3419,219],{"class":162},[134,3421,3423,3426,3428],{"class":136,"line":3422},51,[134,3424,3425],{"class":190},"            use",[134,3427,194],{"class":162},[134,3429,230],{"class":162},[134,3431,3433,3436,3438,3440,3443,3445],{"class":136,"line":3432},52,[134,3434,3435],{"class":190},"              loader",[134,3437,194],{"class":162},[134,3439,241],{"class":162},[134,3441,3442],{"class":206},"babel-loader",[134,3444,246],{"class":162},[134,3446,219],{"class":162},[134,3448,3450,3453,3455],{"class":136,"line":3449},53,[134,3451,3452],{"class":190},"              options",[134,3454,194],{"class":162},[134,3456,230],{"class":162},[134,3458,3460,3463,3465,3467,3469,3472,3474],{"class":136,"line":3459},54,[134,3461,3462],{"class":190},"                presets",[134,3464,194],{"class":162},[134,3466,1415],{"class":190},[134,3468,246],{"class":162},[134,3470,3471],{"class":206},"@babel\u002Fpreset-env",[134,3473,246],{"class":162},[134,3475,272],{"class":190},[134,3477,3479],{"class":136,"line":3478},55,[134,3480,3481],{"class":162},"              }\n",[134,3483,3485],{"class":136,"line":3484},56,[134,3486,3055],{"class":162},[134,3488,3490,3493,3495],{"class":136,"line":3489},57,[134,3491,3492],{"class":190},"            generator",[134,3494,194],{"class":162},[134,3496,230],{"class":162},[134,3498,3500,3503,3505,3507,3510],{"class":136,"line":3499},58,[134,3501,3502],{"class":190},"              filename",[134,3504,194],{"class":162},[134,3506,241],{"class":162},[134,3508,3509],{"class":206},"[name].js",[134,3511,3146],{"class":162},[134,3513,3515],{"class":136,"line":3514},59,[134,3516,2037],{"class":162},[134,3518,3520],{"class":136,"line":3519},60,[134,3521,254],{"class":162},[134,3523,3525],{"class":136,"line":3524},61,[134,3526,928],{"class":190},[134,3528,3530],{"class":136,"line":3529},62,[134,3531,394],{"class":162},[134,3533,3535],{"class":136,"line":3534},63,[134,3536,141],{"emptyLinePlaceholder":140},[134,3538,3540,3542,3544,3546],{"class":136,"line":3539},64,[134,3541,283],{"class":154},[134,3543,286],{"class":158},[134,3545,163],{"class":162},[134,3547,230],{"class":162},[134,3549,3551,3553,3555,3558,3560,3563,3565,3567],{"class":136,"line":3550},65,[134,3552,299],{"class":190},[134,3554,194],{"class":162},[134,3556,3557],{"class":158},"[",[134,3559,246],{"class":162},[134,3561,3562],{"class":206},".\u002Fsrc\u002Findex.js",[134,3564,246],{"class":162},[134,3566,784],{"class":158},[134,3568,219],{"class":162},[134,3570,3572],{"class":136,"line":3571},66,[134,3573,316],{"class":158},[134,3575,3577,3579,3581,3584,3586,3588,3590,3593],{"class":136,"line":3576},67,[134,3578,322],{"class":190},[134,3580,194],{"class":162},[134,3582,3583],{"class":158},"process",[134,3585,687],{"class":162},[134,3587,3345],{"class":158},[134,3589,687],{"class":162},[134,3591,3592],{"class":158},"mode",[134,3594,219],{"class":162},[134,3596,3598],{"class":136,"line":3597},68,[134,3599,340],{"class":158},[134,3601,3603,3605,3607],{"class":136,"line":3602},69,[134,3604,346],{"class":190},[134,3606,194],{"class":162},[134,3608,230],{"class":162},[134,3610,3612,3614,3616],{"class":136,"line":3611},70,[134,3613,356],{"class":190},[134,3615,194],{"class":162},[134,3617,361],{"class":158},[134,3619,3621],{"class":136,"line":3620},71,[134,3622,260],{"class":162},[134,3624,3626,3628],{"class":136,"line":3625},72,[134,3627,1402],{"class":190},[134,3629,1405],{"class":162},[134,3631,3633,3635,3637,3639,3641,3643,3645,3647,3649,3651,3653,3655,3657,3659,3661,3663,3665,3667,3669,3671],{"class":136,"line":3632},73,[134,3634,1410],{"class":190},[134,3636,194],{"class":162},[134,3638,1415],{"class":158},[134,3640,246],{"class":162},[134,3642,1420],{"class":206},[134,3644,246],{"class":162},[134,3646,848],{"class":162},[134,3648,241],{"class":162},[134,3650,1429],{"class":206},[134,3652,246],{"class":162},[134,3654,848],{"class":162},[134,3656,241],{"class":162},[134,3658,1438],{"class":206},[134,3660,246],{"class":162},[134,3662,848],{"class":162},[134,3664,241],{"class":162},[134,3666,1447],{"class":206},[134,3668,246],{"class":162},[134,3670,784],{"class":158},[134,3672,219],{"class":162},[134,3674,3676,3678,3680],{"class":136,"line":3675},74,[134,3677,1458],{"class":190},[134,3679,194],{"class":162},[134,3681,230],{"class":162},[134,3683,3685,3688,3690,3692,3694,3696,3698,3700,3702,3704,3706,3708,3710,3712],{"class":136,"line":3684},75,[134,3686,3687],{"class":162},"          '",[134,3689,1470],{"class":190},[134,3691,246],{"class":162},[134,3693,194],{"class":162},[134,3695,1477],{"class":158},[134,3697,687],{"class":162},[134,3699,842],{"class":451},[134,3701,845],{"class":158},[134,3703,848],{"class":162},[134,3705,241],{"class":162},[134,3707,56],{"class":206},[134,3709,246],{"class":162},[134,3711,209],{"class":158},[134,3713,219],{"class":162},[134,3715,3717],{"class":136,"line":3716},76,[134,3718,1500],{"class":162},[134,3720,3722,3724,3726,3728,3730,3732,3734,3736,3738,3740,3742,3744],{"class":136,"line":3721},77,[134,3723,1510],{"class":190},[134,3725,194],{"class":162},[134,3727,1515],{"class":158},[134,3729,687],{"class":162},[134,3731,842],{"class":451},[134,3733,845],{"class":158},[134,3735,848],{"class":162},[134,3737,1526],{"class":162},[134,3739,56],{"class":206},[134,3741,327],{"class":162},[134,3743,1533],{"class":158},[134,3745,219],{"class":162},[134,3747,3749],{"class":136,"line":3748},78,[134,3750,260],{"class":162},[134,3752,3754],{"class":136,"line":3753},79,[134,3755,3756],{"class":147},"    \u002F\u002F ファイルの出力設定\n",[134,3758,3760,3763,3765],{"class":136,"line":3759},80,[134,3761,3762],{"class":190},"    output",[134,3764,194],{"class":162},[134,3766,230],{"class":162},[134,3768,3770],{"class":136,"line":3769},81,[134,3771,3772],{"class":147},"        \u002F\u002F  出力ファイルのディレクトリ名\n",[134,3774,3776,3779,3781,3783,3786,3788,3791,3794],{"class":136,"line":3775},82,[134,3777,3778],{"class":190},"        path",[134,3780,194],{"class":162},[134,3782,835],{"class":162},[134,3784,3785],{"class":158},"__dirname",[134,3787,859],{"class":162},[134,3789,3790],{"class":206},"\u002Fdist",[134,3792,3793],{"class":162},"`",[134,3795,219],{"class":162},[134,3797,3799,3801,3803,3805,3807,3809],{"class":136,"line":3798},83,[134,3800,830],{"class":190},[134,3802,194],{"class":162},[134,3804,241],{"class":162},[134,3806,3509],{"class":206},[134,3808,246],{"class":162},[134,3810,219],{"class":162},[134,3812,3814],{"class":136,"line":3813},84,[134,3815,260],{"class":162},[134,3817,3819,3822,3824],{"class":136,"line":3818},85,[134,3820,3821],{"class":190},"    plugins",[134,3823,194],{"class":162},[134,3825,166],{"class":158},[134,3827,3829,3832,3835,3837],{"class":136,"line":3828},86,[134,3830,3831],{"class":162},"        new",[134,3833,3834],{"class":451}," MiniCssExtractPlugin",[134,3836,203],{"class":158},[134,3838,824],{"class":162},[134,3840,3842,3844,3846,3848,3851],{"class":136,"line":3841},87,[134,3843,3136],{"class":190},[134,3845,194],{"class":162},[134,3847,241],{"class":162},[134,3849,3850],{"class":206},"[name].css",[134,3852,3146],{"class":162},[134,3854,3856,3859,3861],{"class":136,"line":3855},88,[134,3857,3858],{"class":162},"        }",[134,3860,209],{"class":158},[134,3862,219],{"class":162},[134,3864,3866],{"class":136,"line":3865},89,[134,3867,3868],{"class":158},"    ]\n",[134,3870,3872],{"class":136,"line":3871},90,[134,3873,3874],{"class":162},"};\n",[134,3876,3878],{"class":136,"line":3877},91,[134,3879,141],{"emptyLinePlaceholder":140},[134,3881,3883,3885,3887,3889,3891,3893,3895,3897,3899,3901,3903,3905],{"class":136,"line":3882},92,[134,3884,283],{"class":154},[134,3886,2411],{"class":158},[134,3888,163],{"class":162},[134,3890,684],{"class":158},[134,3892,687],{"class":162},[134,3894,690],{"class":451},[134,3896,203],{"class":158},[134,3898,246],{"class":162},[134,3900,2719],{"class":206},[134,3902,246],{"class":162},[134,3904,848],{"class":162},[134,3906,230],{"class":162},[134,3908,3910,3912,3914,3916,3918,3920,3922,3924,3926,3928,3930],{"class":136,"line":3909},93,[134,3911,2437],{"class":190},[134,3913,194],{"class":162},[134,3915,2442],{"class":158},[134,3917,246],{"class":162},[134,3919,2447],{"class":206},[134,3921,246],{"class":162},[134,3923,848],{"class":162},[134,3925,246],{"class":162},[134,3927,2456],{"class":206},[134,3929,246],{"class":162},[134,3931,2461],{"class":158},[134,3933,3935,3937,3939],{"class":136,"line":3934},94,[134,3936,859],{"class":162},[134,3938,209],{"class":158},[134,3940,419],{"class":162},[134,3942,3944],{"class":136,"line":3943},95,[134,3945,141],{"emptyLinePlaceholder":140},[134,3947,3949,3951,3953,3955,3957,3959,3961,3963,3965],{"class":136,"line":3948},96,[134,3950,2478],{"class":158},[134,3952,687],{"class":162},[134,3954,717],{"class":451},[134,3956,203],{"class":158},[134,3958,203],{"class":162},[134,3960,1639],{"class":724},[134,3962,209],{"class":162},[134,3964,730],{"class":154},[134,3966,230],{"class":162},[134,3968,3970,3972,3974,3976,3978,3980,3982,3984,3986,3988,3990,3992,3994,3996,3998,4000,4002,4004,4006,4008,4010,4012,4014,4016,4018,4020,4022,4024,4026,4028,4030],{"class":136,"line":3969},97,[134,3971,738],{"class":154},[134,3973,2501],{"class":158},[134,3975,291],{"class":162},[134,3977,2506],{"class":158},[134,3979,687],{"class":162},[134,3981,751],{"class":451},[134,3983,203],{"class":190},[134,3985,246],{"class":162},[134,3987,216],{"class":206},[134,3989,246],{"class":162},[134,3991,209],{"class":190},[134,3993,687],{"class":162},[134,3995,766],{"class":451},[134,3997,203],{"class":190},[134,3999,771],{"class":162},[134,4001,775],{"class":774},[134,4003,778],{"class":190},[134,4005,781],{"class":774},[134,4007,784],{"class":190},[134,4009,687],{"class":162},[134,4011,2541],{"class":451},[134,4013,203],{"class":190},[134,4015,246],{"class":162},[134,4017,2548],{"class":206},[134,4019,246],{"class":162},[134,4021,848],{"class":162},[134,4023,241],{"class":162},[134,4025,2557],{"class":206},[134,4027,246],{"class":162},[134,4029,209],{"class":190},[134,4031,419],{"class":162},[134,4033,4035,4037,4039,4041,4043,4045],{"class":136,"line":4034},98,[134,4036,797],{"class":158},[134,4038,687],{"class":162},[134,4040,802],{"class":158},[134,4042,687],{"class":162},[134,4044,807],{"class":451},[134,4046,810],{"class":190},[134,4048,4050,4052,4054,4056],{"class":136,"line":4049},99,[134,4051,816],{"class":162},[134,4053,819],{"class":451},[134,4055,203],{"class":190},[134,4057,824],{"class":162},[134,4059,4061,4063,4065,4067,4069,4071,4073,4075,4077,4079,4081,4083,4085,4087,4089,4091,4093,4095],{"class":136,"line":4060},100,[134,4062,830],{"class":190},[134,4064,194],{"class":162},[134,4066,835],{"class":162},[134,4068,483],{"class":158},[134,4070,687],{"class":162},[134,4072,842],{"class":451},[134,4074,845],{"class":158},[134,4076,848],{"class":162},[134,4078,241],{"class":162},[134,4080,52],{"class":206},[134,4082,246],{"class":162},[134,4084,209],{"class":158},[134,4086,859],{"class":162},[134,4088,216],{"class":206},[134,4090,864],{"class":162},[134,4092,82],{"class":158},[134,4094,870],{"class":162},[134,4096,219],{"class":162},[134,4098,4100,4102,4104,4106,4108,4110],{"class":136,"line":4099},101,[134,4101,878],{"class":190},[134,4103,194],{"class":162},[134,4105,246],{"class":162},[134,4107,885],{"class":206},[134,4109,246],{"class":162},[134,4111,219],{"class":162},[134,4113,4115,4117,4119,4121],{"class":136,"line":4114},102,[134,4116,895],{"class":190},[134,4118,194],{"class":162},[134,4120,2506],{"class":158},[134,4122,219],{"class":162},[134,4124,4126,4128,4130],{"class":136,"line":4125},103,[134,4127,907],{"class":190},[134,4129,194],{"class":162},[134,4131,913],{"class":912},[134,4133,4135,4137],{"class":136,"line":4134},104,[134,4136,919],{"class":162},[134,4138,922],{"class":190},[134,4140,4142],{"class":136,"line":4141},105,[134,4143,928],{"class":190},[134,4145,4147,4149,4151],{"class":136,"line":4146},106,[134,4148,859],{"class":162},[134,4150,209],{"class":158},[134,4152,419],{"class":162},[134,4154,4156],{"class":136,"line":4155},107,[134,4157,141],{"emptyLinePlaceholder":140},[134,4159,4161,4163,4165,4167],{"class":136,"line":4160},108,[134,4162,411],{"class":162},[134,4164,291],{"class":162},[134,4166,416],{"class":158},[134,4168,419],{"class":162},[4170,4171,4172],"style",{},"html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}",{"title":77,"searchDepth":151,"depth":151,"links":4174},[4175,4176,4182,4188],{"id":39,"depth":144,"text":40},{"id":63,"depth":144,"text":64,"children":4177},[4178,4179,4180,4181],{"id":98,"depth":151,"text":98},{"id":117,"depth":151,"text":117},{"id":422,"depth":151,"text":422},{"id":1259,"depth":151,"text":1259},{"id":1617,"depth":144,"text":1618,"children":4183},[4184,4185,4186,4187],{"id":1627,"depth":151,"text":1627},{"id":1843,"depth":151,"text":1843},{"id":1894,"depth":151,"text":1894},{"id":2775,"depth":151,"text":2775},{"id":2820,"depth":144,"text":2821},[4190],"devstack","2021-10-30","HTMLファイルの取り扱いとPUGを使い方","md",{},"\u002Fseries\u002Fwell-study-webpack-3",{"title":6,"description":4192},"well-study-webpack","ちゃんと理解するWebpack5。","series\u002Fwell-study-webpack-3",[3390,4201,82],"webpack","_mix\u002Flogo-on-white-bg-768x299.png",null,"EsG5Dg5_6qbSZmEa8Ezu5AMWNTpxDesebmF7q4Bkix4",{"id":4206,"title":18,"body":4207,"category":7745,"createdAt":7746,"description":7747,"extension":4193,"index":144,"meta":7748,"navigation":140,"path":7749,"publish":140,"seo":7750,"series":4197,"seriesTitle":4198,"stem":7751,"tag":7752,"thumbnail":4202,"updatedAt":4203,"__hash__":7753},"series\u002Fseries\u002Fwell-study-webpack-2.md",{"type":8,"value":4208,"toc":7724},[4209,4213,4219,4229,4232,4235,4238,4249,4255,4264,4296,4306,4371,4377,4586,4596,4599,4613,4623,4626,4630,4633,4639,4645,5220,5223,5226,5229,5368,5371,5378,5392,5395,5463,5472,5491,5497,5503,5509,5525,5528,5537,5576,5579,5591,5594,5597,5607,6098,6112,6115,6117,6120,6126,6129,6135,6138,6326,6329,6347,6351,6354,6360,6373,6657,6660,6666,6669,6672,6683,6782,6796,7253,7277,7279,7282,7290,7297,7300,7315,7321,7330,7334,7347,7506,7512,7583,7593,7694,7716,7718,7721],[1248,4210,4212],{"className":4211},[1251,1252],"\n2021年10月30日：修正事項があっため追記しました。\n",[11,4214,13,4215,4218],{},[15,4216,4217],{"href":46},"ちゃんと理解するWebpack5。１：webpack基礎とSass・jsのバンドル","の続きの記事です。前回はjsファイルのバンドル、scssのコンパイルを行いました。今回はそこから",[24,4220,4221,4223,4226],{},[27,4222,1259],{},[27,4224,4225],{},"babelを用いたトランスコンパイル",[27,4227,4228],{},"複数のバンドルファイルを出力",[11,4230,4231],{},"以上を解説したいと思います。これらができればひとまず意図通りのwebコンテンツが作れるようになります。コードは前回のものから発展させて使用します。それではまず画像パスの解決から行っていきます。",[37,4233,4234],{"id":4234},"webpackで画像を取り扱う",[96,4236,4237],{"id":4237},"画像が必要なシチュエーションを準備",[11,4239,4240,4241,4244,4245,4248],{},"sassでは背景画像などで画像のパスが必要となることがあります。",[50,4242,4243],{},"\u002Fsrc","に",[50,4246,4247],{},"imgs","ディレクトリを作成します。",[69,4250,4253],{"className":4251,"code":4252,"language":74},[72],".\n├── dist\n│   ├── bundle.js\n│   ├── index.html\n│   └── style.css\n├── package-lock.json\n├── package.json\n├── src\n│   ├── imgs    \u002F\u002F new!\n│   ├── js\n│   │   ├── functions.js\n│   │   └── main.js\n│   └── sass\n│       ├── compnent.scss\n│       ├── style.scss\n│       └── variable.scss\n├── node_modules\n└── webpack.config.js\n",[50,4254,4252],{"__ignoreMap":77},[11,4256,4257,4259,4260,4263],{},[50,4258,1287],{},"ディレクトリにに画像を配置していきます。適当な画像sample.jpgをおいておき、sassにも適当な",[50,4261,4262],{},"background-image","を設定します。",[69,4265,4270],{"className":4266,"code":4267,"filename":4268,"language":4269,"meta":77,"style":77},"language-sass shiki shiki-themes material-theme-ocean",".image-box{\n    width: 100px;\n    height: 100px;\n    background-image: url('~\u002Fimgs\u002Fsample.jpg');\n}\n","\u002Fsrc\u002Fsass\u002Fcomponent.scss","sass",[50,4271,4272,4277,4282,4287,4292],{"__ignoreMap":77},[134,4273,4274],{"class":136,"line":137},[134,4275,4276],{},".image-box{\n",[134,4278,4279],{"class":136,"line":144},[134,4280,4281],{},"    width: 100px;\n",[134,4283,4284],{"class":136,"line":151},[134,4285,4286],{},"    height: 100px;\n",[134,4288,4289],{"class":136,"line":169},[134,4290,4291],{},"    background-image: url('~\u002Fimgs\u002Fsample.jpg');\n",[134,4293,4294],{"class":136,"line":175},[134,4295,394],{},[11,4297,4298,4301,4302,4305],{},[50,4299,4300],{},"url('..\u002Fimgs\u002Fsample.jpg');","のような相対パスでなく",[50,4303,4304],{},"url('~\u002Fimgs\u002Fsample.jpg');","としたのは運用上のテクニックです。後でこの説明をしますので、ひとまずこんなパスにしておきます。まだ設定していませんが、試しにビルドしてみます。",[69,4307,4312],{"className":4308,"code":4309,"filename":4310,"language":4311,"meta":77,"style":77},"language-css shiki shiki-themes material-theme-ocean",".image-box {\n  width: 100px;\n  height: 100px;\n  background-image: url(\"~\u002Fimgs\u002Fsample.jpg\"); }\n","dist\u002Fstyle.css","css",[50,4313,4314,4324,4337,4348],{"__ignoreMap":77},[134,4315,4316,4318,4322],{"class":136,"line":137},[134,4317,687],{"class":162},[134,4319,4321],{"class":4320},"s5Dmg","image-box",[134,4323,230],{"class":162},[134,4325,4326,4330,4332,4335],{"class":136,"line":144},[134,4327,4329],{"class":4328},"s6YsC","  width",[134,4331,194],{"class":162},[134,4333,4334],{"class":774}," 100px",[134,4336,419],{"class":162},[134,4338,4339,4342,4344,4346],{"class":136,"line":151},[134,4340,4341],{"class":4328},"  height",[134,4343,194],{"class":162},[134,4345,4334],{"class":774},[134,4347,419],{"class":162},[134,4349,4350,4353,4355,4357,4359,4361,4364,4366,4369],{"class":136,"line":169},[134,4351,4352],{"class":4328},"  background-image",[134,4354,194],{"class":162},[134,4356,3043],{"class":451},[134,4358,203],{"class":162},[134,4360,327],{"class":162},[134,4362,4363],{"class":206},"~\u002Fimgs\u002Fsample.jpg",[134,4365,327],{"class":162},[134,4367,4368],{"class":162},");",[134,4370,3050],{"class":162},[11,4372,4373,4376],{},[50,4374,4375],{},"component.scss","で定義した通りのURLとなりましたが、もちろん不正なので404となります。",[69,4378,4381],{"className":1271,"code":4379,"filename":4380,"language":82,"meta":77,"style":77},"    ...\n    \u003Cbody>\n        \u003Cmain>\n            \u003Cdiv id='app'>\n\n            \u003C\u002Fdiv>\n            \u003Cinput type=\"text\" value=\"\" id=\"inputs\">\n            \u003Cbutton id=\"submmit\" >追加する\u003C\u002Fbutton>\n            \u003Cdiv class='box'>\u003C\u002Fdiv>\n            \u003Cdiv class='image-box'>\u003C\u002Fdiv>\n        \u003C\u002Fmain>\n    \u003C\u002Fbody>\n    ...\n    \u003C!-- Failed to load resource: net::ERR_FILE_NOT_FOUND \u002F~\u002Fimgs\u002Fsample.jpg-->\n","\u002Fdist\u002Findex.html",[50,4382,4383,4388,4398,4408,4429,4433,4442,4481,4512,4537,4559,4568,4577,4581],{"__ignoreMap":77},[134,4384,4385],{"class":136,"line":137},[134,4386,4387],{"class":158},"    ...\n",[134,4389,4390,4393,4395],{"class":136,"line":144},[134,4391,4392],{"class":162},"    \u003C",[134,4394,885],{"class":190},[134,4396,4397],{"class":162},">\n",[134,4399,4400,4403,4406],{"class":136,"line":151},[134,4401,4402],{"class":162},"        \u003C",[134,4404,4405],{"class":190},"main",[134,4407,4397],{"class":162},[134,4409,4410,4413,4415,4418,4420,4422,4425,4427],{"class":136,"line":169},[134,4411,4412],{"class":162},"            \u003C",[134,4414,1248],{"class":190},[134,4416,4417],{"class":154}," id",[134,4419,163],{"class":162},[134,4421,246],{"class":162},[134,4423,4424],{"class":206},"app",[134,4426,246],{"class":162},[134,4428,4397],{"class":162},[134,4430,4431],{"class":136,"line":175},[134,4432,141],{"emptyLinePlaceholder":140},[134,4434,4435,4438,4440],{"class":136,"line":181},[134,4436,4437],{"class":162},"            \u003C\u002F",[134,4439,1248],{"class":190},[134,4441,4397],{"class":162},[134,4443,4444,4446,4449,4452,4454,4456,4458,4460,4463,4465,4468,4470,4472,4474,4477,4479],{"class":136,"line":187},[134,4445,4412],{"class":162},[134,4447,4448],{"class":190},"input",[134,4450,4451],{"class":154}," type",[134,4453,163],{"class":162},[134,4455,327],{"class":162},[134,4457,74],{"class":206},[134,4459,327],{"class":162},[134,4461,4462],{"class":154}," value",[134,4464,163],{"class":162},[134,4466,4467],{"class":162},"\"\"",[134,4469,4417],{"class":154},[134,4471,163],{"class":162},[134,4473,327],{"class":162},[134,4475,4476],{"class":206},"inputs",[134,4478,327],{"class":162},[134,4480,4397],{"class":162},[134,4482,4483,4485,4488,4490,4492,4494,4497,4499,4502,4505,4508,4510],{"class":136,"line":222},[134,4484,4412],{"class":162},[134,4486,4487],{"class":190},"button",[134,4489,4417],{"class":154},[134,4491,163],{"class":162},[134,4493,327],{"class":162},[134,4495,4496],{"class":206},"submmit",[134,4498,327],{"class":162},[134,4500,4501],{"class":162}," >",[134,4503,4504],{"class":158},"追加する",[134,4506,4507],{"class":162},"\u003C\u002F",[134,4509,4487],{"class":190},[134,4511,4397],{"class":162},[134,4513,4514,4516,4518,4521,4523,4525,4528,4530,4533,4535],{"class":136,"line":233},[134,4515,4412],{"class":162},[134,4517,1248],{"class":190},[134,4519,4520],{"class":154}," class",[134,4522,163],{"class":162},[134,4524,246],{"class":162},[134,4526,4527],{"class":206},"box",[134,4529,246],{"class":162},[134,4531,4532],{"class":162},">\u003C\u002F",[134,4534,1248],{"class":190},[134,4536,4397],{"class":162},[134,4538,4539,4541,4543,4545,4547,4549,4551,4553,4555,4557],{"class":136,"line":251},[134,4540,4412],{"class":162},[134,4542,1248],{"class":190},[134,4544,4520],{"class":154},[134,4546,163],{"class":162},[134,4548,246],{"class":162},[134,4550,4321],{"class":206},[134,4552,246],{"class":162},[134,4554,4532],{"class":162},[134,4556,1248],{"class":190},[134,4558,4397],{"class":162},[134,4560,4561,4564,4566],{"class":136,"line":257},[134,4562,4563],{"class":162},"        \u003C\u002F",[134,4565,4405],{"class":190},[134,4567,4397],{"class":162},[134,4569,4570,4573,4575],{"class":136,"line":263},[134,4571,4572],{"class":162},"    \u003C\u002F",[134,4574,885],{"class":190},[134,4576,4397],{"class":162},[134,4578,4579],{"class":136,"line":269},[134,4580,4387],{"class":158},[134,4582,4583],{"class":136,"line":275},[134,4584,4585],{"class":147},"    \u003C!-- Failed to load resource: net::ERR_FILE_NOT_FOUND \u002F~\u002Fimgs\u002Fsample.jpg-->\n",[11,4587,4588,4589,4592,4593,4595],{},"相対リンクでやってもdist配下ににimgsディレクトリと画像そのものがないので、404となります。そのためwebpackを用いて",[50,4590,4591],{},"\u002Fsrc\u002Fimgs","と配下の画像をdistに移動し、",[50,4594,4304],{},"のようなパスを変換させてあげる必要があります。",[96,4597,4598],{"id":4598},"webpack4と5の違い",[11,4600,4601,4602,4605,4606,4605,4609,4612],{},"webpack4では画像の処理に",[50,4603,4604],{},"url-loader","、",[50,4607,4608],{},"raw-loader",[50,4610,4611],{},"file-loader","を使用していましたが、webpack5ではすでにwebpackに搭載されているAsset Modulesで行います。ただバージョン4の書き方もまだ主流なので、今回は4と5の方法を紹介し、最終的には5の方法で実装しようと思います。",[11,4614,4615,4616,4618,4619,4622],{},"なお、目指す形としては",[50,4617,3790],{},"配下に",[50,4620,4621],{},"\u002Fimgs","というディレクトリが作られ、そこに配下の画像が移動され、sassの画像パスが正しくなっているように設定します。",[96,4624,4625],{"id":4625},"webpack4の設定でやってみる",[4627,4628,4629],"h4",{"id":4629},"loaderをインストールとconfigの記述を変更",[11,4631,4632],{},"それでは従来の方法での説明をまずは行います。最初に必要なloaderをインストールします。",[69,4634,4637],{"className":4635,"code":4636,"language":74},[72],"npm i -D url-loader file-loader\n",[50,4638,4636],{"__ignoreMap":77},[11,4640,4641,4642,4644],{},"この2つを用いてパスの解決とファイルの移動を行うことができます。そして",[50,4643,129],{},"を以下のように変更します。",[69,4646,4648],{"className":127,"code":4647,"filename":129,"language":130,"meta":77,"style":77},"const MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst path = require('path'); \u002F\u002F 追加\nmodule.exports = {\n    \u002F\u002Fバンドル対象のファイル\n    entry: .\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: [\n            {\n                test: \u002F\\.(sa|sc|c)ss$\u002F,\n                exclude: \u002Fnode_modules\u002F,\n                use: [\n                    MiniCssExtractPlugin.loader,\n                    {\n                        loader: 'css-loader',\n                        options: { url: true }　\u002F\u002F trueに変更\n                    },\n                    'sass-loader',\n                ]\n            },\n            {   \u002F\u002F追加\n                test: \u002F\\.(png|jpg|gif)$\u002Fi,\n                use: [\n                  {\n                    loader: 'url-loader',\n                    options: {\n                      limit: 8192,\n                      name:'.\u002Fimgs\u002F[name].[ext]'\n                    }\n                  },\n                ],\n               type: 'javascript\u002Fauto' \u002F\u002F 大切\n            },\n        ],\n    },\n    resolve:{　\u002F\u002F追加\n        alias: {\n          '~': path.resolve(__dirname, 'src')\n        }\n    },\n    \u002F\u002F ファイルの出力設定\n    output: {\n        \u002F\u002F  出力ファイルのディレクトリ名\n        path: `${__dirname}\u002Fdist`,\n        \u002F\u002F 出力ファイル名\n        filename: \"bundle.js\"\n    },\n    plugins: [\n        new MiniCssExtractPlugin({\n            filename: 'style.css'\n        })\n    ]\n};\n",[50,4649,4650,4672,4698,4706,4711,4738,4742,4755,4759,4767,4775,4779,4812,4827,4836,4847,4852,4867,4888,4893,4904,4909,4913,4921,4953,4961,4966,4981,4990,5002,5016,5021,5026,5033,5050,5054,5060,5064,5074,5082,5110,5114,5118,5122,5130,5134,5152,5157,5171,5175,5183,5193,5206,5212,5216],{"__ignoreMap":77},[134,4651,4652,4654,4656,4658,4660,4662,4664,4666,4668,4670],{"class":136,"line":137},[134,4653,283],{"class":154},[134,4655,446],{"class":158},[134,4657,163],{"class":162},[134,4659,452],{"class":451},[134,4661,203],{"class":158},[134,4663,246],{"class":162},[134,4665,459],{"class":206},[134,4667,246],{"class":162},[134,4669,209],{"class":158},[134,4671,419],{"class":162},[134,4673,4674,4676,4678,4680,4682,4684,4686,4688,4690,4692,4695],{"class":136,"line":144},[134,4675,283],{"class":154},[134,4677,472],{"class":158},[134,4679,163],{"class":162},[134,4681,452],{"class":451},[134,4683,203],{"class":158},[134,4685,246],{"class":162},[134,4687,483],{"class":206},[134,4689,246],{"class":162},[134,4691,209],{"class":158},[134,4693,4694],{"class":162},";",[134,4696,4697],{"class":147}," \u002F\u002F 追加\n",[134,4699,4700,4702,4704],{"class":136,"line":151},[134,4701,411],{"class":162},[134,4703,291],{"class":162},[134,4705,230],{"class":162},[134,4707,4708],{"class":136,"line":169},[134,4709,4710],{"class":147},"    \u002F\u002Fバンドル対象のファイル\n",[134,4712,4713,4715,4717,4720,4722,4724,4726,4728,4730,4732,4734,4736],{"class":136,"line":175},[134,4714,299],{"class":190},[134,4716,194],{"class":162},[134,4718,4719],{"class":162}," .\u002F",[134,4721,56],{"class":158},[134,4723,216],{"class":162},[134,4725,3390],{"class":158},[134,4727,216],{"class":162},[134,4729,4405],{"class":158},[134,4731,687],{"class":162},[134,4733,3390],{"class":158},[134,4735,246],{"class":162},[134,4737,219],{"class":206},[134,4739,4740],{"class":136,"line":181},[134,4741,316],{"class":158},[134,4743,4744,4747,4749,4751,4753],{"class":136,"line":187},[134,4745,4746],{"class":158},"    mode:",[134,4748,327],{"class":162},[134,4750,330],{"class":206},[134,4752,327],{"class":162},[134,4754,219],{"class":162},[134,4756,4757],{"class":136,"line":222},[134,4758,340],{"class":158},[134,4760,4761,4763,4765],{"class":136,"line":233},[134,4762,346],{"class":190},[134,4764,194],{"class":162},[134,4766,230],{"class":162},[134,4768,4769,4771,4773],{"class":136,"line":251},[134,4770,356],{"class":190},[134,4772,194],{"class":162},[134,4774,166],{"class":158},[134,4776,4777],{"class":136,"line":257},[134,4778,3014],{"class":162},[134,4780,4781,4784,4786,4788,4790,4792,4794,4796,4798,4800,4802,4804,4806,4808,4810],{"class":136,"line":263},[134,4782,4783],{"class":190},"                test",[134,4785,194],{"class":162},[134,4787,197],{"class":162},[134,4789,200],{"class":158},[134,4791,203],{"class":162},[134,4793,2953],{"class":206},[134,4795,2956],{"class":162},[134,4797,2959],{"class":206},[134,4799,2956],{"class":162},[134,4801,2964],{"class":206},[134,4803,209],{"class":162},[134,4805,2969],{"class":206},[134,4807,213],{"class":212},[134,4809,216],{"class":162},[134,4811,219],{"class":162},[134,4813,4814,4817,4819,4821,4823,4825],{"class":136,"line":269},[134,4815,4816],{"class":190},"                exclude",[134,4818,194],{"class":162},[134,4820,197],{"class":162},[134,4822,1979],{"class":206},[134,4824,216],{"class":162},[134,4826,219],{"class":162},[134,4828,4829,4832,4834],{"class":136,"line":275},[134,4830,4831],{"class":190},"                use",[134,4833,194],{"class":162},[134,4835,166],{"class":158},[134,4837,4838,4841,4843,4845],{"class":136,"line":280},[134,4839,4840],{"class":158},"                    MiniCssExtractPlugin",[134,4842,687],{"class":162},[134,4844,3007],{"class":158},[134,4846,219],{"class":162},[134,4848,4849],{"class":136,"line":296},[134,4850,4851],{"class":162},"                    {\n",[134,4853,4854,4857,4859,4861,4863,4865],{"class":136,"line":313},[134,4855,4856],{"class":190},"                        loader",[134,4858,194],{"class":162},[134,4860,241],{"class":162},[134,4862,3026],{"class":206},[134,4864,246],{"class":162},[134,4866,219],{"class":162},[134,4868,4869,4872,4874,4876,4878,4880,4882,4885],{"class":136,"line":319},[134,4870,4871],{"class":190},"                        options",[134,4873,194],{"class":162},[134,4875,3040],{"class":162},[134,4877,3043],{"class":190},[134,4879,194],{"class":162},[134,4881,2030],{"class":912},[134,4883,4884],{"class":162}," }",[134,4886,4887],{"class":147},"　\u002F\u002F trueに変更\n",[134,4889,4890],{"class":136,"line":337},[134,4891,4892],{"class":162},"                    },\n",[134,4894,4895,4898,4900,4902],{"class":136,"line":343},[134,4896,4897],{"class":162},"                    '",[134,4899,3062],{"class":206},[134,4901,246],{"class":162},[134,4903,219],{"class":162},[134,4905,4906],{"class":136,"line":353},[134,4907,4908],{"class":158},"                ]\n",[134,4910,4911],{"class":136,"line":364},[134,4912,3055],{"class":162},[134,4914,4915,4918],{"class":136,"line":369},[134,4916,4917],{"class":162},"            {",[134,4919,4920],{"class":147},"   \u002F\u002F追加\n",[134,4922,4923,4925,4927,4929,4931,4933,4935,4937,4939,4941,4943,4945,4947,4949,4951],{"class":136,"line":374},[134,4924,4783],{"class":190},[134,4926,194],{"class":162},[134,4928,197],{"class":162},[134,4930,200],{"class":158},[134,4932,203],{"class":162},[134,4934,3096],{"class":206},[134,4936,2956],{"class":162},[134,4938,3101],{"class":206},[134,4940,2956],{"class":162},[134,4942,3106],{"class":206},[134,4944,209],{"class":162},[134,4946,213],{"class":212},[134,4948,216],{"class":162},[134,4950,3120],{"class":774},[134,4952,219],{"class":162},[134,4954,4955,4957,4959],{"class":136,"line":386},[134,4956,4831],{"class":190},[134,4958,194],{"class":162},[134,4960,166],{"class":158},[134,4962,4963],{"class":136,"line":391},[134,4964,4965],{"class":162},"                  {\n",[134,4967,4968,4971,4973,4975,4977,4979],{"class":136,"line":397},[134,4969,4970],{"class":190},"                    loader",[134,4972,194],{"class":162},[134,4974,241],{"class":162},[134,4976,4604],{"class":206},[134,4978,246],{"class":162},[134,4980,219],{"class":162},[134,4982,4983,4986,4988],{"class":136,"line":403},[134,4984,4985],{"class":190},"                    options",[134,4987,194],{"class":162},[134,4989,230],{"class":162},[134,4991,4992,4995,4997,5000],{"class":136,"line":408},[134,4993,4994],{"class":190},"                      limit",[134,4996,194],{"class":162},[134,4998,4999],{"class":774}," 8192",[134,5001,219],{"class":162},[134,5003,5004,5007,5009,5011,5014],{"class":136,"line":735},[134,5005,5006],{"class":190},"                      name",[134,5008,194],{"class":162},[134,5010,246],{"class":162},[134,5012,5013],{"class":206},".\u002Fimgs\u002F[name].[ext]",[134,5015,3146],{"class":162},[134,5017,5018],{"class":136,"line":789},[134,5019,5020],{"class":162},"                    }\n",[134,5022,5023],{"class":136,"line":794},[134,5024,5025],{"class":162},"                  },\n",[134,5027,5028,5031],{"class":136,"line":813},[134,5029,5030],{"class":158},"                ]",[134,5032,219],{"class":162},[134,5034,5035,5038,5040,5042,5045,5047],{"class":136,"line":827},[134,5036,5037],{"class":190},"               type",[134,5039,194],{"class":162},[134,5041,241],{"class":162},[134,5043,5044],{"class":206},"javascript\u002Fauto",[134,5046,246],{"class":162},[134,5048,5049],{"class":147}," \u002F\u002F 大切\n",[134,5051,5052],{"class":136,"line":875},[134,5053,3055],{"class":162},[134,5055,5056,5058],{"class":136,"line":892},[134,5057,3071],{"class":158},[134,5059,219],{"class":162},[134,5061,5062],{"class":136,"line":904},[134,5063,260],{"class":162},[134,5065,5066,5068,5071],{"class":136,"line":916},[134,5067,1402],{"class":190},[134,5069,5070],{"class":162},":{",[134,5072,5073],{"class":147},"　\u002F\u002F追加\n",[134,5075,5076,5078,5080],{"class":136,"line":925},[134,5077,1458],{"class":190},[134,5079,194],{"class":162},[134,5081,230],{"class":162},[134,5083,5084,5086,5088,5090,5092,5094,5096,5098,5100,5102,5104,5106,5108],{"class":136,"line":931},[134,5085,3687],{"class":162},[134,5087,1470],{"class":190},[134,5089,246],{"class":162},[134,5091,194],{"class":162},[134,5093,1477],{"class":158},[134,5095,687],{"class":162},[134,5097,842],{"class":451},[134,5099,845],{"class":158},[134,5101,848],{"class":162},[134,5103,241],{"class":162},[134,5105,56],{"class":206},[134,5107,246],{"class":162},[134,5109,922],{"class":158},[134,5111,5112],{"class":136,"line":940},[134,5113,254],{"class":162},[134,5115,5116],{"class":136,"line":945},[134,5117,260],{"class":162},[134,5119,5120],{"class":136,"line":2682},[134,5121,3756],{"class":147},[134,5123,5124,5126,5128],{"class":136,"line":3324},[134,5125,3762],{"class":190},[134,5127,194],{"class":162},[134,5129,230],{"class":162},[134,5131,5132],{"class":136,"line":3329},[134,5133,3772],{"class":147},[134,5135,5136,5138,5140,5142,5144,5146,5148,5150],{"class":136,"line":3334},[134,5137,3778],{"class":190},[134,5139,194],{"class":162},[134,5141,835],{"class":162},[134,5143,3785],{"class":158},[134,5145,859],{"class":162},[134,5147,3790],{"class":206},[134,5149,3793],{"class":162},[134,5151,219],{"class":162},[134,5153,5154],{"class":136,"line":3355},[134,5155,5156],{"class":147},"        \u002F\u002F 出力ファイル名\n",[134,5158,5159,5161,5163,5165,5168],{"class":136,"line":3366},[134,5160,830],{"class":190},[134,5162,194],{"class":162},[134,5164,1526],{"class":162},[134,5166,5167],{"class":206},"bundle.js",[134,5169,5170],{"class":162},"\"\n",[134,5172,5173],{"class":136,"line":3372},[134,5174,260],{"class":162},[134,5176,5177,5179,5181],{"class":136,"line":3399},[134,5178,3821],{"class":190},[134,5180,194],{"class":162},[134,5182,166],{"class":158},[134,5184,5185,5187,5189,5191],{"class":136,"line":3422},[134,5186,3831],{"class":162},[134,5188,3834],{"class":451},[134,5190,203],{"class":158},[134,5192,824],{"class":162},[134,5194,5195,5197,5199,5201,5204],{"class":136,"line":3432},[134,5196,3136],{"class":190},[134,5198,194],{"class":162},[134,5200,241],{"class":162},[134,5202,5203],{"class":206},"style.css",[134,5205,3146],{"class":162},[134,5207,5208,5210],{"class":136,"line":3449},[134,5209,3858],{"class":162},[134,5211,922],{"class":158},[134,5213,5214],{"class":136,"line":3459},[134,5215,3868],{"class":158},[134,5217,5218],{"class":136,"line":3478},[134,5219,3874],{"class":162},[11,5221,5222],{},"それでは細かい説明をします。",[4627,5224,5225],{"id":5225},"file-loaderの設定",[11,5227,5228],{},"file-loaderではjpg,png,gifの拡張子を見つけた時の処理を記述します。",[69,5230,5232],{"className":127,"code":5231,"filename":129,"language":130,"meta":77,"style":77},"{\n    test: \u002F\\.(png|jpg|gif)$\u002Fi,\n    use: [\n        {\n        loader: 'url-loader',\n        options: {\n            limit: 8192,\n            name:'.\u002Fimgs\u002F[name].[ext]'\n        }\n        },\n    ],\n    type: 'javascript\u002Fauto' \u002F\u002F大切\n},\n",[50,5233,5234,5238,5271,5280,5284,5299,5308,5319,5332,5336,5340,5347,5363],{"__ignoreMap":77},[134,5235,5236],{"class":136,"line":137},[134,5237,824],{"class":162},[134,5239,5240,5243,5245,5247,5249,5251,5253,5255,5257,5259,5261,5263,5265,5267,5269],{"class":136,"line":144},[134,5241,5242],{"class":4320},"    test",[134,5244,194],{"class":162},[134,5246,197],{"class":162},[134,5248,200],{"class":158},[134,5250,203],{"class":162},[134,5252,3096],{"class":206},[134,5254,2956],{"class":162},[134,5256,3101],{"class":206},[134,5258,2956],{"class":162},[134,5260,3106],{"class":206},[134,5262,209],{"class":162},[134,5264,213],{"class":212},[134,5266,216],{"class":162},[134,5268,3120],{"class":774},[134,5270,219],{"class":162},[134,5272,5273,5276,5278],{"class":136,"line":151},[134,5274,5275],{"class":4320},"    use",[134,5277,194],{"class":162},[134,5279,166],{"class":190},[134,5281,5282],{"class":136,"line":169},[134,5283,3369],{"class":162},[134,5285,5286,5289,5291,5293,5295,5297],{"class":136,"line":175},[134,5287,5288],{"class":190},"        loader",[134,5290,194],{"class":162},[134,5292,241],{"class":162},[134,5294,4604],{"class":206},[134,5296,246],{"class":162},[134,5298,219],{"class":162},[134,5300,5301,5304,5306],{"class":136,"line":181},[134,5302,5303],{"class":190},"        options",[134,5305,194],{"class":162},[134,5307,230],{"class":162},[134,5309,5310,5313,5315,5317],{"class":136,"line":187},[134,5311,5312],{"class":190},"            limit",[134,5314,194],{"class":162},[134,5316,4999],{"class":774},[134,5318,219],{"class":162},[134,5320,5321,5324,5326,5328,5330],{"class":136,"line":222},[134,5322,5323],{"class":190},"            name",[134,5325,194],{"class":162},[134,5327,246],{"class":162},[134,5329,5013],{"class":206},[134,5331,3146],{"class":162},[134,5333,5334],{"class":136,"line":233},[134,5335,254],{"class":162},[134,5337,5338],{"class":136,"line":251},[134,5339,1500],{"class":162},[134,5341,5342,5345],{"class":136,"line":257},[134,5343,5344],{"class":190},"    ]",[134,5346,219],{"class":162},[134,5348,5349,5352,5354,5356,5358,5360],{"class":136,"line":263},[134,5350,5351],{"class":4320},"    type",[134,5353,194],{"class":162},[134,5355,241],{"class":162},[134,5357,5044],{"class":206},[134,5359,246],{"class":162},[134,5361,5362],{"class":147}," \u002F\u002F大切\n",[134,5364,5365],{"class":136,"line":269},[134,5366,5367],{"class":162},"},\n",[11,5369,5370],{},"loaderにはurl-loaderを指定してファイルをURIに変換できるようにします。",[11,5372,5373,5374,5377],{},"distでは画像はimgsディレクトリ配下に格納させますので、",[50,5375,5376],{},"name:'.\u002Fimgs\u002F[name].[ext]'","としておきます。sass,jsの画像ファイルの参照もこのディレクトリ構成にあったパスに変更してくれます。",[11,5379,5380,5381,5384,5385,5391],{},"webpack5で従来の方法を使う場合、",[50,5382,5383],{},"type: 'javascript\u002Fauto'","を忘れないようにしてください。",[15,5386,5390],{"href":5387,"rel":5388},"https:\u002F\u002Fwebpack.js.org\u002Fguides\u002Fasset-modules\u002F",[5389],"nofollow","公式ドキュメントの記述はこちら。"," webpack5にはAsset Moduleというものがすでにあり、それがfile-loader達と似たような働きを行います。もし先ほどの記述がないと二重で処理が入るなどがしておかしくなります。",[4627,5393,5394],{"id":5394},"エイリアスの設定",[69,5396,5398],{"className":127,"code":5397,"filename":129,"language":130,"meta":77,"style":77},"{\n    resolve:{　\u002F\u002F追加\n        alias: {\n          '~': path.resolve(__dirname, 'src')\n        }\n    },\n},\n",[50,5399,5400,5404,5412,5420,5451,5455,5459],{"__ignoreMap":77},[134,5401,5402],{"class":136,"line":137},[134,5403,824],{"class":162},[134,5405,5406,5408,5410],{"class":136,"line":144},[134,5407,1402],{"class":4320},[134,5409,5070],{"class":162},[134,5411,5073],{"class":147},[134,5413,5414,5416,5418],{"class":136,"line":151},[134,5415,1458],{"class":4320},[134,5417,194],{"class":162},[134,5419,230],{"class":162},[134,5421,5422,5424,5426,5428,5431,5433,5435,5437,5439,5441,5443,5445,5447,5449],{"class":136,"line":169},[134,5423,3687],{"class":162},[134,5425,1470],{"class":206},[134,5427,246],{"class":162},[134,5429,5430],{"class":190},": ",[134,5432,483],{"class":158},[134,5434,687],{"class":162},[134,5436,842],{"class":451},[134,5438,203],{"class":190},[134,5440,3785],{"class":158},[134,5442,848],{"class":162},[134,5444,241],{"class":162},[134,5446,56],{"class":206},[134,5448,246],{"class":162},[134,5450,922],{"class":190},[134,5452,5453],{"class":136,"line":175},[134,5454,254],{"class":162},[134,5456,5457],{"class":136,"line":181},[134,5458,260],{"class":162},[134,5460,5461],{"class":136,"line":187},[134,5462,5367],{"class":162},[11,5464,5465,5467,5468,5471],{},[50,5466,842],{},"ではwebpackがデフォルトで持っている、名前解決に新しい設定を追加したり、変更することができます。ここでは先ほど",[50,5469,5470],{},"~\u002Fimg\u002Ftest.png","みたいな書き方をしたパスを正しいパスに変換する処理を書いています。",[11,5473,5474,5476,5477,5480,5481,5483,5484,5487,5488,5490],{},[50,5475,1470],{},"はエイリアスとして設定しました。",[50,5478,5479],{},"'~': path.resolve(__dirname, 'src')","とすることで、",[50,5482,1470],{},"を見つけたら",[50,5485,5486],{},"path.resolve(__dirname, 'src')","というに変換するんだなとwebpackが読み取ります。ちなみに",[50,5489,5486],{},"というのはこのファイル（今回のwebpack.config.js）が置かれているOS上のパスのことです。macのあるディレクトリで構築していると以下の様に変換されます。",[69,5492,5495],{"className":5493,"code":5494,"language":74},[72],"\u002FUsers\u002Fjun\u002FDesktop\u002Fmy_apps\u002Fwebpack_practice\u002Fsrc\n",[50,5496,5494],{"__ignoreMap":77},[11,5498,5499,5500,5502],{},"もう少しざっくり説明するとこの",[50,5501,56],{},"ディレクトリを指しています。",[69,5504,5507],{"className":5505,"code":5506,"language":74},[72],".\n├── dist\n│   ├── bundle.js\n│   ├── index.html\n│   └── style.css\n├── package-lock.json\n├── package.json\n├── src　           \u002F\u002F←ここ！！ = path.resolve(__dirname, 'src')\n│   ├── imgs \n│   ├── js\n│   │   ├── functions.js\n│   │   └── main.js\n│   └── sass\n│       ├── compnent.scss\n│       ├── style.scss\n│       └── variable.scss\n├── node_modules\n└── webpack.config.js\n",[50,5508,5506],{"__ignoreMap":77},[11,5510,5511,5512,5515,5516,5518,5519,5521,5522,5524],{},"つまり、sassで",[50,5513,5514],{},"~\u002Fimgs\u002Ftest.png","とすれば",[50,5517,1470],{},"を自動に変換して",[50,5520,56],{},"配下の",[50,5523,4247],{},"の画像にバインドされます。このように特定ディレクトリやそのパスを別名で呼ぶことをエイリアス（alias）といいます。",[11,5526,5527],{},"ではなぜエイリアスで呼ぶことがいいのでしょうか？それは階層が深くなるほど、相対パスの指定では苦労するからです。他にも相対パスで指定すると、imgsディレクトリの位置を変えたいとなった時に全ての相対パスを変更する必要があります。srcディレクトリをエイリアスにすることで、相対パスでしていなくても良くなります。画像を使いたい場合は",[69,5529,5531],{"className":4266,"code":5530,"language":4269,"meta":77,"style":77},"background-image('~\u002Fimgs\u002Ftest.png')\n",[50,5532,5533],{"__ignoreMap":77},[134,5534,5535],{"class":136,"line":137},[134,5536,5530],{},[69,5538,5540],{"className":127,"code":5539,"language":130,"meta":77,"style":77},"import img from '~\u002Fimgs\u002Ftest.png';\nconsole.log(img);\n",[50,5541,5542,5561],{"__ignoreMap":77},[134,5543,5544,5547,5550,5553,5555,5557,5559],{"class":136,"line":137},[134,5545,5546],{"class":212},"import",[134,5548,5549],{"class":158}," img ",[134,5551,5552],{"class":212},"from",[134,5554,241],{"class":162},[134,5556,5514],{"class":206},[134,5558,246],{"class":162},[134,5560,419],{"class":162},[134,5562,5563,5566,5568,5571,5574],{"class":136,"line":144},[134,5564,5565],{"class":158},"console",[134,5567,687],{"class":162},[134,5569,5570],{"class":451},"log",[134,5572,5573],{"class":158},"(img)",[134,5575,419],{"class":162},[11,5577,5578],{},"と指定すればよくなります。ディレクトリ構成の変更にも柔軟に対応できます。",[1248,5580,5583,5584,5586,5587,5590],{"className":5581},[1251,5582],"alert-success","\nエイリアスは干渉しなければいろいろ設定できます。今回は",[50,5585,56],{},"直下ですが、",[50,5588,5589],{},"src\u002Fimgs","を指す画像用エイリアスなんかも作成できます。プロジェクトに合わせて設定しましょう。\n",[11,5592,5593],{},"これで画像ファイルが利用できる様になります。次はwebpack5の方法でやってみましょう。",[96,5595,5596],{"id":5596},"webpack5でのやり方",[11,5598,5599,5600,848,5602,848,5604,5606],{},"webpack5の方法では結構簡単になりました。webpack4でインストールした",[50,5601,4608],{},[50,5603,4604],{},[50,5605,4611],{},"は必要ありません。",[69,5608,5610],{"className":127,"code":5609,"filename":129,"language":130,"meta":77,"style":77},"const MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst path = require('path');\nmodule.exports = {\n    \u002F\u002Fバンドル対象のファイル\n    entry: .\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: [\n            {\n                test: \u002F\\.(sa|sc|c)ss$\u002F,\n                exclude: \u002Fnode_modules\u002F,\n                use: [\n                    MiniCssExtractPlugin.loader,\n                    {\n                        loader: 'css-loader',\n                        options: { url: true }\n                    },\n                    'sass-loader',\n                ]\n            },\n            {\n                test: \u002F\\.(png|jpg|gif)$\u002Fi,\n                \u002F\u002F ここから変更。useがなくなり。typeが変更されている。\n                generator: {\n                    filename: 'imgs\u002F[name][ext][query]'\n                },\n                type: 'asset\u002Fresource'\n            },\n        ],\n    },\n    resolve:{\n        alias: {\n          '~': path.resolve(__dirname, 'src')\n        }\n    },\n    \u002F\u002F ファイルの出力設定\n    output: {\n        \u002F\u002F  出力ファイルのディレクトリ名\n        path: `${__dirname}\u002Fdist`,\n        \u002F\u002F 出力ファイル名\n        filename: \"bundle.js\"\n    },\n    plugins: [\n        new MiniCssExtractPlugin({\n            filename: 'style.css'\n        })\n    ]\n};\n",[50,5611,5612,5634,5656,5664,5668,5694,5698,5710,5714,5722,5730,5734,5766,5780,5788,5798,5802,5816,5832,5836,5846,5850,5854,5858,5890,5895,5904,5918,5923,5936,5940,5946,5950,5956,5964,5992,5996,6000,6004,6012,6016,6034,6038,6050,6054,6062,6072,6084,6090,6094],{"__ignoreMap":77},[134,5613,5614,5616,5618,5620,5622,5624,5626,5628,5630,5632],{"class":136,"line":137},[134,5615,283],{"class":154},[134,5617,446],{"class":158},[134,5619,163],{"class":162},[134,5621,452],{"class":451},[134,5623,203],{"class":158},[134,5625,246],{"class":162},[134,5627,459],{"class":206},[134,5629,246],{"class":162},[134,5631,209],{"class":158},[134,5633,419],{"class":162},[134,5635,5636,5638,5640,5642,5644,5646,5648,5650,5652,5654],{"class":136,"line":144},[134,5637,283],{"class":154},[134,5639,472],{"class":158},[134,5641,163],{"class":162},[134,5643,452],{"class":451},[134,5645,203],{"class":158},[134,5647,246],{"class":162},[134,5649,483],{"class":206},[134,5651,246],{"class":162},[134,5653,209],{"class":158},[134,5655,419],{"class":162},[134,5657,5658,5660,5662],{"class":136,"line":151},[134,5659,411],{"class":162},[134,5661,291],{"class":162},[134,5663,230],{"class":162},[134,5665,5666],{"class":136,"line":169},[134,5667,4710],{"class":147},[134,5669,5670,5672,5674,5676,5678,5680,5682,5684,5686,5688,5690,5692],{"class":136,"line":175},[134,5671,299],{"class":190},[134,5673,194],{"class":162},[134,5675,4719],{"class":162},[134,5677,56],{"class":158},[134,5679,216],{"class":162},[134,5681,3390],{"class":158},[134,5683,216],{"class":162},[134,5685,4405],{"class":158},[134,5687,687],{"class":162},[134,5689,3390],{"class":158},[134,5691,246],{"class":162},[134,5693,219],{"class":206},[134,5695,5696],{"class":136,"line":181},[134,5697,316],{"class":158},[134,5699,5700,5702,5704,5706,5708],{"class":136,"line":187},[134,5701,4746],{"class":158},[134,5703,327],{"class":162},[134,5705,330],{"class":206},[134,5707,327],{"class":162},[134,5709,219],{"class":162},[134,5711,5712],{"class":136,"line":222},[134,5713,340],{"class":158},[134,5715,5716,5718,5720],{"class":136,"line":233},[134,5717,346],{"class":190},[134,5719,194],{"class":162},[134,5721,230],{"class":162},[134,5723,5724,5726,5728],{"class":136,"line":251},[134,5725,356],{"class":190},[134,5727,194],{"class":162},[134,5729,166],{"class":158},[134,5731,5732],{"class":136,"line":257},[134,5733,3014],{"class":162},[134,5735,5736,5738,5740,5742,5744,5746,5748,5750,5752,5754,5756,5758,5760,5762,5764],{"class":136,"line":263},[134,5737,4783],{"class":190},[134,5739,194],{"class":162},[134,5741,197],{"class":162},[134,5743,200],{"class":158},[134,5745,203],{"class":162},[134,5747,2953],{"class":206},[134,5749,2956],{"class":162},[134,5751,2959],{"class":206},[134,5753,2956],{"class":162},[134,5755,2964],{"class":206},[134,5757,209],{"class":162},[134,5759,2969],{"class":206},[134,5761,213],{"class":212},[134,5763,216],{"class":162},[134,5765,219],{"class":162},[134,5767,5768,5770,5772,5774,5776,5778],{"class":136,"line":269},[134,5769,4816],{"class":190},[134,5771,194],{"class":162},[134,5773,197],{"class":162},[134,5775,1979],{"class":206},[134,5777,216],{"class":162},[134,5779,219],{"class":162},[134,5781,5782,5784,5786],{"class":136,"line":275},[134,5783,4831],{"class":190},[134,5785,194],{"class":162},[134,5787,166],{"class":158},[134,5789,5790,5792,5794,5796],{"class":136,"line":280},[134,5791,4840],{"class":158},[134,5793,687],{"class":162},[134,5795,3007],{"class":158},[134,5797,219],{"class":162},[134,5799,5800],{"class":136,"line":296},[134,5801,4851],{"class":162},[134,5803,5804,5806,5808,5810,5812,5814],{"class":136,"line":313},[134,5805,4856],{"class":190},[134,5807,194],{"class":162},[134,5809,241],{"class":162},[134,5811,3026],{"class":206},[134,5813,246],{"class":162},[134,5815,219],{"class":162},[134,5817,5818,5820,5822,5824,5826,5828,5830],{"class":136,"line":319},[134,5819,4871],{"class":190},[134,5821,194],{"class":162},[134,5823,3040],{"class":162},[134,5825,3043],{"class":190},[134,5827,194],{"class":162},[134,5829,2030],{"class":912},[134,5831,3050],{"class":162},[134,5833,5834],{"class":136,"line":337},[134,5835,4892],{"class":162},[134,5837,5838,5840,5842,5844],{"class":136,"line":343},[134,5839,4897],{"class":162},[134,5841,3062],{"class":206},[134,5843,246],{"class":162},[134,5845,219],{"class":162},[134,5847,5848],{"class":136,"line":353},[134,5849,4908],{"class":158},[134,5851,5852],{"class":136,"line":364},[134,5853,3055],{"class":162},[134,5855,5856],{"class":136,"line":369},[134,5857,3014],{"class":162},[134,5859,5860,5862,5864,5866,5868,5870,5872,5874,5876,5878,5880,5882,5884,5886,5888],{"class":136,"line":374},[134,5861,4783],{"class":190},[134,5863,194],{"class":162},[134,5865,197],{"class":162},[134,5867,200],{"class":158},[134,5869,203],{"class":162},[134,5871,3096],{"class":206},[134,5873,2956],{"class":162},[134,5875,3101],{"class":206},[134,5877,2956],{"class":162},[134,5879,3106],{"class":206},[134,5881,209],{"class":162},[134,5883,213],{"class":212},[134,5885,216],{"class":162},[134,5887,3120],{"class":774},[134,5889,219],{"class":162},[134,5891,5892],{"class":136,"line":386},[134,5893,5894],{"class":147},"                \u002F\u002F ここから変更。useがなくなり。typeが変更されている。\n",[134,5896,5897,5900,5902],{"class":136,"line":391},[134,5898,5899],{"class":190},"                generator",[134,5901,194],{"class":162},[134,5903,230],{"class":162},[134,5905,5906,5909,5911,5913,5916],{"class":136,"line":397},[134,5907,5908],{"class":190},"                    filename",[134,5910,194],{"class":162},[134,5912,241],{"class":162},[134,5914,5915],{"class":206},"imgs\u002F[name][ext][query]",[134,5917,3146],{"class":162},[134,5919,5920],{"class":136,"line":403},[134,5921,5922],{"class":162},"                },\n",[134,5924,5925,5928,5930,5932,5934],{"class":136,"line":408},[134,5926,5927],{"class":190},"                type",[134,5929,194],{"class":162},[134,5931,241],{"class":162},[134,5933,3162],{"class":206},[134,5935,3146],{"class":162},[134,5937,5938],{"class":136,"line":735},[134,5939,3055],{"class":162},[134,5941,5942,5944],{"class":136,"line":789},[134,5943,3071],{"class":158},[134,5945,219],{"class":162},[134,5947,5948],{"class":136,"line":794},[134,5949,260],{"class":162},[134,5951,5952,5954],{"class":136,"line":813},[134,5953,1402],{"class":190},[134,5955,1405],{"class":162},[134,5957,5958,5960,5962],{"class":136,"line":827},[134,5959,1458],{"class":190},[134,5961,194],{"class":162},[134,5963,230],{"class":162},[134,5965,5966,5968,5970,5972,5974,5976,5978,5980,5982,5984,5986,5988,5990],{"class":136,"line":875},[134,5967,3687],{"class":162},[134,5969,1470],{"class":190},[134,5971,246],{"class":162},[134,5973,194],{"class":162},[134,5975,1477],{"class":158},[134,5977,687],{"class":162},[134,5979,842],{"class":451},[134,5981,845],{"class":158},[134,5983,848],{"class":162},[134,5985,241],{"class":162},[134,5987,56],{"class":206},[134,5989,246],{"class":162},[134,5991,922],{"class":158},[134,5993,5994],{"class":136,"line":892},[134,5995,254],{"class":162},[134,5997,5998],{"class":136,"line":904},[134,5999,260],{"class":162},[134,6001,6002],{"class":136,"line":916},[134,6003,3756],{"class":147},[134,6005,6006,6008,6010],{"class":136,"line":925},[134,6007,3762],{"class":190},[134,6009,194],{"class":162},[134,6011,230],{"class":162},[134,6013,6014],{"class":136,"line":931},[134,6015,3772],{"class":147},[134,6017,6018,6020,6022,6024,6026,6028,6030,6032],{"class":136,"line":940},[134,6019,3778],{"class":190},[134,6021,194],{"class":162},[134,6023,835],{"class":162},[134,6025,3785],{"class":158},[134,6027,859],{"class":162},[134,6029,3790],{"class":206},[134,6031,3793],{"class":162},[134,6033,219],{"class":162},[134,6035,6036],{"class":136,"line":945},[134,6037,5156],{"class":147},[134,6039,6040,6042,6044,6046,6048],{"class":136,"line":2682},[134,6041,830],{"class":190},[134,6043,194],{"class":162},[134,6045,1526],{"class":162},[134,6047,5167],{"class":206},[134,6049,5170],{"class":162},[134,6051,6052],{"class":136,"line":3324},[134,6053,260],{"class":162},[134,6055,6056,6058,6060],{"class":136,"line":3329},[134,6057,3821],{"class":190},[134,6059,194],{"class":162},[134,6061,166],{"class":158},[134,6063,6064,6066,6068,6070],{"class":136,"line":3334},[134,6065,3831],{"class":162},[134,6067,3834],{"class":451},[134,6069,203],{"class":158},[134,6071,824],{"class":162},[134,6073,6074,6076,6078,6080,6082],{"class":136,"line":3355},[134,6075,3136],{"class":190},[134,6077,194],{"class":162},[134,6079,241],{"class":162},[134,6081,5203],{"class":206},[134,6083,3146],{"class":162},[134,6085,6086,6088],{"class":136,"line":3366},[134,6087,3858],{"class":162},[134,6089,922],{"class":158},[134,6091,6092],{"class":136,"line":3372},[134,6093,3868],{"class":158},[134,6095,6096],{"class":136,"line":3399},[134,6097,3874],{"class":162},[11,6099,6100,6101,6103,6104,6107,6108,6111],{},"変わった箇所はpng,jpg,gifの",[50,6102,123],{},"の設定です。4の設定ではloaderを使用するために",[50,6105,6106],{},"use","で設定しました。しかし5では",[50,6109,6110],{},"type: 'asset\u002Fresource'","を使用すること4で実装していた動きを実装できます。",[11,6113,6114],{},"エイリアスなどの設定は変わりません。webpackにおける画像ファイルの設定以上となります。",[37,6116,4225],{"id":4225},[11,6118,6119],{},"これらの設定があればひとまずsassとjsを用いた作成ができそうです。ですがwebエンジニアを悩ませるこれの対策をしなくてはいけません。",[6121,6122],"image-render",{":src":6123,":width":6124,":center":6125},"'_mix\u002FInternet-Explorer-Logo.png'","'300px'","true",[11,6127,6128],{},"Interner Explorer（以後IE）です。特にJSが影響を受けます。JSにはES5、ES6という2種類の記述方法があります。今回はその違いの説明は省きますが、ES6はES5より効率的な書き方ができます。しかしIEはES5の書き方しか受け付けず、ES6の書き方は構文エラーを起こして実行できないというクソ仕様です。",[11,6130,6131,6132,6134],{},"そのためES6のJSを使用するにはES5の記述に変換する必要があります。その変換をしてくれるのがBabelです。webpackには",[50,6133,3442],{},"というものがあるので、それを利用してバンドルと同時に変換（トランスコンパイル）を行いましょう。",[11,6136,6137],{},"試しにIEでは使用できないアロー関数と定数宣言を書いておきます。",[69,6139,6142],{"className":127,"code":6140,"filename":6141,"language":130,"meta":77,"style":77},"import $ from 'jquery';\nimport funcs from '.\u002Ffunctions';\nimport '~\u002Fsass\u002Fstyle.scss';\n\n$('#submmit').on('click',()=>{\n    return funcs.addNewText('#app','#inputs');\n})\n\nconst message = \"use in IE\";\n()=>{\n    console.log(message)\n}\n","main.js",[50,6143,6144,6162,6180,6193,6197,6234,6269,6275,6279,6297,6306,6322],{"__ignoreMap":77},[134,6145,6146,6148,6151,6153,6155,6158,6160],{"class":136,"line":137},[134,6147,5546],{"class":212},[134,6149,6150],{"class":158}," $ ",[134,6152,5552],{"class":212},[134,6154,241],{"class":162},[134,6156,6157],{"class":206},"jquery",[134,6159,246],{"class":162},[134,6161,419],{"class":162},[134,6163,6164,6166,6169,6171,6173,6176,6178],{"class":136,"line":144},[134,6165,5546],{"class":212},[134,6167,6168],{"class":158}," funcs ",[134,6170,5552],{"class":212},[134,6172,241],{"class":162},[134,6174,6175],{"class":206},".\u002Ffunctions",[134,6177,246],{"class":162},[134,6179,419],{"class":162},[134,6181,6182,6184,6186,6189,6191],{"class":136,"line":151},[134,6183,5546],{"class":212},[134,6185,241],{"class":162},[134,6187,6188],{"class":206},"~\u002Fsass\u002Fstyle.scss",[134,6190,246],{"class":162},[134,6192,419],{"class":162},[134,6194,6195],{"class":136,"line":169},[134,6196,141],{"emptyLinePlaceholder":140},[134,6198,6199,6201,6203,6205,6208,6210,6212,6214,6217,6219,6221,6224,6226,6229,6232],{"class":136,"line":175},[134,6200,213],{"class":451},[134,6202,203],{"class":158},[134,6204,246],{"class":162},[134,6206,6207],{"class":206},"#submmit",[134,6209,246],{"class":162},[134,6211,209],{"class":158},[134,6213,687],{"class":162},[134,6215,6216],{"class":451},"on",[134,6218,203],{"class":158},[134,6220,246],{"class":162},[134,6222,6223],{"class":206},"click",[134,6225,246],{"class":162},[134,6227,6228],{"class":162},",()",[134,6230,6231],{"class":154},"=>",[134,6233,824],{"class":162},[134,6235,6236,6239,6242,6244,6247,6249,6251,6254,6256,6258,6260,6263,6265,6267],{"class":136,"line":181},[134,6237,6238],{"class":212},"    return",[134,6240,6241],{"class":158}," funcs",[134,6243,687],{"class":162},[134,6245,6246],{"class":451},"addNewText",[134,6248,203],{"class":190},[134,6250,246],{"class":162},[134,6252,6253],{"class":206},"#app",[134,6255,246],{"class":162},[134,6257,848],{"class":162},[134,6259,246],{"class":162},[134,6261,6262],{"class":206},"#inputs",[134,6264,246],{"class":162},[134,6266,209],{"class":190},[134,6268,419],{"class":162},[134,6270,6271,6273],{"class":136,"line":187},[134,6272,859],{"class":162},[134,6274,922],{"class":158},[134,6276,6277],{"class":136,"line":222},[134,6278,141],{"emptyLinePlaceholder":140},[134,6280,6281,6283,6286,6288,6290,6293,6295],{"class":136,"line":233},[134,6282,283],{"class":154},[134,6284,6285],{"class":158}," message ",[134,6287,163],{"class":162},[134,6289,1526],{"class":162},[134,6291,6292],{"class":206},"use in IE",[134,6294,327],{"class":162},[134,6296,419],{"class":162},[134,6298,6299,6302,6304],{"class":136,"line":251},[134,6300,6301],{"class":162},"()",[134,6303,6231],{"class":154},[134,6305,824],{"class":162},[134,6307,6308,6311,6313,6315,6317,6320],{"class":136,"line":257},[134,6309,6310],{"class":158},"    console",[134,6312,687],{"class":162},[134,6314,5570],{"class":451},[134,6316,203],{"class":190},[134,6318,6319],{"class":158},"message",[134,6321,922],{"class":190},[134,6323,6324],{"class":136,"line":263},[134,6325,394],{"class":162},[11,6327,6328],{},"ちなみにbundle.jsは以下の通りに書かれていました。ES6の書き方がで出力されています。",[69,6330,6332],{"className":127,"code":6331,"filename":5167,"language":130,"meta":77,"style":77},"\u002F\u002F...\n\u002F\u002F const message = \\\"use in IE\\\";\\n()=>{\\n    console.log(message)\n\u002F\u002F...\n",[50,6333,6334,6338,6343],{"__ignoreMap":77},[134,6335,6336],{"class":136,"line":137},[134,6337,400],{"class":147},[134,6339,6340],{"class":136,"line":144},[134,6341,6342],{"class":147},"\u002F\u002F const message = \\\"use in IE\\\";\\n()=>{\\n    console.log(message)\n",[134,6344,6345],{"class":136,"line":151},[134,6346,400],{"class":147},[96,6348,6350],{"id":6349},"モジュールをインストールしjsのruleを設定","モジュールをインストールし、JSのruleを設定",[11,6352,6353],{},"まずはloaderをインストールします。",[69,6355,6358],{"className":6356,"code":6357,"language":74},[72],"npm install -D babel-loader @babel\u002Fcore @babel\u002Fpreset-env\n",[50,6359,6357],{"__ignoreMap":77},[11,6361,6362,6363,6368,6369,6372],{},"そして",[15,6364,6367],{"href":6365,"rel":6366},"https:\u002F\u002Fwebpack.js.org\u002Floaders\u002Fbabel-loader\u002F",[5389],"ドキュメントのまま","ですがJSファイルに対しての",[50,6370,6371],{},"rule","を追加し、babel-loaderを適用させる様にします。",[69,6374,6377],{"className":127,"code":6375,"filename":6376,"language":130,"meta":77,"style":77},"\u002F\u002F ...\nmodule: {\n    rules: [\n        \u002F\u002F 追加\n        {\n            test: \u002F\\.m?js$\u002F,\n            exclude: \u002F(node_modules|bower_components)\u002F,\n            use: {\n                loader: 'babel-loader',\n                options: {\n                    presets: ['@babel\u002Fpreset-env']\n                }\n            }\n        },\n        {\n            test: \u002F\\.(sa|sc|c)ss$\u002F,\n            exclude: \u002Fnode_modules\u002F,\n            use: [\n                MiniCssExtractPlugin.loader,\n                {\n                    loader: 'css-loader',\n                    options: { url: true }\n                },\n                'sass-loader',\n            ]\n        },\n        \u002F\u002F ...\n    ],\n},\n\u002F\u002F ...\n","webpack.comfig.js",[50,6378,6379,6384,6393,6401,6406,6410,6432,6450,6458,6472,6480,6497,6502,6506,6510,6514,6546,6560,6568,6579,6584,6598,6614,6618,6629,6634,6638,6643,6649,6653],{"__ignoreMap":77},[134,6380,6381],{"class":136,"line":137},[134,6382,6383],{"class":147},"\u002F\u002F ...\n",[134,6385,6386,6389,6391],{"class":136,"line":144},[134,6387,6388],{"class":4320},"module",[134,6390,194],{"class":162},[134,6392,230],{"class":162},[134,6394,6395,6397,6399],{"class":136,"line":151},[134,6396,377],{"class":4320},[134,6398,194],{"class":162},[134,6400,166],{"class":190},[134,6402,6403],{"class":136,"line":169},[134,6404,6405],{"class":147},"        \u002F\u002F 追加\n",[134,6407,6408],{"class":136,"line":175},[134,6409,3369],{"class":162},[134,6411,6412,6414,6416,6418,6420,6422,6424,6426,6428,6430],{"class":136,"line":181},[134,6413,3375],{"class":190},[134,6415,194],{"class":162},[134,6417,197],{"class":162},[134,6419,200],{"class":158},[134,6421,3384],{"class":206},[134,6423,3387],{"class":162},[134,6425,3390],{"class":206},[134,6427,213],{"class":212},[134,6429,216],{"class":162},[134,6431,219],{"class":162},[134,6433,6434,6436,6438,6440,6442,6444,6446,6448],{"class":136,"line":187},[134,6435,3402],{"class":190},[134,6437,194],{"class":162},[134,6439,3407],{"class":162},[134,6441,1979],{"class":206},[134,6443,2956],{"class":162},[134,6445,3414],{"class":206},[134,6447,3417],{"class":162},[134,6449,219],{"class":162},[134,6451,6452,6454,6456],{"class":136,"line":222},[134,6453,3425],{"class":190},[134,6455,194],{"class":162},[134,6457,230],{"class":162},[134,6459,6460,6462,6464,6466,6468,6470],{"class":136,"line":233},[134,6461,3019],{"class":190},[134,6463,194],{"class":162},[134,6465,241],{"class":162},[134,6467,3442],{"class":206},[134,6469,246],{"class":162},[134,6471,219],{"class":162},[134,6473,6474,6476,6478],{"class":136,"line":251},[134,6475,3035],{"class":190},[134,6477,194],{"class":162},[134,6479,230],{"class":162},[134,6481,6482,6485,6487,6489,6491,6493,6495],{"class":136,"line":257},[134,6483,6484],{"class":190},"                    presets",[134,6486,194],{"class":162},[134,6488,1415],{"class":190},[134,6490,246],{"class":162},[134,6492,3471],{"class":206},[134,6494,246],{"class":162},[134,6496,272],{"class":190},[134,6498,6499],{"class":136,"line":263},[134,6500,6501],{"class":162},"                }\n",[134,6503,6504],{"class":136,"line":269},[134,6505,2037],{"class":162},[134,6507,6508],{"class":136,"line":275},[134,6509,1500],{"class":162},[134,6511,6512],{"class":136,"line":280},[134,6513,3369],{"class":162},[134,6515,6516,6518,6520,6522,6524,6526,6528,6530,6532,6534,6536,6538,6540,6542,6544],{"class":136,"line":296},[134,6517,3375],{"class":190},[134,6519,194],{"class":162},[134,6521,197],{"class":162},[134,6523,200],{"class":158},[134,6525,203],{"class":162},[134,6527,2953],{"class":206},[134,6529,2956],{"class":162},[134,6531,2959],{"class":206},[134,6533,2956],{"class":162},[134,6535,2964],{"class":206},[134,6537,209],{"class":162},[134,6539,2969],{"class":206},[134,6541,213],{"class":212},[134,6543,216],{"class":162},[134,6545,219],{"class":162},[134,6547,6548,6550,6552,6554,6556,6558],{"class":136,"line":313},[134,6549,3402],{"class":190},[134,6551,194],{"class":162},[134,6553,197],{"class":162},[134,6555,1979],{"class":206},[134,6557,216],{"class":162},[134,6559,219],{"class":162},[134,6561,6562,6564,6566],{"class":136,"line":319},[134,6563,3425],{"class":190},[134,6565,194],{"class":162},[134,6567,166],{"class":190},[134,6569,6570,6573,6575,6577],{"class":136,"line":337},[134,6571,6572],{"class":158},"                MiniCssExtractPlugin",[134,6574,687],{"class":162},[134,6576,3007],{"class":158},[134,6578,219],{"class":162},[134,6580,6581],{"class":136,"line":343},[134,6582,6583],{"class":162},"                {\n",[134,6585,6586,6588,6590,6592,6594,6596],{"class":136,"line":353},[134,6587,4970],{"class":190},[134,6589,194],{"class":162},[134,6591,241],{"class":162},[134,6593,3026],{"class":206},[134,6595,246],{"class":162},[134,6597,219],{"class":162},[134,6599,6600,6602,6604,6606,6608,6610,6612],{"class":136,"line":364},[134,6601,4985],{"class":190},[134,6603,194],{"class":162},[134,6605,3040],{"class":162},[134,6607,3043],{"class":190},[134,6609,194],{"class":162},[134,6611,2030],{"class":912},[134,6613,3050],{"class":162},[134,6615,6616],{"class":136,"line":369},[134,6617,5922],{"class":162},[134,6619,6620,6623,6625,6627],{"class":136,"line":374},[134,6621,6622],{"class":162},"                '",[134,6624,3062],{"class":206},[134,6626,246],{"class":162},[134,6628,219],{"class":162},[134,6630,6631],{"class":136,"line":386},[134,6632,6633],{"class":190},"            ]\n",[134,6635,6636],{"class":136,"line":391},[134,6637,1500],{"class":162},[134,6639,6640],{"class":136,"line":397},[134,6641,6642],{"class":147},"        \u002F\u002F ...\n",[134,6644,6645,6647],{"class":136,"line":403},[134,6646,5344],{"class":190},[134,6648,219],{"class":162},[134,6650,6651],{"class":136,"line":408},[134,6652,5367],{"class":162},[134,6654,6655],{"class":136,"line":735},[134,6656,6383],{"class":147},[11,6658,6659],{},"これでbabelが有効になり、トランスコンパイルされます。実際に動かしてみてbundle.jsをみてみると",[69,6661,6664],{"className":6662,"code":6663,"filename":5167,"language":74,"meta":77},[72],"var message = \\\"use in IE\\\";\\n\\n(function () {\\n  console.log(message);\\n})\n",[50,6665,6663],{"__ignoreMap":77},[11,6667,6668],{},"このようにES5の書き方に直してくれました。",[96,6670,6671],{"id":6671},"特定のビルドだけでトランスコンパイルしたい時",[11,6673,6674,6675,6678,6679,6682],{},"ちなみに今回は数行のコードなので十分ですが、本番では大量のファイルと記述を変換するので時間がかかったりメモリを食います。",[50,6676,6677],{},"npm run watch","でもそこそこメモリを食う様になります。対策としては環境変数を用いて本番ビルドの時だけトランスコンパイルさせる様にします。簡単な例としてまず",[50,6680,6681],{},"packge.json","でnode.jsの変数をコマンド上で定義します。",[69,6684,6689],{"className":6685,"code":6686,"filename":6687,"language":6688,"meta":77,"style":77},"language-json shiki shiki-themes material-theme-ocean","  \"scripts\": {\n    \"build\": \"es5=true npx webpack-cli build\",\n    \"watch\": \"npx webpack-cli watch\",\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n","package.json","json",[50,6690,6691,6705,6726,6746,6775],{"__ignoreMap":77},[134,6692,6693,6696,6699,6701,6703],{"class":136,"line":137},[134,6694,6695],{"class":162},"  \"",[134,6697,6698],{"class":206},"scripts",[134,6700,327],{"class":162},[134,6702,5430],{"class":158},[134,6704,824],{"class":162},[134,6706,6707,6710,6713,6715,6717,6719,6722,6724],{"class":136,"line":144},[134,6708,6709],{"class":162},"    \"",[134,6711,6712],{"class":154},"build",[134,6714,327],{"class":162},[134,6716,194],{"class":162},[134,6718,1526],{"class":162},[134,6720,6721],{"class":206},"es5=true npx webpack-cli build",[134,6723,327],{"class":162},[134,6725,219],{"class":162},[134,6727,6728,6730,6733,6735,6737,6739,6742,6744],{"class":136,"line":151},[134,6729,6709],{"class":162},[134,6731,6732],{"class":154},"watch",[134,6734,327],{"class":162},[134,6736,194],{"class":162},[134,6738,1526],{"class":162},[134,6740,6741],{"class":206},"npx webpack-cli watch",[134,6743,327],{"class":162},[134,6745,219],{"class":162},[134,6747,6748,6750,6753,6755,6757,6759,6762,6765,6768,6770,6773],{"class":136,"line":169},[134,6749,6709],{"class":162},[134,6751,6752],{"class":154},"test",[134,6754,327],{"class":162},[134,6756,194],{"class":162},[134,6758,1526],{"class":162},[134,6760,6761],{"class":206},"echo ",[134,6763,6764],{"class":158},"\\\"",[134,6766,6767],{"class":206},"Error: no test specified",[134,6769,6764],{"class":158},[134,6771,6772],{"class":206}," && exit 1",[134,6774,5170],{"class":162},[134,6776,6777,6780],{"class":136,"line":175},[134,6778,6779],{"class":162},"  }",[134,6781,219],{"class":158},[11,6783,6784,6785,6788,6789,6792,6793,6795],{},"今回の場合、",[50,6786,6787],{},"npm run build","した時に",[50,6790,6791],{},"es5=true","という変数が定義されます。そして",[50,6794,129],{},"のrulesをこんな風に変更してみます。",[69,6797,6799],{"className":127,"code":6798,"filename":6376,"language":130,"meta":77,"style":77},"\u002F\u002F ...\n\u002F\u002F rulesを外で定義しておく。\nlet rules = [\n    {\n        test: \u002F\\.(sa|sc|c)ss$\u002F,\n        exclude: \u002Fnode_modules\u002F,\n        use: [\n            MiniCssExtractPlugin.loader,\n            {\n                loader: 'css-loader',\n                options: { url: true }\n            },\n            'sass-loader',\n        ]\n    },\n    {\n        test: \u002F\\.(png|jpg|gif)$\u002Fi,\n        generator: {\n            filename: 'imgs\u002F[name][ext][query]'\n        },\n        type: 'asset\u002Fresource'\n    }\n]\n\n\u002F\u002F es5がtrueならばバベルを適用\nif(process.env.es5){\n    rules.push(\n        {\n            test: \u002F\\.m?js$\u002F,\n            exclude: \u002F(node_modules|bower_components)\u002F,\n            use: {\n              loader: 'babel-loader',\n              options: {\n                presets: ['@babel\u002Fpreset-env']\n              }\n            }\n        }\n    )\n}\n\nmodule.exports = {\n    \u002F\u002Fバンドル対象のファイル\n    entry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: rules\n    },\n\n    \u002F\u002F ...\n}\n",[50,6800,6801,6805,6810,6820,6824,6856,6870,6878,6888,6892,6906,6922,6926,6936,6940,6944,6948,6980,6988,7000,7004,7016,7020,7024,7028,7033,7049,7059,7063,7085,7103,7111,7125,7133,7149,7153,7157,7161,7165,7169,7173,7181,7185,7199,7203,7217,7221,7229,7237,7241,7245,7249],{"__ignoreMap":77},[134,6802,6803],{"class":136,"line":137},[134,6804,6383],{"class":147},[134,6806,6807],{"class":136,"line":144},[134,6808,6809],{"class":147},"\u002F\u002F rulesを外で定義しておく。\n",[134,6811,6812,6814,6816,6818],{"class":136,"line":151},[134,6813,155],{"class":154},[134,6815,159],{"class":158},[134,6817,163],{"class":162},[134,6819,166],{"class":158},[134,6821,6822],{"class":136,"line":169},[134,6823,184],{"class":162},[134,6825,6826,6828,6830,6832,6834,6836,6838,6840,6842,6844,6846,6848,6850,6852,6854],{"class":136,"line":175},[134,6827,191],{"class":190},[134,6829,194],{"class":162},[134,6831,197],{"class":162},[134,6833,200],{"class":158},[134,6835,203],{"class":162},[134,6837,2953],{"class":206},[134,6839,2956],{"class":162},[134,6841,2959],{"class":206},[134,6843,2956],{"class":162},[134,6845,2964],{"class":206},[134,6847,209],{"class":162},[134,6849,2969],{"class":206},[134,6851,213],{"class":212},[134,6853,216],{"class":162},[134,6855,219],{"class":162},[134,6857,6858,6860,6862,6864,6866,6868],{"class":136,"line":181},[134,6859,1972],{"class":190},[134,6861,194],{"class":162},[134,6863,197],{"class":162},[134,6865,1979],{"class":206},[134,6867,216],{"class":162},[134,6869,219],{"class":162},[134,6871,6872,6874,6876],{"class":136,"line":187},[134,6873,225],{"class":190},[134,6875,194],{"class":162},[134,6877,166],{"class":158},[134,6879,6880,6882,6884,6886],{"class":136,"line":222},[134,6881,3002],{"class":158},[134,6883,687],{"class":162},[134,6885,3007],{"class":158},[134,6887,219],{"class":162},[134,6889,6890],{"class":136,"line":233},[134,6891,3014],{"class":162},[134,6893,6894,6896,6898,6900,6902,6904],{"class":136,"line":251},[134,6895,3019],{"class":190},[134,6897,194],{"class":162},[134,6899,241],{"class":162},[134,6901,3026],{"class":206},[134,6903,246],{"class":162},[134,6905,219],{"class":162},[134,6907,6908,6910,6912,6914,6916,6918,6920],{"class":136,"line":257},[134,6909,3035],{"class":190},[134,6911,194],{"class":162},[134,6913,3040],{"class":162},[134,6915,3043],{"class":190},[134,6917,194],{"class":162},[134,6919,2030],{"class":912},[134,6921,3050],{"class":162},[134,6923,6924],{"class":136,"line":263},[134,6925,3055],{"class":162},[134,6927,6928,6930,6932,6934],{"class":136,"line":269},[134,6929,1467],{"class":162},[134,6931,3062],{"class":206},[134,6933,246],{"class":162},[134,6935,219],{"class":162},[134,6937,6938],{"class":136,"line":275},[134,6939,2047],{"class":158},[134,6941,6942],{"class":136,"line":280},[134,6943,260],{"class":162},[134,6945,6946],{"class":136,"line":296},[134,6947,184],{"class":162},[134,6949,6950,6952,6954,6956,6958,6960,6962,6964,6966,6968,6970,6972,6974,6976,6978],{"class":136,"line":313},[134,6951,191],{"class":190},[134,6953,194],{"class":162},[134,6955,197],{"class":162},[134,6957,200],{"class":158},[134,6959,203],{"class":162},[134,6961,3096],{"class":206},[134,6963,2956],{"class":162},[134,6965,3101],{"class":206},[134,6967,2956],{"class":162},[134,6969,3106],{"class":206},[134,6971,209],{"class":162},[134,6973,213],{"class":212},[134,6975,216],{"class":162},[134,6977,3120],{"class":774},[134,6979,219],{"class":162},[134,6981,6982,6984,6986],{"class":136,"line":319},[134,6983,3127],{"class":190},[134,6985,194],{"class":162},[134,6987,230],{"class":162},[134,6989,6990,6992,6994,6996,6998],{"class":136,"line":337},[134,6991,3136],{"class":190},[134,6993,194],{"class":162},[134,6995,241],{"class":162},[134,6997,5915],{"class":206},[134,6999,3146],{"class":162},[134,7001,7002],{"class":136,"line":343},[134,7003,1500],{"class":162},[134,7005,7006,7008,7010,7012,7014],{"class":136,"line":353},[134,7007,3155],{"class":190},[134,7009,194],{"class":162},[134,7011,241],{"class":162},[134,7013,3162],{"class":206},[134,7015,3146],{"class":162},[134,7017,7018],{"class":136,"line":364},[134,7019,2052],{"class":162},[134,7021,7022],{"class":136,"line":369},[134,7023,272],{"class":158},[134,7025,7026],{"class":136,"line":374},[134,7027,141],{"emptyLinePlaceholder":140},[134,7029,7030],{"class":136,"line":386},[134,7031,7032],{"class":147},"\u002F\u002F es5がtrueならばバベルを適用\n",[134,7034,7035,7037,7039,7041,7043,7045,7047],{"class":136,"line":391},[134,7036,3337],{"class":212},[134,7038,3340],{"class":158},[134,7040,687],{"class":162},[134,7042,3345],{"class":158},[134,7044,687],{"class":162},[134,7046,3350],{"class":158},[134,7048,824],{"class":162},[134,7050,7051,7053,7055,7057],{"class":136,"line":397},[134,7052,377],{"class":158},[134,7054,687],{"class":162},[134,7056,807],{"class":451},[134,7058,810],{"class":190},[134,7060,7061],{"class":136,"line":403},[134,7062,3369],{"class":162},[134,7064,7065,7067,7069,7071,7073,7075,7077,7079,7081,7083],{"class":136,"line":408},[134,7066,3375],{"class":190},[134,7068,194],{"class":162},[134,7070,197],{"class":162},[134,7072,200],{"class":158},[134,7074,3384],{"class":206},[134,7076,3387],{"class":162},[134,7078,3390],{"class":206},[134,7080,213],{"class":212},[134,7082,216],{"class":162},[134,7084,219],{"class":162},[134,7086,7087,7089,7091,7093,7095,7097,7099,7101],{"class":136,"line":735},[134,7088,3402],{"class":190},[134,7090,194],{"class":162},[134,7092,3407],{"class":162},[134,7094,1979],{"class":206},[134,7096,2956],{"class":162},[134,7098,3414],{"class":206},[134,7100,3417],{"class":162},[134,7102,219],{"class":162},[134,7104,7105,7107,7109],{"class":136,"line":789},[134,7106,3425],{"class":190},[134,7108,194],{"class":162},[134,7110,230],{"class":162},[134,7112,7113,7115,7117,7119,7121,7123],{"class":136,"line":794},[134,7114,3435],{"class":190},[134,7116,194],{"class":162},[134,7118,241],{"class":162},[134,7120,3442],{"class":206},[134,7122,246],{"class":162},[134,7124,219],{"class":162},[134,7126,7127,7129,7131],{"class":136,"line":813},[134,7128,3452],{"class":190},[134,7130,194],{"class":162},[134,7132,230],{"class":162},[134,7134,7135,7137,7139,7141,7143,7145,7147],{"class":136,"line":827},[134,7136,3462],{"class":190},[134,7138,194],{"class":162},[134,7140,1415],{"class":190},[134,7142,246],{"class":162},[134,7144,3471],{"class":206},[134,7146,246],{"class":162},[134,7148,272],{"class":190},[134,7150,7151],{"class":136,"line":875},[134,7152,3481],{"class":162},[134,7154,7155],{"class":136,"line":892},[134,7156,2037],{"class":162},[134,7158,7159],{"class":136,"line":904},[134,7160,254],{"class":162},[134,7162,7163],{"class":136,"line":916},[134,7164,928],{"class":190},[134,7166,7167],{"class":136,"line":925},[134,7168,394],{"class":162},[134,7170,7171],{"class":136,"line":931},[134,7172,141],{"emptyLinePlaceholder":140},[134,7174,7175,7177,7179],{"class":136,"line":940},[134,7176,411],{"class":162},[134,7178,291],{"class":162},[134,7180,230],{"class":162},[134,7182,7183],{"class":136,"line":945},[134,7184,4710],{"class":147},[134,7186,7187,7189,7191,7193,7195,7197],{"class":136,"line":2682},[134,7188,299],{"class":190},[134,7190,194],{"class":162},[134,7192,241],{"class":162},[134,7194,306],{"class":206},[134,7196,246],{"class":162},[134,7198,219],{"class":162},[134,7200,7201],{"class":136,"line":3324},[134,7202,316],{"class":158},[134,7204,7205,7207,7209,7211,7213,7215],{"class":136,"line":3329},[134,7206,322],{"class":190},[134,7208,194],{"class":162},[134,7210,327],{"class":162},[134,7212,330],{"class":206},[134,7214,327],{"class":162},[134,7216,219],{"class":162},[134,7218,7219],{"class":136,"line":3334},[134,7220,340],{"class":158},[134,7222,7223,7225,7227],{"class":136,"line":3355},[134,7224,346],{"class":190},[134,7226,194],{"class":162},[134,7228,230],{"class":162},[134,7230,7231,7233,7235],{"class":136,"line":3366},[134,7232,356],{"class":190},[134,7234,194],{"class":162},[134,7236,361],{"class":158},[134,7238,7239],{"class":136,"line":3372},[134,7240,260],{"class":162},[134,7242,7243],{"class":136,"line":3399},[134,7244,141],{"emptyLinePlaceholder":140},[134,7246,7247],{"class":136,"line":3422},[134,7248,266],{"class":147},[134,7250,7251],{"class":136,"line":3432},[134,7252,394],{"class":162},[11,7254,7255,7257,7258,7260,7261,7264,7265,7267,7268,7270,7271,7273,7274,7276],{},[50,7256,123],{},"を",[50,7259,411],{},"の外に出しておいて、",[50,7262,7263],{},"process.env.es5","の値によって",[50,7266,123],{},"を変更できる様にします。これで",[50,7269,123],{},"の分岐ができました。",[50,7272,6712],{},"の時だけBabelが使用され、",[50,7275,6732],{},"の時はBabelが無しになります。この辺はプロジェクトごとに好きに設定してみてください。",[37,7278,4228],{"id":4228},[11,7280,7281],{},"最後に複数のバンドルファイルを出力する方法を解説します。今は参照されているアセットファイルを全てbundle.js、bundle.cssにしています。しかしプロジェクトによっては",[24,7283,7284,7287],{},[27,7285,7286],{},"一般ユーザーが閲覧するページのjs\u002Fcss",[27,7288,7289],{},"管理画面など特定のユーザーのみが使用するページのjs\u002Fcss",[11,7291,7292,7293,7296],{},"など複数パターンのファイルを出力したい時があります。例えば私はよく管理画面のUIはbootstrapとvueを使って構築してしまいます。そして一般画面はせいぜいjqueryを使用して200行にも満たないこともあります。管理画面はbootstrap合わせていろんなライブラリを使うため本番ビルドしてもかなりファイル容量を食います。一方、一般画面はそれほど大きくなりません。そんな時に全て一つの",[50,7294,7295],{},"bundle.js\u002Fcss","にまとめては一般画面に重いファイルを配ってしまいますし、場合によっては管理画面の構築コードが漏れてしまうのでよろしくありません。",[96,7298,7299],{"id":7299},"作成目標とsrcを作成",[11,7301,7302,7303,848,7306,87,7309,848,7311,7314],{},"このような状況もよくあるので複数のバンドルファイルを出力できる様にしましょう。上記の様な状況として管理画面の",[50,7304,7305],{},"admin.js",[50,7307,7308],{},"admin.css",[50,7310,6141],{},[50,7312,7313],{},"main.css","が必要になったとしましょう。",[69,7316,7319],{"className":7317,"code":7318,"language":74},[72],".\n├── dist\n│   ├── admin.css   \u002F\u002F 作成目標\n│   ├── admin.js    \u002F\u002F 作成目標\n│   ├── imgs\n│   │   └── test.png\n│   ├── index.html\n│   ├── main.css    \u002F\u002F 作成目標\n│   └── main.js     \u002F\u002F 作成目標\n├── package-lock.json\n├── package.json\n├── node_modules\n├── src\n│   ├── imgs\n│   │   ├── sample.png\n│   │   └── test.png\n│   ├── js\n│   │   ├── admin.js    \u002F\u002F 作成\n│   │   ├── functions.js\n│   │   └── main.js\n│   └── sass\n│       ├── admin.scss  \u002F\u002F 作成\n│       ├── compnent.scss\n│       ├── style.scss\n│       ├── utility\n│       └── variable.scss\n└── webpack.config.js\n",[50,7320,7318],{"__ignoreMap":77},[11,7322,7323,7324,848,7326,7329],{},"srcにエントリーとなる",[50,7325,7305],{},[50,7327,7328],{},"admin.scss","を作成します。中身は適当にadminのみで使われている記述にしてみてください。ここでは省きます。",[96,7331,7333],{"id":7332},"webpackconfigjsを設定","webpack.config.jsを設定",[11,7335,6362,7336,1379,7338,848,7341,848,7344,7346],{},[50,7337,129],{},[50,7339,7340],{},"entry",[50,7342,7343],{},"output",[50,7345,802],{},"を以下の様に変更します。",[69,7348,7350],{"className":127,"code":7349,"filename":129,"language":130,"meta":77,"style":77},"module.exports = {\n    entry:{\n        main:'.\u002Fsrc\u002Fjs\u002Fmain.js',\n        admin:'.\u002Fsrc\u002Fjs\u002Fadmin.js'\n    },\n\n    \u002F\u002F 省略\n\n    output: {\n        \u002F\u002F  出力ファイルのディレクトリ名\n        path: `${__dirname}\u002Fdist`,\n        \u002F\u002F 出力ファイル名\n        filename: \"[name].js\"\n    },\n    plugins: [\n        new MiniCssExtractPlugin({\n            filename: '[name].css'\n        })\n    ]\n};\n",[50,7351,7352,7360,7366,7381,7395,7399,7403,7408,7412,7420,7424,7442,7446,7458,7462,7470,7480,7492,7498,7502],{"__ignoreMap":77},[134,7353,7354,7356,7358],{"class":136,"line":137},[134,7355,411],{"class":162},[134,7357,291],{"class":162},[134,7359,230],{"class":162},[134,7361,7362,7364],{"class":136,"line":144},[134,7363,299],{"class":190},[134,7365,1405],{"class":162},[134,7367,7368,7371,7373,7375,7377,7379],{"class":136,"line":151},[134,7369,7370],{"class":190},"        main",[134,7372,194],{"class":162},[134,7374,246],{"class":162},[134,7376,306],{"class":206},[134,7378,246],{"class":162},[134,7380,219],{"class":162},[134,7382,7383,7386,7388,7390,7393],{"class":136,"line":169},[134,7384,7385],{"class":190},"        admin",[134,7387,194],{"class":162},[134,7389,246],{"class":162},[134,7391,7392],{"class":206},".\u002Fsrc\u002Fjs\u002Fadmin.js",[134,7394,3146],{"class":162},[134,7396,7397],{"class":136,"line":175},[134,7398,260],{"class":162},[134,7400,7401],{"class":136,"line":181},[134,7402,141],{"emptyLinePlaceholder":140},[134,7404,7405],{"class":136,"line":187},[134,7406,7407],{"class":147},"    \u002F\u002F 省略\n",[134,7409,7410],{"class":136,"line":222},[134,7411,141],{"emptyLinePlaceholder":140},[134,7413,7414,7416,7418],{"class":136,"line":233},[134,7415,3762],{"class":190},[134,7417,194],{"class":162},[134,7419,230],{"class":162},[134,7421,7422],{"class":136,"line":251},[134,7423,3772],{"class":147},[134,7425,7426,7428,7430,7432,7434,7436,7438,7440],{"class":136,"line":257},[134,7427,3778],{"class":190},[134,7429,194],{"class":162},[134,7431,835],{"class":162},[134,7433,3785],{"class":158},[134,7435,859],{"class":162},[134,7437,3790],{"class":206},[134,7439,3793],{"class":162},[134,7441,219],{"class":162},[134,7443,7444],{"class":136,"line":263},[134,7445,5156],{"class":147},[134,7447,7448,7450,7452,7454,7456],{"class":136,"line":269},[134,7449,830],{"class":190},[134,7451,194],{"class":162},[134,7453,1526],{"class":162},[134,7455,3509],{"class":206},[134,7457,5170],{"class":162},[134,7459,7460],{"class":136,"line":275},[134,7461,260],{"class":162},[134,7463,7464,7466,7468],{"class":136,"line":280},[134,7465,3821],{"class":190},[134,7467,194],{"class":162},[134,7469,166],{"class":158},[134,7471,7472,7474,7476,7478],{"class":136,"line":296},[134,7473,3831],{"class":162},[134,7475,3834],{"class":451},[134,7477,203],{"class":158},[134,7479,824],{"class":162},[134,7481,7482,7484,7486,7488,7490],{"class":136,"line":313},[134,7483,3136],{"class":190},[134,7485,194],{"class":162},[134,7487,241],{"class":162},[134,7489,3850],{"class":206},[134,7491,3146],{"class":162},[134,7493,7494,7496],{"class":136,"line":319},[134,7495,3858],{"class":162},[134,7497,922],{"class":158},[134,7499,7500],{"class":136,"line":337},[134,7501,3868],{"class":158},[134,7503,7504],{"class":136,"line":343},[134,7505,3874],{"class":162},[11,7507,7508,7509,7511],{},"注目して欲しいのは",[50,7510,7340],{},"です。",[69,7513,7515],{"className":127,"code":7514,"language":130,"meta":77,"style":77},"\u002F\u002F 変更前\nentry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n\n\u002F\u002F 変更後\nentry:{\n    main:'.\u002Fsrc\u002Fjs\u002Fmain.js',\n    admin:'.\u002Fsrc\u002Fjs\u002Fadmin.js'\n},\n",[50,7516,7517,7522,7536,7540,7545,7551,7566,7579],{"__ignoreMap":77},[134,7518,7519],{"class":136,"line":137},[134,7520,7521],{"class":147},"\u002F\u002F 変更前\n",[134,7523,7524,7526,7528,7530,7532,7534],{"class":136,"line":144},[134,7525,7340],{"class":4320},[134,7527,194],{"class":162},[134,7529,241],{"class":162},[134,7531,306],{"class":206},[134,7533,246],{"class":162},[134,7535,219],{"class":162},[134,7537,7538],{"class":136,"line":151},[134,7539,141],{"emptyLinePlaceholder":140},[134,7541,7542],{"class":136,"line":169},[134,7543,7544],{"class":147},"\u002F\u002F 変更後\n",[134,7546,7547,7549],{"class":136,"line":175},[134,7548,7340],{"class":4320},[134,7550,1405],{"class":162},[134,7552,7553,7556,7558,7560,7562,7564],{"class":136,"line":181},[134,7554,7555],{"class":4320},"    main",[134,7557,194],{"class":162},[134,7559,246],{"class":162},[134,7561,306],{"class":206},[134,7563,246],{"class":162},[134,7565,219],{"class":162},[134,7567,7568,7571,7573,7575,7577],{"class":136,"line":187},[134,7569,7570],{"class":4320},"    admin",[134,7572,194],{"class":162},[134,7574,246],{"class":162},[134,7576,7392],{"class":206},[134,7578,3146],{"class":162},[134,7580,7581],{"class":136,"line":222},[134,7582,5367],{"class":162},[11,7584,7585,7586,7589,7590,7592],{},"今まではそれぞれのファイルを直接配列で指定してましたが、変更後ではオブジェクトにしています。オブジェクトのキーは",[50,7587,7588],{},"[name]","として利用できます。例えば、",[50,7591,7343],{},"でこの様に利用します。",[69,7594,7596],{"className":127,"code":7595,"language":130,"meta":77,"style":77},"output: {\n    \u002F\u002F  出力ファイルのディレクトリ名\n    path: `${__dirname}\u002Fdist`,\n    \u002F\u002F 出力ファイル名\n    filename: \"[name].js\"\n},\nplugins: [\n    new MiniCssExtractPlugin({\n        filename: '[name].css'\n    })\n]\n",[50,7597,7598,7606,7611,7630,7635,7648,7652,7660,7671,7683,7690],{"__ignoreMap":77},[134,7599,7600,7602,7604],{"class":136,"line":137},[134,7601,7343],{"class":4320},[134,7603,194],{"class":162},[134,7605,230],{"class":162},[134,7607,7608],{"class":136,"line":144},[134,7609,7610],{"class":147},"    \u002F\u002F  出力ファイルのディレクトリ名\n",[134,7612,7613,7616,7618,7620,7622,7624,7626,7628],{"class":136,"line":151},[134,7614,7615],{"class":4320},"    path",[134,7617,194],{"class":162},[134,7619,835],{"class":162},[134,7621,3785],{"class":158},[134,7623,859],{"class":162},[134,7625,3790],{"class":206},[134,7627,3793],{"class":162},[134,7629,219],{"class":162},[134,7631,7632],{"class":136,"line":169},[134,7633,7634],{"class":147},"    \u002F\u002F 出力ファイル名\n",[134,7636,7637,7640,7642,7644,7646],{"class":136,"line":175},[134,7638,7639],{"class":4320},"    filename",[134,7641,194],{"class":162},[134,7643,1526],{"class":162},[134,7645,3509],{"class":206},[134,7647,5170],{"class":162},[134,7649,7650],{"class":136,"line":181},[134,7651,5367],{"class":162},[134,7653,7654,7656,7658],{"class":136,"line":187},[134,7655,802],{"class":4320},[134,7657,194],{"class":162},[134,7659,166],{"class":158},[134,7661,7662,7665,7667,7669],{"class":136,"line":222},[134,7663,7664],{"class":162},"    new",[134,7666,3834],{"class":451},[134,7668,203],{"class":158},[134,7670,824],{"class":162},[134,7672,7673,7675,7677,7679,7681],{"class":136,"line":233},[134,7674,830],{"class":190},[134,7676,194],{"class":162},[134,7678,241],{"class":162},[134,7680,3850],{"class":206},[134,7682,3146],{"class":162},[134,7684,7685,7688],{"class":136,"line":251},[134,7686,7687],{"class":162},"    }",[134,7689,922],{"class":158},[134,7691,7692],{"class":136,"line":257},[134,7693,272],{"class":158},[11,7695,7696,7697,848,7699,7701,7702,4605,7704,7706,7707,4605,7709,4605,7711,4605,7713,7715],{},"変更前は全て",[50,7698,5167],{},[50,7700,5203],{},"と一定の名前でしたが、こうするとオブジェクトのキー名に応じて、",[50,7703,6141],{},[50,7705,7305],{},"など作成されます。実際にビルドをしてみると、",[50,7708,6141],{},[50,7710,7305],{},[50,7712,7313],{},[50,7714,7308],{},"が作成されました。",[37,7717,2821],{"id":2820},[11,7719,7720],{},"以上が今回の内容です。画像・Babelそして複数ファイルパターンができればもうプロジェクトで十分利用可能です。次回はhtmlをsrc配下で利用できるようにします。src配下のみで作業してコマンド打って完成したファイルがdistに出せる様にします。そしてまとめとしてこれらの構成とpugを使用したプロトタイプページの作成をしてみます。",[4170,7722,7723],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}",{"title":77,"searchDepth":151,"depth":151,"links":7725},[7726,7736,7740,7744],{"id":4234,"depth":144,"text":4234,"children":7727},[7728,7729,7730,7735],{"id":4237,"depth":151,"text":4237},{"id":4598,"depth":151,"text":4598},{"id":4625,"depth":151,"text":4625,"children":7731},[7732,7733,7734],{"id":4629,"depth":169,"text":4629},{"id":5225,"depth":169,"text":5225},{"id":5394,"depth":169,"text":5394},{"id":5596,"depth":151,"text":5596},{"id":4225,"depth":144,"text":4225,"children":7737},[7738,7739],{"id":6349,"depth":151,"text":6350},{"id":6671,"depth":151,"text":6671},{"id":4228,"depth":144,"text":4228,"children":7741},[7742,7743],{"id":7299,"depth":151,"text":7299},{"id":7332,"depth":151,"text":7333},{"id":2820,"depth":144,"text":2821},[4190],"2021-06-06","Babel、画像の処理と複数バンドル",{},"\u002Fseries\u002Fwell-study-webpack-2",{"title":18,"description":7747},"series\u002Fwell-study-webpack-2",[3390,4201],"HmfkSL8RL8-q0C9UnXt7ExxZBfF5TgF206dj6ahXmq8",1780987145371]