[{"data":1,"prerenderedAt":10754},["ShallowReactive",2],{"tag-webpack-1":3},{"count":4,"content":5},4,[6,4206,7755,8256],{"id":7,"title":8,"body":9,"category":4190,"createdAt":4192,"description":4193,"extension":4194,"index":153,"meta":4195,"navigation":142,"path":4196,"publish":142,"seo":4197,"series":4198,"seriesTitle":4199,"stem":4200,"tag":4201,"thumbnail":4203,"updatedAt":4204,"__hash__":4205},"series\u002Fseries\u002Fwell-study-webpack-3.md","ちゃんと理解するWebpack5。３：HTMLのバンドルとPUGでのページ作成",{"type":10,"value":11,"toc":4174},"minimark",[12,22,25,35,38,43,60,63,67,70,80,97,101,111,117,120,127,421,424,431,955,962,993,1003,1228,1237,1248,1258,1261,1270,1332,1338,1375,1384,1545,1548,1603,1616,1620,1626,1629,1632,1635,1726,1733,1839,1842,1845,1851,1857,1878,1893,1896,1899,1905,1910,1916,2174,2177,2692,2695,2759,2771,2774,2777,2787,2816,2819,2823,2829,4170],[13,14,15,16,21],"p",{},"こんにちはjunです。前回の記事",[17,18,20],"a",{"href":19},"\u002Fseries\u002Fwell-study-webpack\u002F2","ちゃんと理解するWebpack5。２：Babel、画像の処理と複数バンドル","の続きの記事です。前回は画像のバンドル、Bableのトランスコンパイル、そして複数バンドルを行いました。今回は残りのHTMLの取り扱い方と、テンプレートエンジンと呼ばれるPUGを用いてHTMLでページをガンガン作成していこうと思います。",[13,23,24],{},"シチュエーションとしては、",[26,27,28,32],"ul",{},[29,30,31],"li",{},"サイト制作で上がってきたデザインからHTML・CSS・JSのテンプレートファイルを作る。",[29,33,34],{},"モックとしてサービスのweb部分を作ってみる",[13,36,37],{},"といった感じです。とりあえず「デザイン通りに見た目と動きつくってちょ！」というような依頼が来たと思ってください。",[39,40,42],"h2",{"id":41},"webpakcでhtmlを扱うには","webpakcでHTMLを扱うには",[13,44,45,46,50,51,55,56,59],{},"webpackには「html-loader」というhtmlファイルを扱うloaderがあります。",[17,47,49],{"href":48},"\u002Fseries\u002Fwell-study-webpack\u002F1","ちゃんと理解するWebpack5。１","では最初ということもあり、",[52,53,54],"code",{},"dist","に直接置いていましたが、ローダーを使用することでHTMLも",[52,57,58],{},"src","配下に置いてバンドルできます。複数対応ももちろん可能です。",[13,61,62],{},"今回はまず素のHTMLを扱う方法とテンプレートエンジンという効率的にHTMLを生成できるpugを用いた2つのバンドル方法を今回はお伝えします。",[39,64,66],{"id":65},"単純htmlファイルをバンドルする","単純HTMLファイルをバンドルする",[13,68,69],{},"前回の構成に加えて",[71,72,77],"pre",{"className":73,"code":75,"language":76},[74],"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",[52,78,75],{"__ignoreMap":79},"",[13,81,82,85,86,89,90,93,94,96],{},[52,83,84],{},"html","というディレクトリを作成し、バンドル対象の",[52,87,88],{},"index.html","と",[52,91,92],{},"detail.html","を作成しました。目標はこの２つのファイルが",[52,95,54],{},"配下に配置されることです。",[98,99,100],"h3",{"id":100},"html扱いに必要なloaderとpluginを入れる",[13,102,103,104,89,107,110],{},"最初にHTMLファイルを扱うために必要な",[52,105,106],{},"html-loader",[52,108,109],{},"HtmlWebpackPlugin","をインストールします。",[71,112,115],{"className":113,"code":114,"language":76},[74],"npm install -D html-loader html-webpack-plugin\n",[52,116,114],{"__ignoreMap":79},[98,118,119],{"id":119},"ruleとloaderを追加",[13,121,122,123,126],{},"そしてwebpack.config.jsにhtmlに関する。記述を追加します。まずは",[52,124,125],{},"rules","にhtmlファイルのルールを追加します。",[71,128,133],{"className":129,"code":130,"filename":131,"language":132,"meta":79,"style":79},"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",[52,134,135,144,151,169,174,180,186,221,232,250,256,262,268,274,279,295,312,318,336,342,352,363,368,373,385,390,396,402,407],{"__ignoreMap":79},[136,137,140],"span",{"class":138,"line":139},"line",1,[136,141,143],{"emptyLinePlaceholder":142},true,"\n",[136,145,147],{"class":138,"line":146},2,[136,148,150],{"class":149},"sC9rS","\u002F\u002F rulesの配列は後で\n",[136,152,154,158,162,166],{"class":138,"line":153},3,[136,155,157],{"class":156},"sJ14y","let",[136,159,161],{"class":160},"s0W1g"," rules ",[136,163,165],{"class":164},"sAklC","=",[136,167,168],{"class":160}," [\n",[136,170,171],{"class":138,"line":4},[136,172,173],{"class":149},"    \u002F\u002F ... \n",[136,175,177],{"class":138,"line":176},5,[136,178,179],{"class":149},"    \u002F\u002F 追加↓\n",[136,181,183],{"class":138,"line":182},6,[136,184,185],{"class":164},"    {\n",[136,187,189,193,196,199,202,205,208,211,215,218],{"class":138,"line":188},7,[136,190,192],{"class":191},"s-wAU","        test",[136,194,195],{"class":164},":",[136,197,198],{"class":164}," \u002F",[136,200,201],{"class":160},"\\.",[136,203,204],{"class":164},"(",[136,206,84],{"class":207},"sfyAc",[136,209,210],{"class":164},")",[136,212,214],{"class":213},"s6cf3","$",[136,216,217],{"class":164},"\u002F",[136,219,220],{"class":164},",\n",[136,222,224,227,229],{"class":138,"line":223},8,[136,225,226],{"class":191},"        use",[136,228,195],{"class":164},[136,230,231],{"class":164}," {\n",[136,233,235,238,240,243,245,248],{"class":138,"line":234},9,[136,236,237],{"class":191},"            loader",[136,239,195],{"class":164},[136,241,242],{"class":164}," '",[136,244,106],{"class":207},[136,246,247],{"class":164},"'",[136,249,220],{"class":164},[136,251,253],{"class":138,"line":252},10,[136,254,255],{"class":164},"        }\n",[136,257,259],{"class":138,"line":258},11,[136,260,261],{"class":164},"    },\n",[136,263,265],{"class":138,"line":264},12,[136,266,267],{"class":149},"    \u002F\u002F ...\n",[136,269,271],{"class":138,"line":270},13,[136,272,273],{"class":160},"]\n",[136,275,277],{"class":138,"line":276},14,[136,278,143],{"emptyLinePlaceholder":142},[136,280,282,285,288,290,293],{"class":138,"line":281},15,[136,283,284],{"class":156},"const",[136,286,287],{"class":160}," buildDefault ",[136,289,165],{"class":164},[136,291,292],{"class":164}," =",[136,294,231],{"class":164},[136,296,298,301,303,305,308,310],{"class":138,"line":297},16,[136,299,300],{"class":191},"    entry",[136,302,195],{"class":164},[136,304,242],{"class":164},[136,306,307],{"class":207},".\u002Fsrc\u002Fjs\u002Fmain.js",[136,309,247],{"class":164},[136,311,220],{"class":164},[136,313,315],{"class":138,"line":314},17,[136,316,317],{"class":160},"  \n",[136,319,321,324,326,329,332,334],{"class":138,"line":320},18,[136,322,323],{"class":191},"    mode",[136,325,195],{"class":164},[136,327,328],{"class":164},"\"",[136,330,331],{"class":207},"development",[136,333,328],{"class":164},[136,335,220],{"class":164},[136,337,339],{"class":138,"line":338},19,[136,340,341],{"class":160},"    \n",[136,343,345,348,350],{"class":138,"line":344},20,[136,346,347],{"class":191},"    module",[136,349,195],{"class":164},[136,351,231],{"class":164},[136,353,355,358,360],{"class":138,"line":354},21,[136,356,357],{"class":191},"        rules",[136,359,195],{"class":164},[136,361,362],{"class":160}," rules\n",[136,364,366],{"class":138,"line":365},22,[136,367,261],{"class":164},[136,369,371],{"class":138,"line":370},23,[136,372,143],{"emptyLinePlaceholder":142},[136,374,376,379,381,383],{"class":138,"line":375},24,[136,377,378],{"class":191},"    rules",[136,380,195],{"class":164},[136,382,125],{"class":160},[136,384,220],{"class":164},[136,386,388],{"class":138,"line":387},25,[136,389,267],{"class":149},[136,391,393],{"class":138,"line":392},26,[136,394,395],{"class":164},"}\n",[136,397,399],{"class":138,"line":398},27,[136,400,401],{"class":149},"\u002F\u002F...\n",[136,403,405],{"class":138,"line":404},28,[136,406,143],{"emptyLinePlaceholder":142},[136,408,410,413,415,418],{"class":138,"line":409},29,[136,411,412],{"class":164},"module.exports",[136,414,292],{"class":164},[136,416,417],{"class":160}," buildDefault",[136,419,420],{"class":164},";\n",[98,422,423],{"id":423},"html-webpack-pluginの設定",[13,425,426,427,430],{},"とりあえずこれでwebpackはhtmlファイルを扱えるようになりました。次はentryでjsファイルを指定していたように、バンドル対象のhtmlをwebpackに読み込ませるために",[52,428,429],{},"html-webpack-plugin","を使用します。",[71,432,434],{"className":129,"code":433,"filename":131,"language":132,"meta":79,"style":79},"\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",[52,435,436,441,467,491,495,500,524,547,551,561,566,570,574,586,600,604,618,622,630,638,642,646,656,661,665,669,674,705,709,734,788,793,812,826,874,891,903,915,924,930,939,944],{"__ignoreMap":79},[136,437,438],{"class":138,"line":139},[136,439,440],{"class":149},"\u002F\u002F ファイル冒頭\n",[136,442,443,445,448,450,454,456,458,461,463,465],{"class":138,"line":146},[136,444,284],{"class":156},[136,446,447],{"class":160}," MiniCssExtractPlugin ",[136,449,165],{"class":164},[136,451,453],{"class":452},"sdLwU"," require",[136,455,204],{"class":160},[136,457,247],{"class":164},[136,459,460],{"class":207},"mini-css-extract-plugin",[136,462,247],{"class":164},[136,464,210],{"class":160},[136,466,420],{"class":164},[136,468,469,471,474,476,478,480,482,485,487,489],{"class":138,"line":153},[136,470,284],{"class":156},[136,472,473],{"class":160}," path ",[136,475,165],{"class":164},[136,477,453],{"class":452},[136,479,204],{"class":160},[136,481,247],{"class":164},[136,483,484],{"class":207},"path",[136,486,247],{"class":164},[136,488,210],{"class":160},[136,490,420],{"class":164},[136,492,493],{"class":138,"line":4},[136,494,143],{"emptyLinePlaceholder":142},[136,496,497],{"class":138,"line":176},[136,498,499],{"class":149},"\u002F\u002F この２つを追加\n",[136,501,502,504,507,509,511,513,515,518,520,522],{"class":138,"line":182},[136,503,284],{"class":156},[136,505,506],{"class":160}," globule ",[136,508,165],{"class":164},[136,510,453],{"class":452},[136,512,204],{"class":160},[136,514,247],{"class":164},[136,516,517],{"class":207},"globule",[136,519,247],{"class":164},[136,521,210],{"class":160},[136,523,420],{"class":164},[136,525,526,528,531,533,535,537,539,541,543,545],{"class":138,"line":188},[136,527,284],{"class":156},[136,529,530],{"class":160}," HtmlWebpackPlugin ",[136,532,165],{"class":164},[136,534,453],{"class":452},[136,536,204],{"class":160},[136,538,247],{"class":164},[136,540,429],{"class":207},[136,542,247],{"class":164},[136,544,210],{"class":160},[136,546,420],{"class":164},[136,548,549],{"class":138,"line":223},[136,550,143],{"emptyLinePlaceholder":142},[136,552,553,555,557,559],{"class":138,"line":234},[136,554,157],{"class":156},[136,556,161],{"class":160},[136,558,165],{"class":164},[136,560,168],{"class":160},[136,562,563],{"class":138,"line":252},[136,564,565],{"class":149},"    \u002F\u002F 省略... \n",[136,567,568],{"class":138,"line":258},[136,569,273],{"class":160},[136,571,572],{"class":138,"line":264},[136,573,143],{"emptyLinePlaceholder":142},[136,575,576,578,580,582,584],{"class":138,"line":270},[136,577,284],{"class":156},[136,579,287],{"class":160},[136,581,165],{"class":164},[136,583,292],{"class":164},[136,585,231],{"class":164},[136,587,588,590,592,594,596,598],{"class":138,"line":276},[136,589,300],{"class":191},[136,591,195],{"class":164},[136,593,242],{"class":164},[136,595,307],{"class":207},[136,597,247],{"class":164},[136,599,220],{"class":164},[136,601,602],{"class":138,"line":281},[136,603,317],{"class":160},[136,605,606,608,610,612,614,616],{"class":138,"line":297},[136,607,323],{"class":191},[136,609,195],{"class":164},[136,611,328],{"class":164},[136,613,331],{"class":207},[136,615,328],{"class":164},[136,617,220],{"class":164},[136,619,620],{"class":138,"line":314},[136,621,341],{"class":160},[136,623,624,626,628],{"class":138,"line":320},[136,625,347],{"class":191},[136,627,195],{"class":164},[136,629,231],{"class":164},[136,631,632,634,636],{"class":138,"line":338},[136,633,357],{"class":191},[136,635,195],{"class":164},[136,637,362],{"class":160},[136,639,640],{"class":138,"line":344},[136,641,261],{"class":164},[136,643,644],{"class":138,"line":354},[136,645,143],{"emptyLinePlaceholder":142},[136,647,648,650,652,654],{"class":138,"line":365},[136,649,378],{"class":191},[136,651,195],{"class":164},[136,653,125],{"class":160},[136,655,220],{"class":164},[136,657,658],{"class":138,"line":370},[136,659,660],{"class":149},"    \u002F\u002F 以下略...\n",[136,662,663],{"class":138,"line":375},[136,664,395],{"class":164},[136,666,667],{"class":138,"line":387},[136,668,143],{"emptyLinePlaceholder":142},[136,670,671],{"class":138,"line":392},[136,672,673],{"class":149},"\u002F\u002F これらを追記\n",[136,675,676,678,681,683,686,689,692,694,696,699,701,703],{"class":138,"line":398},[136,677,284],{"class":156},[136,679,680],{"class":160}," htmlFiles ",[136,682,165],{"class":164},[136,684,685],{"class":160}," globule",[136,687,688],{"class":164},".",[136,690,691],{"class":452},"find",[136,693,204],{"class":160},[136,695,247],{"class":164},[136,697,698],{"class":207},"src\u002Fhtml\u002F*.html",[136,700,247],{"class":164},[136,702,210],{"class":160},[136,704,420],{"class":164},[136,706,707],{"class":138,"line":404},[136,708,143],{"emptyLinePlaceholder":142},[136,710,711,714,716,719,721,723,727,729,732],{"class":138,"line":409},[136,712,713],{"class":160},"htmlFiles",[136,715,688],{"class":164},[136,717,718],{"class":452},"forEach",[136,720,204],{"class":160},[136,722,204],{"class":164},[136,724,726],{"class":725},"s7ZW3","htmlsrc",[136,728,210],{"class":164},[136,730,731],{"class":156}," =>",[136,733,231],{"class":164},[136,735,737,740,743,745,748,750,753,755,757,759,761,763,765,768,770,773,777,780,783,786],{"class":138,"line":736},30,[136,738,739],{"class":156},"    const",[136,741,742],{"class":160}," htmlname",[136,744,292],{"class":164},[136,746,747],{"class":160}," htmlsrc",[136,749,688],{"class":164},[136,751,752],{"class":452},"split",[136,754,204],{"class":191},[136,756,247],{"class":164},[136,758,217],{"class":207},[136,760,247],{"class":164},[136,762,210],{"class":191},[136,764,688],{"class":164},[136,766,767],{"class":452},"slice",[136,769,204],{"class":191},[136,771,772],{"class":164},"-",[136,774,776],{"class":775},"sx098","1",[136,778,779],{"class":191},")[",[136,781,782],{"class":775},"0",[136,784,785],{"class":191},"]",[136,787,420],{"class":164},[136,789,791],{"class":138,"line":790},31,[136,792,143],{"emptyLinePlaceholder":142},[136,794,796,799,801,804,806,809],{"class":138,"line":795},32,[136,797,798],{"class":160},"    buildDefault",[136,800,688],{"class":164},[136,802,803],{"class":160},"plugins",[136,805,688],{"class":164},[136,807,808],{"class":452},"push",[136,810,811],{"class":191},"(\n",[136,813,815,818,821,823],{"class":138,"line":814},33,[136,816,817],{"class":164},"      new",[136,819,820],{"class":452}," HtmlWebpackPlugin",[136,822,204],{"class":191},[136,824,825],{"class":164},"{\n",[136,827,829,832,834,837,839,841,844,847,850,852,854,856,858,861,863,866,869,872],{"class":138,"line":828},34,[136,830,831],{"class":191},"        filename",[136,833,195],{"class":164},[136,835,836],{"class":164}," `${",[136,838,484],{"class":160},[136,840,688],{"class":164},[136,842,843],{"class":452},"resolve",[136,845,846],{"class":160},"(__dirname",[136,848,849],{"class":164},",",[136,851,242],{"class":164},[136,853,54],{"class":207},[136,855,247],{"class":164},[136,857,210],{"class":160},[136,859,860],{"class":164},"}",[136,862,217],{"class":207},[136,864,865],{"class":164},"${",[136,867,868],{"class":160},"htmlname",[136,870,871],{"class":164},"}`",[136,873,220],{"class":164},[136,875,877,880,882,884,887,889],{"class":138,"line":876},35,[136,878,879],{"class":191},"        inject",[136,881,195],{"class":164},[136,883,247],{"class":164},[136,885,886],{"class":207},"body",[136,888,247],{"class":164},[136,890,220],{"class":164},[136,892,894,897,899,901],{"class":138,"line":893},36,[136,895,896],{"class":191},"        template",[136,898,195],{"class":164},[136,900,747],{"class":160},[136,902,220],{"class":164},[136,904,906,909,911],{"class":138,"line":905},37,[136,907,908],{"class":191},"        minify",[136,910,195],{"class":164},[136,912,914],{"class":913},"sbqyR"," false\n",[136,916,918,921],{"class":138,"line":917},38,[136,919,920],{"class":164},"      }",[136,922,923],{"class":191},")\n",[136,925,927],{"class":138,"line":926},39,[136,928,929],{"class":191},"    )\n",[136,931,933,935,937],{"class":138,"line":932},40,[136,934,860],{"class":164},[136,936,210],{"class":160},[136,938,420],{"class":164},[136,940,942],{"class":138,"line":941},41,[136,943,143],{"emptyLinePlaceholder":142},[136,945,947,949,951,953],{"class":138,"line":946},42,[136,948,412],{"class":164},[136,950,292],{"class":164},[136,952,417],{"class":160},[136,954,420],{"class":164},[13,956,957,958,961],{},"詳細の解説をします。まず最初に必要なプラグインとnode.jsのモジュールをインポートします。そして以下の記述は",[52,959,960],{},"src\u002Fhtml","配下にあるhtmlファイルを全て取得する処理です。",[71,963,965],{"className":129,"code":964,"language":132,"meta":79,"style":79},"const htmlFiles = globule.find('src\u002Fhtml\u002F*.html');\n",[52,966,967],{"__ignoreMap":79},[136,968,969,971,973,975,977,979,981,983,985,987,989,991],{"class":138,"line":139},[136,970,284],{"class":156},[136,972,680],{"class":160},[136,974,165],{"class":164},[136,976,685],{"class":160},[136,978,688],{"class":164},[136,980,691],{"class":452},[136,982,204],{"class":160},[136,984,247],{"class":164},[136,986,698],{"class":207},[136,988,247],{"class":164},[136,990,210],{"class":160},[136,992,420],{"class":164},[13,994,995,996,998,999,1002],{},"配列でhtmlファイルのパスが戻ってきますので、それらを",[52,997,109],{},"にファイル分だけ",[52,1000,1001],{},"new","します。",[71,1004,1006],{"className":129,"code":1005,"language":132,"meta":79,"style":79},"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",[52,1007,1008,1028,1033,1075,1079,1084,1098,1108,1113,1151,1155,1160,1174,1178,1183,1193,1197,1202,1210,1216,1220],{"__ignoreMap":79},[136,1009,1010,1012,1014,1016,1018,1020,1022,1024,1026],{"class":138,"line":139},[136,1011,713],{"class":160},[136,1013,688],{"class":164},[136,1015,718],{"class":452},[136,1017,204],{"class":160},[136,1019,204],{"class":164},[136,1021,726],{"class":725},[136,1023,210],{"class":164},[136,1025,731],{"class":156},[136,1027,231],{"class":164},[136,1029,1030],{"class":138,"line":146},[136,1031,1032],{"class":149},"    \u002F\u002F ファイル名を取得 src\u002Fhtml\u002Findex.html → index.html\n",[136,1034,1035,1037,1039,1041,1043,1045,1047,1049,1051,1053,1055,1057,1059,1061,1063,1065,1067,1069,1071,1073],{"class":138,"line":153},[136,1036,739],{"class":156},[136,1038,742],{"class":160},[136,1040,292],{"class":164},[136,1042,747],{"class":160},[136,1044,688],{"class":164},[136,1046,752],{"class":452},[136,1048,204],{"class":191},[136,1050,247],{"class":164},[136,1052,217],{"class":207},[136,1054,247],{"class":164},[136,1056,210],{"class":191},[136,1058,688],{"class":164},[136,1060,767],{"class":452},[136,1062,204],{"class":191},[136,1064,772],{"class":164},[136,1066,776],{"class":775},[136,1068,779],{"class":191},[136,1070,782],{"class":775},[136,1072,785],{"class":191},[136,1074,420],{"class":164},[136,1076,1077],{"class":138,"line":4},[136,1078,143],{"emptyLinePlaceholder":142},[136,1080,1081],{"class":138,"line":176},[136,1082,1083],{"class":149},"    \u002F\u002F webpackの設定にある、pluginsに以下のプラグインインスタンスを入れる。\n",[136,1085,1086,1088,1090,1092,1094,1096],{"class":138,"line":182},[136,1087,798],{"class":160},[136,1089,688],{"class":164},[136,1091,803],{"class":160},[136,1093,688],{"class":164},[136,1095,808],{"class":452},[136,1097,811],{"class":191},[136,1099,1100,1102,1104,1106],{"class":138,"line":188},[136,1101,817],{"class":164},[136,1103,820],{"class":452},[136,1105,204],{"class":191},[136,1107,825],{"class":164},[136,1109,1110],{"class":138,"line":223},[136,1111,1112],{"class":149},"        \u002F\u002F distのファイル名。今回はsrcと同じ。\n",[136,1114,1115,1117,1119,1121,1123,1125,1127,1129,1131,1133,1135,1137,1139,1141,1143,1145,1147,1149],{"class":138,"line":234},[136,1116,831],{"class":191},[136,1118,195],{"class":164},[136,1120,836],{"class":164},[136,1122,484],{"class":160},[136,1124,688],{"class":164},[136,1126,843],{"class":452},[136,1128,846],{"class":160},[136,1130,849],{"class":164},[136,1132,242],{"class":164},[136,1134,54],{"class":207},[136,1136,247],{"class":164},[136,1138,210],{"class":160},[136,1140,860],{"class":164},[136,1142,217],{"class":207},[136,1144,865],{"class":164},[136,1146,868],{"class":160},[136,1148,871],{"class":164},[136,1150,220],{"class":164},[136,1152,1153],{"class":138,"line":252},[136,1154,143],{"emptyLinePlaceholder":142},[136,1156,1157],{"class":138,"line":258},[136,1158,1159],{"class":149},"        \u002F\u002F 自動的にバンドル対象のjs\b(main.js)とcss(style.css)を入れる。お節介ならfalseにする。\n",[136,1161,1162,1164,1166,1168,1170,1172],{"class":138,"line":264},[136,1163,879],{"class":191},[136,1165,195],{"class":164},[136,1167,247],{"class":164},[136,1169,886],{"class":207},[136,1171,247],{"class":164},[136,1173,220],{"class":164},[136,1175,1176],{"class":138,"line":270},[136,1177,143],{"emptyLinePlaceholder":142},[136,1179,1180],{"class":138,"line":276},[136,1181,1182],{"class":149},"        \u002F\u002F 対象のhtmlファイル\n",[136,1184,1185,1187,1189,1191],{"class":138,"line":281},[136,1186,896],{"class":191},[136,1188,195],{"class":164},[136,1190,747],{"class":160},[136,1192,220],{"class":164},[136,1194,1195],{"class":138,"line":297},[136,1196,143],{"emptyLinePlaceholder":142},[136,1198,1199],{"class":138,"line":314},[136,1200,1201],{"class":149},"        \u002F\u002F 圧縮するかどうか。defaultはtrue\n",[136,1203,1204,1206,1208],{"class":138,"line":320},[136,1205,908],{"class":191},[136,1207,195],{"class":164},[136,1209,914],{"class":913},[136,1211,1212,1214],{"class":138,"line":338},[136,1213,920],{"class":164},[136,1215,923],{"class":191},[136,1217,1218],{"class":138,"line":344},[136,1219,929],{"class":191},[136,1221,1222,1224,1226],{"class":138,"line":354},[136,1223,860],{"class":164},[136,1225,210],{"class":160},[136,1227,420],{"class":164},[13,1229,1230,1233,1234,1236],{},[52,1231,1232],{},"new HtmlWebpackPlugin()","では対象のHTMLファイルをwebpackに読み込ませますが、１ファイルづつなのでhtmlが複数ある場合、",[52,1235,517],{},"などを使用して複数の対象ファイルを取得してforeachで回します。",[13,1238,1239,1240,1242,1243,89,1245,1247],{},"こうすることで",[52,1241,960],{},"配下のhtmlがバンドルされます。適当に内容を書いてnpm run buildしてみましょう。dist配下に",[52,1244,88],{},[52,1246,92],{},"が出力されるはずです。",[1249,1250,1254,1257],"div",{"className":1251},[1252,1253],"alert","alert-info",[52,1255,1256],{},"inject:'body'","がある場合、htmlにはバンドル対象のcss\u002Fjsを読み込む為のscriptやlinkを記述する必要はありません。自動的に挿入されます。\n",[98,1259,1260],{"id":1260},"画像パスの解決",[13,1262,1263,1264,1266,1267,1269],{},"HTML編の最後に画像パスの解決を行います。",[52,1265,106],{},"は",[52,1268,58],{},"などロード可能な属性を見つけるとそのパスなどの解決を行おうとします。たとえば以下のようなタグある場合",[71,1271,1274],{"className":1272,"code":1273,"language":84,"meta":79,"style":79},"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",[52,1275,1276,1281,1304,1308,1313],{"__ignoreMap":79},[136,1277,1278],{"class":138,"line":139},[136,1279,1280],{"class":149},"\u003C!-- バンドル前 -->\n",[136,1282,1283,1286,1289,1292,1294,1296,1299,1301],{"class":138,"line":146},[136,1284,1285],{"class":164},"\u003C",[136,1287,1288],{"class":191},"img",[136,1290,1291],{"class":156}," src",[136,1293,165],{"class":164},[136,1295,328],{"class":164},[136,1297,1298],{"class":207},"image.png",[136,1300,328],{"class":164},[136,1302,1303],{"class":164},"\u002F>\n",[136,1305,1306],{"class":138,"line":153},[136,1307,143],{"emptyLinePlaceholder":142},[136,1309,1310],{"class":138,"line":4},[136,1311,1312],{"class":149},"\u003C!-- バンドル後 -->\n",[136,1314,1315,1317,1319,1321,1323,1325,1328,1330],{"class":138,"line":176},[136,1316,1285],{"class":164},[136,1318,1288],{"class":191},[136,1320,1291],{"class":156},[136,1322,165],{"class":164},[136,1324,328],{"class":164},[136,1326,1327],{"class":207},".\u002Fimage.png",[136,1329,328],{"class":164},[136,1331,1303],{"class":164},[13,1333,1334,1335,1337],{},"このように自動的にパスの調整を行います。相対パスだと階層が深い時大変ですので、scssではエイリアスを用いて",[52,1336,58],{},"を指定できましたが、htmlは残念ながらできません。",[71,1339,1341],{"className":1272,"code":1340,"language":84,"meta":79,"style":79},"\u003C!-- バンドル前 -->\n\u003Cimg src=\"~\u002Fimg\u002Fimage.png\"\u002F>\n\n\u003C!-- Module not found -->\n",[52,1342,1343,1347,1366,1370],{"__ignoreMap":79},[136,1344,1345],{"class":138,"line":139},[136,1346,1280],{"class":149},[136,1348,1349,1351,1353,1355,1357,1359,1362,1364],{"class":138,"line":146},[136,1350,1285],{"class":164},[136,1352,1288],{"class":191},[136,1354,1291],{"class":156},[136,1356,165],{"class":164},[136,1358,328],{"class":164},[136,1360,1361],{"class":207},"~\u002Fimg\u002Fimage.png",[136,1363,328],{"class":164},[136,1365,1303],{"class":164},[136,1367,1368],{"class":138,"line":153},[136,1369,143],{"emptyLinePlaceholder":142},[136,1371,1372],{"class":138,"line":4},[136,1373,1374],{"class":149},"\u003C!-- Module not found -->\n",[13,1376,1377,1378,1380,1381,1383],{},"しかし対処法はあります。",[52,1379,131],{},"の",[52,1382,843],{},"にrootsプロパティーを記述します。",[71,1385,1387],{"className":129,"code":1386,"filename":131,"language":132,"meta":79,"style":79},"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",[52,1388,1389,1399,1407,1455,1464,1497,1502,1507,1537,1541],{"__ignoreMap":79},[136,1390,1391,1393,1395,1397],{"class":138,"line":139},[136,1392,284],{"class":156},[136,1394,287],{"class":160},[136,1396,165],{"class":164},[136,1398,231],{"class":164},[136,1400,1401,1404],{"class":138,"line":146},[136,1402,1403],{"class":191},"    resolve",[136,1405,1406],{"class":164},":{\n",[136,1408,1409,1412,1414,1417,1419,1422,1424,1426,1428,1431,1433,1435,1437,1440,1442,1444,1446,1449,1451,1453],{"class":138,"line":153},[136,1410,1411],{"class":191},"        extensions",[136,1413,195],{"class":164},[136,1415,1416],{"class":160}," [",[136,1418,247],{"class":164},[136,1420,1421],{"class":207},".js",[136,1423,247],{"class":164},[136,1425,849],{"class":164},[136,1427,242],{"class":164},[136,1429,1430],{"class":207},".json",[136,1432,247],{"class":164},[136,1434,849],{"class":164},[136,1436,242],{"class":164},[136,1438,1439],{"class":207},".scss",[136,1441,247],{"class":164},[136,1443,849],{"class":164},[136,1445,242],{"class":164},[136,1447,1448],{"class":207},".css",[136,1450,247],{"class":164},[136,1452,785],{"class":160},[136,1454,220],{"class":164},[136,1456,1457,1460,1462],{"class":138,"line":4},[136,1458,1459],{"class":191},"        alias",[136,1461,195],{"class":164},[136,1463,231],{"class":164},[136,1465,1466,1469,1472,1474,1476,1479,1481,1483,1485,1487,1489,1491,1493,1495],{"class":138,"line":176},[136,1467,1468],{"class":164},"            '",[136,1470,1471],{"class":191},"~",[136,1473,247],{"class":164},[136,1475,195],{"class":164},[136,1477,1478],{"class":160}," path",[136,1480,688],{"class":164},[136,1482,843],{"class":452},[136,1484,846],{"class":160},[136,1486,849],{"class":164},[136,1488,242],{"class":164},[136,1490,58],{"class":207},[136,1492,247],{"class":164},[136,1494,210],{"class":160},[136,1496,220],{"class":164},[136,1498,1499],{"class":138,"line":182},[136,1500,1501],{"class":164},"        },\n",[136,1503,1504],{"class":138,"line":188},[136,1505,1506],{"class":149},"        \u002F\u002F ↓追加！\n",[136,1508,1509,1512,1514,1517,1519,1521,1523,1525,1528,1530,1532,1535],{"class":138,"line":223},[136,1510,1511],{"class":191},"        roots",[136,1513,195],{"class":164},[136,1515,1516],{"class":160}," [path",[136,1518,688],{"class":164},[136,1520,843],{"class":452},[136,1522,846],{"class":160},[136,1524,849],{"class":164},[136,1526,1527],{"class":164}," \"",[136,1529,58],{"class":207},[136,1531,328],{"class":164},[136,1533,1534],{"class":160},")]",[136,1536,220],{"class":164},[136,1538,1539],{"class":138,"line":234},[136,1540,261],{"class":164},[136,1542,1543],{"class":138,"line":252},[136,1544,395],{"class":164},[13,1546,1547],{},"このrootsプロパティを追加した後、パスは以下のようにします。",[71,1549,1551],{"className":1272,"code":1550,"language":84,"meta":79,"style":79},"\u003C!-- バンドル前 -->\n\u003Cimg src=\"\u002Fimg\u002Fimage.png\"\u002F>\n\n\u003C!-- バンドル後 -->\n\u003Cimg src=\"img\u002Fimage.png\"\u002F>\n",[52,1552,1553,1557,1576,1580,1584],{"__ignoreMap":79},[136,1554,1555],{"class":138,"line":139},[136,1556,1280],{"class":149},[136,1558,1559,1561,1563,1565,1567,1569,1572,1574],{"class":138,"line":146},[136,1560,1285],{"class":164},[136,1562,1288],{"class":191},[136,1564,1291],{"class":156},[136,1566,165],{"class":164},[136,1568,328],{"class":164},[136,1570,1571],{"class":207},"\u002Fimg\u002Fimage.png",[136,1573,328],{"class":164},[136,1575,1303],{"class":164},[136,1577,1578],{"class":138,"line":153},[136,1579,143],{"emptyLinePlaceholder":142},[136,1581,1582],{"class":138,"line":4},[136,1583,1312],{"class":149},[136,1585,1586,1588,1590,1592,1594,1596,1599,1601],{"class":138,"line":176},[136,1587,1285],{"class":164},[136,1589,1288],{"class":191},[136,1591,1291],{"class":156},[136,1593,165],{"class":164},[136,1595,328],{"class":164},[136,1597,1598],{"class":207},"img\u002Fimage.png",[136,1600,328],{"class":164},[136,1602,1303],{"class":164},[13,1604,1605,1608,1609,1611,1612,1615],{},[52,1606,1607],{},"roots: [path.resolve(__dirname, \"src\")],","によって",[52,1610,1571],{},"のパスを",[52,1613,1614],{},"src\u002F","を基準に探してくれるようになります。HTMLの場合はこのようにして画像を指定します。",[39,1617,1619],{"id":1618},"pugでhtmlファイルをバンドルする","pugでHTMLファイルをバンドルする",[13,1621,1622,1623,1625],{},"ひとまず以上の設定でhtmlファイルが使用できるようになりました。",[52,1624,960],{},"配下で必要なページ分だけのHTMLを作成して、スタイルはscss、jsも一つにまとめられてスマートに見えます。しかし、繰り返しの記述をしたりテンプレートを作成してより効率的に描きたい時もあると思います。そんな時、テンプレートエンジンと呼ばれるものを使用することでより効率よくマークアップができるようになります。今回はpugを用います。（他の候補としてEJSなどがある）",[98,1627,1628],{"id":1628},"pugの使い方",[13,1630,1631],{},"今回は詳しい説明は省略しますが、概要的に伝えます。pugは以下のような記述でhtmlのマークアップが可能です。",[13,1633,1634],{},"レイアウトテンプレートファイル",[71,1636,1641],{"className":1637,"code":1638,"filename":1639,"language":1640,"meta":79,"style":79},"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",[52,1642,1643,1648,1653,1658,1663,1668,1673,1678,1683,1687,1692,1697,1701,1706,1711,1716,1721],{"__ignoreMap":79},[136,1644,1645],{"class":138,"line":139},[136,1646,1647],{},"doctype html\n",[136,1649,1650],{"class":138,"line":146},[136,1651,1652],{},"html(lang=\"ja\")\n",[136,1654,1655],{"class":138,"line":153},[136,1656,1657],{},"    block head\n",[136,1659,1660],{"class":138,"line":4},[136,1661,1662],{},"        include ..\u002Fcomponents\u002Fhead_conf\n",[136,1664,1665],{"class":138,"line":176},[136,1666,1667],{},"    body\n",[136,1669,1670],{"class":138,"line":182},[136,1671,1672],{},"        .body-wrapper\n",[136,1674,1675],{"class":138,"line":188},[136,1676,1677],{},"            block header\n",[136,1679,1680],{"class":138,"line":223},[136,1681,1682],{},"                include ..\u002Fcomponents\u002Fheader\n",[136,1684,1685],{"class":138,"line":234},[136,1686,143],{"emptyLinePlaceholder":142},[136,1688,1689],{"class":138,"line":252},[136,1690,1691],{},"            main.p-main-content\n",[136,1693,1694],{"class":138,"line":258},[136,1695,1696],{},"                block content\n",[136,1698,1699],{"class":138,"line":264},[136,1700,143],{"emptyLinePlaceholder":142},[136,1702,1703],{"class":138,"line":270},[136,1704,1705],{},"            block footer\n",[136,1707,1708],{"class":138,"line":276},[136,1709,1710],{},"                include ..\u002Fcomponents\u002Ffooter\n",[136,1712,1713],{"class":138,"line":281},[136,1714,1715],{},"            \n",[136,1717,1718],{"class":138,"line":297},[136,1719,1720],{},"            block footerNav \n",[136,1722,1723],{"class":138,"line":314},[136,1724,1725],{},"                include ..\u002Fcomponents\u002FfooterNav\n",[13,1727,1728,1729,1732],{},"main配下のページ内容（上記のテンプレートファイルの",[52,1730,1731],{},"block content","に展開）",[71,1734,1737],{"className":1637,"code":1735,"filename":1736,"language":1640,"meta":79,"style":79},"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",[52,1738,1739,1744,1749,1754,1759,1763,1768,1773,1778,1783,1788,1793,1798,1802,1806,1810,1814,1819,1824,1829,1834],{"__ignoreMap":79},[136,1740,1741],{"class":138,"line":139},[136,1742,1743],{},"extends ..\u002Flayouts\u002Fdefault.pug\n",[136,1745,1746],{"class":138,"line":146},[136,1747,1748],{},"include ..\u002Fcomponents\u002Fbadge\n",[136,1750,1751],{"class":138,"line":153},[136,1752,1753],{},"    include ..\u002Fcomponents\u002F_data\n",[136,1755,1756],{"class":138,"line":4},[136,1757,1758],{},"        - var recommneds = variables.recommneds\n",[136,1760,1761],{"class":138,"line":176},[136,1762,143],{"emptyLinePlaceholder":142},[136,1764,1765],{"class":138,"line":182},[136,1766,1767],{},"block content\n",[136,1769,1770],{"class":138,"line":188},[136,1771,1772],{},"    .p-first-view-content\n",[136,1774,1775],{"class":138,"line":223},[136,1776,1777],{},"        .p-sliders.swiper(id=\"top-slider\")\n",[136,1779,1780],{"class":138,"line":234},[136,1781,1782],{},"            .p-slider-wrapper.swiper-wrapper\n",[136,1784,1785],{"class":138,"line":252},[136,1786,1787],{},"                .c-slider.swiper-slide\n",[136,1789,1790],{"class":138,"line":258},[136,1791,1792],{},"                    .c-img-adjuster\n",[136,1794,1795],{"class":138,"line":264},[136,1796,1797],{},"                        img(src=require(\"~\u002Fimg\u002Fsample\u002Ftop_slider_img.jpg\"), alt=\"スライダーの写真\")\n",[136,1799,1800],{"class":138,"line":270},[136,1801,1787],{},[136,1803,1804],{"class":138,"line":276},[136,1805,1792],{},[136,1807,1808],{"class":138,"line":281},[136,1809,1797],{},[136,1811,1812],{"class":138,"line":297},[136,1813,341],{},[136,1815,1816],{"class":138,"line":314},[136,1817,1818],{},"    div.p-fullfilled\n",[136,1820,1821],{"class":138,"line":320},[136,1822,1823],{},"        .p-row-container\n",[136,1825,1826],{"class":138,"line":338},[136,1827,1828],{},"            .p-row-wrapper\n",[136,1830,1831],{"class":138,"line":344},[136,1832,1833],{},"                each val,index in recommneds\n",[136,1835,1836],{"class":138,"line":354},[136,1837,1838],{},"                    +badge(val,\"recommend-\"+index)\n",[13,1840,1841],{},"for文によるループ、テンプレート、mixinやインポートなどPHPなどバック側で行っていたような、htmlの構築ができます。laravelのbladeみたいな感じです。pugを使うことでhtmlで面倒と思っていたことは大体解消できます。変更にも強いのでpugは使うことをお勧めします。",[98,1843,1844],{"id":1844},"ディレクトリを少し変更",[13,1846,1847,1848,1850],{},"htmlの時は単に",[52,1849,960],{},"配下にファイルを配置するだけでしたが、もう少しpugで管理しやすいように以下のように変更します。",[71,1852,1855],{"className":1853,"code":1854,"language":76},[74],".\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",[52,1856,1854],{"__ignoreMap":79},[13,1858,1859,849,1862,849,1865,1868,1869,1871,1872,1874,1875,1877],{},[52,1860,1861],{},"component",[52,1863,1864],{},"layout",[52,1866,1867],{},"page",",というものを追加しました。",[52,1870,1861],{},"は繰り返し使われるパーツ（ボタンとかカードとか）のpugを格納、",[52,1873,1864],{},"はhead,bodyの構成を含めたmainタグ以外の箇所のレイアウトを決めるpugを格納し、",[52,1876,1867],{},"にバンドル対象の各種ページのpugを配置します。",[13,1879,1880,1882,1883,89,1886,1889,1890,1892],{},[52,1881,1867],{},"に先ほどの",[52,1884,1885],{},"index.pug",[52,1887,1888],{}," detail.pug","を配置して、最終的にhtmlにして",[52,1891,54],{},"に配置します。適宜component、layoutからファイルをインポートして使用します。私は大体のプロジェクトはこれで十分なカバーできる気がします。",[98,1894,1895],{"id":1895},"webpackでpugを扱う",[13,1897,1898],{},"それではwebpackでpugを扱えるようにしましょう。以下のloaderとpluginを入れます。",[71,1900,1903],{"className":1901,"code":1902,"language":76},[74],"npm install -D pug-loader html-webpack-plugin\n",[52,1904,1902],{"__ignoreMap":79},[13,1906,1907,1909],{},[52,1908,429],{}," はHTML編でここでは入っていれば入りません。",[13,1911,1912,1913,1915],{},"まずは",[52,1914,125],{},"にpugのruleとloaderを追加します。",[71,1917,1919],{"className":129,"code":1918,"filename":131,"language":132,"meta":79,"style":79},"\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",[52,1920,1921,1925,1929,1939,1943,1947,1951,1969,1985,1993,1998,2013,2022,2034,2039,2044,2049,2054,2058,2062,2066,2078,2092,2096,2110,2114,2122,2130,2134,2138,2148,2152,2156,2160,2164],{"__ignoreMap":79},[136,1922,1923],{"class":138,"line":139},[136,1924,143],{"emptyLinePlaceholder":142},[136,1926,1927],{"class":138,"line":146},[136,1928,150],{"class":149},[136,1930,1931,1933,1935,1937],{"class":138,"line":153},[136,1932,157],{"class":156},[136,1934,161],{"class":160},[136,1936,165],{"class":164},[136,1938,168],{"class":160},[136,1940,1941],{"class":138,"line":4},[136,1942,173],{"class":149},[136,1944,1945],{"class":138,"line":176},[136,1946,179],{"class":149},[136,1948,1949],{"class":138,"line":182},[136,1950,185],{"class":164},[136,1952,1953,1955,1957,1959,1961,1963,1965,1967],{"class":138,"line":188},[136,1954,192],{"class":191},[136,1956,195],{"class":164},[136,1958,198],{"class":164},[136,1960,201],{"class":160},[136,1962,1640],{"class":207},[136,1964,214],{"class":213},[136,1966,217],{"class":164},[136,1968,220],{"class":164},[136,1970,1971,1974,1976,1978,1981,1983],{"class":138,"line":223},[136,1972,1973],{"class":191},"        exclude",[136,1975,195],{"class":164},[136,1977,198],{"class":164},[136,1979,1980],{"class":207},"node_modules",[136,1982,217],{"class":164},[136,1984,220],{"class":164},[136,1986,1987,1989,1991],{"class":138,"line":234},[136,1988,226],{"class":191},[136,1990,195],{"class":164},[136,1992,168],{"class":160},[136,1994,1995],{"class":138,"line":252},[136,1996,1997],{"class":164},"          {\n",[136,1999,2000,2002,2004,2006,2009,2011],{"class":138,"line":258},[136,2001,237],{"class":191},[136,2003,195],{"class":164},[136,2005,242],{"class":164},[136,2007,2008],{"class":207},"pug-loader",[136,2010,247],{"class":164},[136,2012,220],{"class":164},[136,2014,2015,2018,2020],{"class":138,"line":264},[136,2016,2017],{"class":191},"            options",[136,2019,195],{"class":164},[136,2021,231],{"class":164},[136,2023,2024,2027,2029,2032],{"class":138,"line":270},[136,2025,2026],{"class":191},"              pretty",[136,2028,195],{"class":164},[136,2030,2031],{"class":913}," true",[136,2033,220],{"class":164},[136,2035,2036],{"class":138,"line":276},[136,2037,2038],{"class":164},"            }\n",[136,2040,2041],{"class":138,"line":281},[136,2042,2043],{"class":164},"          }\n",[136,2045,2046],{"class":138,"line":297},[136,2047,2048],{"class":160},"        ]\n",[136,2050,2051],{"class":138,"line":314},[136,2052,2053],{"class":164},"    }\n",[136,2055,2056],{"class":138,"line":320},[136,2057,267],{"class":149},[136,2059,2060],{"class":138,"line":338},[136,2061,273],{"class":160},[136,2063,2064],{"class":138,"line":344},[136,2065,143],{"emptyLinePlaceholder":142},[136,2067,2068,2070,2072,2074,2076],{"class":138,"line":354},[136,2069,284],{"class":156},[136,2071,287],{"class":160},[136,2073,165],{"class":164},[136,2075,292],{"class":164},[136,2077,231],{"class":164},[136,2079,2080,2082,2084,2086,2088,2090],{"class":138,"line":365},[136,2081,300],{"class":191},[136,2083,195],{"class":164},[136,2085,242],{"class":164},[136,2087,307],{"class":207},[136,2089,247],{"class":164},[136,2091,220],{"class":164},[136,2093,2094],{"class":138,"line":370},[136,2095,317],{"class":160},[136,2097,2098,2100,2102,2104,2106,2108],{"class":138,"line":375},[136,2099,323],{"class":191},[136,2101,195],{"class":164},[136,2103,328],{"class":164},[136,2105,331],{"class":207},[136,2107,328],{"class":164},[136,2109,220],{"class":164},[136,2111,2112],{"class":138,"line":387},[136,2113,341],{"class":160},[136,2115,2116,2118,2120],{"class":138,"line":392},[136,2117,347],{"class":191},[136,2119,195],{"class":164},[136,2121,231],{"class":164},[136,2123,2124,2126,2128],{"class":138,"line":398},[136,2125,357],{"class":191},[136,2127,195],{"class":164},[136,2129,362],{"class":160},[136,2131,2132],{"class":138,"line":404},[136,2133,261],{"class":164},[136,2135,2136],{"class":138,"line":409},[136,2137,143],{"emptyLinePlaceholder":142},[136,2139,2140,2142,2144,2146],{"class":138,"line":736},[136,2141,378],{"class":191},[136,2143,195],{"class":164},[136,2145,125],{"class":160},[136,2147,220],{"class":164},[136,2149,2150],{"class":138,"line":790},[136,2151,267],{"class":149},[136,2153,2154],{"class":138,"line":795},[136,2155,395],{"class":164},[136,2157,2158],{"class":138,"line":814},[136,2159,401],{"class":149},[136,2161,2162],{"class":138,"line":828},[136,2163,143],{"emptyLinePlaceholder":142},[136,2165,2166,2168,2170,2172],{"class":138,"line":876},[136,2167,412],{"class":164},[136,2169,292],{"class":164},[136,2171,417],{"class":160},[136,2173,420],{"class":164},[13,2175,2176],{},"次に",[71,2178,2180],{"className":129,"code":2179,"filename":131,"language":132,"meta":79,"style":79},"\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",[52,2181,2182,2186,2208,2230,2234,2238,2260,2282,2286,2296,2300,2304,2308,2320,2334,2338,2352,2356,2364,2372,2376,2380,2390,2394,2398,2402,2406,2434,2463,2471,2475,2496,2565,2579,2589,2627,2641,2651,2659,2665,2669,2677,2681],{"__ignoreMap":79},[136,2183,2184],{"class":138,"line":139},[136,2185,440],{"class":149},[136,2187,2188,2190,2192,2194,2196,2198,2200,2202,2204,2206],{"class":138,"line":146},[136,2189,284],{"class":156},[136,2191,447],{"class":160},[136,2193,165],{"class":164},[136,2195,453],{"class":452},[136,2197,204],{"class":160},[136,2199,247],{"class":164},[136,2201,460],{"class":207},[136,2203,247],{"class":164},[136,2205,210],{"class":160},[136,2207,420],{"class":164},[136,2209,2210,2212,2214,2216,2218,2220,2222,2224,2226,2228],{"class":138,"line":153},[136,2211,284],{"class":156},[136,2213,473],{"class":160},[136,2215,165],{"class":164},[136,2217,453],{"class":452},[136,2219,204],{"class":160},[136,2221,247],{"class":164},[136,2223,484],{"class":207},[136,2225,247],{"class":164},[136,2227,210],{"class":160},[136,2229,420],{"class":164},[136,2231,2232],{"class":138,"line":4},[136,2233,143],{"emptyLinePlaceholder":142},[136,2235,2236],{"class":138,"line":176},[136,2237,499],{"class":149},[136,2239,2240,2242,2244,2246,2248,2250,2252,2254,2256,2258],{"class":138,"line":182},[136,2241,284],{"class":156},[136,2243,506],{"class":160},[136,2245,165],{"class":164},[136,2247,453],{"class":452},[136,2249,204],{"class":160},[136,2251,247],{"class":164},[136,2253,517],{"class":207},[136,2255,247],{"class":164},[136,2257,210],{"class":160},[136,2259,420],{"class":164},[136,2261,2262,2264,2266,2268,2270,2272,2274,2276,2278,2280],{"class":138,"line":188},[136,2263,284],{"class":156},[136,2265,530],{"class":160},[136,2267,165],{"class":164},[136,2269,453],{"class":452},[136,2271,204],{"class":160},[136,2273,247],{"class":164},[136,2275,429],{"class":207},[136,2277,247],{"class":164},[136,2279,210],{"class":160},[136,2281,420],{"class":164},[136,2283,2284],{"class":138,"line":223},[136,2285,143],{"emptyLinePlaceholder":142},[136,2287,2288,2290,2292,2294],{"class":138,"line":234},[136,2289,157],{"class":156},[136,2291,161],{"class":160},[136,2293,165],{"class":164},[136,2295,168],{"class":160},[136,2297,2298],{"class":138,"line":252},[136,2299,565],{"class":149},[136,2301,2302],{"class":138,"line":258},[136,2303,273],{"class":160},[136,2305,2306],{"class":138,"line":264},[136,2307,143],{"emptyLinePlaceholder":142},[136,2309,2310,2312,2314,2316,2318],{"class":138,"line":270},[136,2311,284],{"class":156},[136,2313,287],{"class":160},[136,2315,165],{"class":164},[136,2317,292],{"class":164},[136,2319,231],{"class":164},[136,2321,2322,2324,2326,2328,2330,2332],{"class":138,"line":276},[136,2323,300],{"class":191},[136,2325,195],{"class":164},[136,2327,242],{"class":164},[136,2329,307],{"class":207},[136,2331,247],{"class":164},[136,2333,220],{"class":164},[136,2335,2336],{"class":138,"line":281},[136,2337,317],{"class":160},[136,2339,2340,2342,2344,2346,2348,2350],{"class":138,"line":297},[136,2341,323],{"class":191},[136,2343,195],{"class":164},[136,2345,328],{"class":164},[136,2347,331],{"class":207},[136,2349,328],{"class":164},[136,2351,220],{"class":164},[136,2353,2354],{"class":138,"line":314},[136,2355,341],{"class":160},[136,2357,2358,2360,2362],{"class":138,"line":320},[136,2359,347],{"class":191},[136,2361,195],{"class":164},[136,2363,231],{"class":164},[136,2365,2366,2368,2370],{"class":138,"line":338},[136,2367,357],{"class":191},[136,2369,195],{"class":164},[136,2371,362],{"class":160},[136,2373,2374],{"class":138,"line":344},[136,2375,261],{"class":164},[136,2377,2378],{"class":138,"line":354},[136,2379,143],{"emptyLinePlaceholder":142},[136,2381,2382,2384,2386,2388],{"class":138,"line":365},[136,2383,378],{"class":191},[136,2385,195],{"class":164},[136,2387,125],{"class":160},[136,2389,220],{"class":164},[136,2391,2392],{"class":138,"line":370},[136,2393,660],{"class":149},[136,2395,2396],{"class":138,"line":375},[136,2397,395],{"class":164},[136,2399,2400],{"class":138,"line":387},[136,2401,143],{"emptyLinePlaceholder":142},[136,2403,2404],{"class":138,"line":392},[136,2405,673],{"class":149},[136,2407,2408,2410,2413,2415,2417,2419,2421,2423,2425,2428,2430,2432],{"class":138,"line":398},[136,2409,284],{"class":156},[136,2411,2412],{"class":160}," pugFiles ",[136,2414,165],{"class":164},[136,2416,685],{"class":160},[136,2418,688],{"class":164},[136,2420,691],{"class":452},[136,2422,204],{"class":160},[136,2424,247],{"class":164},[136,2426,2427],{"class":207},"src\u002Fhtml\u002Fpage\u002F*",[136,2429,247],{"class":164},[136,2431,849],{"class":164},[136,2433,231],{"class":164},[136,2435,2436,2439,2441,2444,2446,2449,2451,2453,2455,2458,2460],{"class":138,"line":404},[136,2437,2438],{"class":191},"    ignore",[136,2440,195],{"class":164},[136,2442,2443],{"class":160}," [ ",[136,2445,247],{"class":164},[136,2447,2448],{"class":207},"src\u002Fhtml\u002Fcomponents\u002F*",[136,2450,247],{"class":164},[136,2452,849],{"class":164},[136,2454,247],{"class":164},[136,2456,2457],{"class":207},"src\u002Fhtml.layouts\u002F*",[136,2459,247],{"class":164},[136,2461,2462],{"class":160}," ]\n",[136,2464,2465,2467,2469],{"class":138,"line":409},[136,2466,860],{"class":164},[136,2468,210],{"class":160},[136,2470,420],{"class":164},[136,2472,2473],{"class":138,"line":736},[136,2474,143],{"emptyLinePlaceholder":142},[136,2476,2477,2480,2482,2484,2486,2488,2490,2492,2494],{"class":138,"line":790},[136,2478,2479],{"class":160},"pugFiles",[136,2481,688],{"class":164},[136,2483,718],{"class":452},[136,2485,204],{"class":160},[136,2487,204],{"class":164},[136,2489,1640],{"class":725},[136,2491,210],{"class":164},[136,2493,731],{"class":156},[136,2495,231],{"class":164},[136,2497,2498,2500,2503,2505,2508,2510,2512,2514,2516,2518,2520,2522,2524,2526,2528,2530,2532,2534,2536,2538,2540,2543,2545,2547,2550,2552,2554,2556,2559,2561,2563],{"class":138,"line":795},[136,2499,739],{"class":156},[136,2501,2502],{"class":160}," html",[136,2504,292],{"class":164},[136,2506,2507],{"class":160}," pug",[136,2509,688],{"class":164},[136,2511,752],{"class":452},[136,2513,204],{"class":191},[136,2515,247],{"class":164},[136,2517,217],{"class":207},[136,2519,247],{"class":164},[136,2521,210],{"class":191},[136,2523,688],{"class":164},[136,2525,767],{"class":452},[136,2527,204],{"class":191},[136,2529,772],{"class":164},[136,2531,776],{"class":775},[136,2533,779],{"class":191},[136,2535,782],{"class":775},[136,2537,785],{"class":191},[136,2539,688],{"class":164},[136,2541,2542],{"class":452},"replace",[136,2544,204],{"class":191},[136,2546,247],{"class":164},[136,2548,2549],{"class":207},".pug",[136,2551,247],{"class":164},[136,2553,849],{"class":164},[136,2555,242],{"class":164},[136,2557,2558],{"class":207},".html",[136,2560,247],{"class":164},[136,2562,210],{"class":191},[136,2564,420],{"class":164},[136,2566,2567,2569,2571,2573,2575,2577],{"class":138,"line":814},[136,2568,798],{"class":160},[136,2570,688],{"class":164},[136,2572,803],{"class":160},[136,2574,688],{"class":164},[136,2576,808],{"class":452},[136,2578,811],{"class":191},[136,2580,2581,2583,2585,2587],{"class":138,"line":828},[136,2582,817],{"class":164},[136,2584,820],{"class":452},[136,2586,204],{"class":191},[136,2588,825],{"class":164},[136,2590,2591,2593,2595,2597,2599,2601,2603,2605,2607,2609,2611,2613,2615,2617,2619,2621,2623,2625],{"class":138,"line":876},[136,2592,831],{"class":191},[136,2594,195],{"class":164},[136,2596,836],{"class":164},[136,2598,484],{"class":160},[136,2600,688],{"class":164},[136,2602,843],{"class":452},[136,2604,846],{"class":160},[136,2606,849],{"class":164},[136,2608,242],{"class":164},[136,2610,54],{"class":207},[136,2612,247],{"class":164},[136,2614,210],{"class":160},[136,2616,860],{"class":164},[136,2618,217],{"class":207},[136,2620,865],{"class":164},[136,2622,84],{"class":160},[136,2624,871],{"class":164},[136,2626,220],{"class":164},[136,2628,2629,2631,2633,2635,2637,2639],{"class":138,"line":893},[136,2630,879],{"class":191},[136,2632,195],{"class":164},[136,2634,247],{"class":164},[136,2636,886],{"class":207},[136,2638,247],{"class":164},[136,2640,220],{"class":164},[136,2642,2643,2645,2647,2649],{"class":138,"line":905},[136,2644,896],{"class":191},[136,2646,195],{"class":164},[136,2648,2507],{"class":160},[136,2650,220],{"class":164},[136,2652,2653,2655,2657],{"class":138,"line":917},[136,2654,908],{"class":191},[136,2656,195],{"class":164},[136,2658,914],{"class":913},[136,2660,2661,2663],{"class":138,"line":926},[136,2662,920],{"class":164},[136,2664,923],{"class":191},[136,2666,2667],{"class":138,"line":932},[136,2668,929],{"class":191},[136,2670,2671,2673,2675],{"class":138,"line":941},[136,2672,860],{"class":164},[136,2674,210],{"class":160},[136,2676,420],{"class":164},[136,2678,2679],{"class":138,"line":946},[136,2680,143],{"emptyLinePlaceholder":142},[136,2682,2684,2686,2688,2690],{"class":138,"line":2683},43,[136,2685,412],{"class":164},[136,2687,292],{"class":164},[136,2689,417],{"class":160},[136,2691,420],{"class":164},[13,2693,2694],{},"詳細はHTML編の記述を見てください。HTML編と似ていますが、",[71,2696,2698],{"className":129,"code":2697,"language":132,"meta":79,"style":79},"const pugFiles = globule.find('src\u002Fhtml\u002F*', {\n    ignore: [ 'src\u002Fhtml\u002Fcomponents\u002F*','src\u002Fhtml.layouts\u002F*' ]\n});\n",[52,2699,2700,2727,2751],{"__ignoreMap":79},[136,2701,2702,2704,2706,2708,2710,2712,2714,2716,2718,2721,2723,2725],{"class":138,"line":139},[136,2703,284],{"class":156},[136,2705,2412],{"class":160},[136,2707,165],{"class":164},[136,2709,685],{"class":160},[136,2711,688],{"class":164},[136,2713,691],{"class":452},[136,2715,204],{"class":160},[136,2717,247],{"class":164},[136,2719,2720],{"class":207},"src\u002Fhtml\u002F*",[136,2722,247],{"class":164},[136,2724,849],{"class":164},[136,2726,231],{"class":164},[136,2728,2729,2731,2733,2735,2737,2739,2741,2743,2745,2747,2749],{"class":138,"line":146},[136,2730,2438],{"class":191},[136,2732,195],{"class":164},[136,2734,2443],{"class":160},[136,2736,247],{"class":164},[136,2738,2448],{"class":207},[136,2740,247],{"class":164},[136,2742,849],{"class":164},[136,2744,247],{"class":164},[136,2746,2457],{"class":207},[136,2748,247],{"class":164},[136,2750,2462],{"class":160},[136,2752,2753,2755,2757],{"class":138,"line":153},[136,2754,860],{"class":164},[136,2756,210],{"class":160},[136,2758,420],{"class":164},[13,2760,2761,2763,2764,2767,2768,2770],{},[52,2762,517],{},"では",[52,2765,2766],{},"ignore","を指定して全てのpugファイルを拾わないようにします。（今回の構成ならfindするディレクトリを ",[52,2769,2427],{}," にしてもいいかもしれません）",[13,2772,2773],{},"基本的にはこれでpugは使えるようになります。",[98,2775,2776],{"id":2776},"pugでの画像パスの解決",[13,2778,2779,2780,2782,2783,2786],{},"HTMLでは",[52,2781,843],{},"で",[52,2784,2785],{},"roots","を指定していました。pugではそれらの指定は特に必要なく、以下のように指定します。",[71,2788,2790],{"className":1637,"code":2789,"language":1640,"meta":79,"style":79},"\u002F\u002F- OK\nimg(src=require(\"~\u002Fimg\u002Fsample.png\"), alt=\"\")\n\n\u002F\u002F- NG\nimg(src=\"~\u002Fimg\u002Fsample.png\", alt=\"\")\n",[52,2791,2792,2797,2802,2806,2811],{"__ignoreMap":79},[136,2793,2794],{"class":138,"line":139},[136,2795,2796],{},"\u002F\u002F- OK\n",[136,2798,2799],{"class":138,"line":146},[136,2800,2801],{},"img(src=require(\"~\u002Fimg\u002Fsample.png\"), alt=\"\")\n",[136,2803,2804],{"class":138,"line":153},[136,2805,143],{"emptyLinePlaceholder":142},[136,2807,2808],{"class":138,"line":4},[136,2809,2810],{},"\u002F\u002F- NG\n",[136,2812,2813],{"class":138,"line":176},[136,2814,2815],{},"img(src=\"~\u002Fimg\u002Fsample.png\", alt=\"\")\n",[13,2817,2818],{},"pugではnode.jsやjsの記述が利用できる為、requireを用いてエイリアスと一緒にパスの解決ができます。",[39,2820,2822],{"id":2821},"以上","以上！",[13,2824,2825,2826,2828],{},"以上でwebpackを用いたjs,scss,画像,htmlのバンドルは以上となります。vueやtypecriptの導入を考えるとさらに深い理解は必要そうですが、ひとまずHTMLのマークアップ程度であれば今回の構成を用いれば十分な気がします。vue・typesciptもいずれやってみようと思います。また今回使用した",[52,2827,131],{},"は以下の通りとなります。参考にどうぞ。",[71,2830,2832],{"className":129,"code":2831,"filename":131,"language":132,"meta":79,"style":79},"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",[52,2833,2834,2856,2878,2900,2922,2926,2936,2940,2977,2991,2999,3011,3016,3032,3052,3057,3068,3075,3079,3083,3124,3133,3148,3152,3166,3170,3174,3196,3204,3218,3222,3227,3231,3249,3263,3271,3275,3289,3297,3307,3311,3315,3319,3323,3328,3333,3354,3365,3371,3398,3421,3431,3448,3458,3477,3483,3488,3498,3513,3518,3523,3528,3533,3538,3549,3570,3575,3596,3601,3610,3619,3624,3631,3674,3683,3715,3720,3747,3752,3758,3768,3774,3797,3812,3817,3827,3840,3854,3864,3870,3876,3881,3908,3933,3942,3947,3968,4033,4048,4059,4098,4113,4124,4133,4140,4145,4154,4159],{"__ignoreMap":79},[136,2835,2836,2838,2840,2842,2844,2846,2848,2850,2852,2854],{"class":138,"line":139},[136,2837,284],{"class":156},[136,2839,447],{"class":160},[136,2841,165],{"class":164},[136,2843,453],{"class":452},[136,2845,204],{"class":160},[136,2847,247],{"class":164},[136,2849,460],{"class":207},[136,2851,247],{"class":164},[136,2853,210],{"class":160},[136,2855,420],{"class":164},[136,2857,2858,2860,2862,2864,2866,2868,2870,2872,2874,2876],{"class":138,"line":146},[136,2859,284],{"class":156},[136,2861,473],{"class":160},[136,2863,165],{"class":164},[136,2865,453],{"class":452},[136,2867,204],{"class":160},[136,2869,247],{"class":164},[136,2871,484],{"class":207},[136,2873,247],{"class":164},[136,2875,210],{"class":160},[136,2877,420],{"class":164},[136,2879,2880,2882,2884,2886,2888,2890,2892,2894,2896,2898],{"class":138,"line":153},[136,2881,284],{"class":156},[136,2883,506],{"class":160},[136,2885,165],{"class":164},[136,2887,453],{"class":452},[136,2889,204],{"class":160},[136,2891,247],{"class":164},[136,2893,517],{"class":207},[136,2895,247],{"class":164},[136,2897,210],{"class":160},[136,2899,420],{"class":164},[136,2901,2902,2904,2906,2908,2910,2912,2914,2916,2918,2920],{"class":138,"line":4},[136,2903,284],{"class":156},[136,2905,530],{"class":160},[136,2907,165],{"class":164},[136,2909,453],{"class":452},[136,2911,204],{"class":160},[136,2913,247],{"class":164},[136,2915,429],{"class":207},[136,2917,247],{"class":164},[136,2919,210],{"class":160},[136,2921,420],{"class":164},[136,2923,2924],{"class":138,"line":176},[136,2925,317],{"class":160},[136,2927,2928,2930,2932,2934],{"class":138,"line":182},[136,2929,157],{"class":156},[136,2931,161],{"class":160},[136,2933,165],{"class":164},[136,2935,168],{"class":160},[136,2937,2938],{"class":138,"line":188},[136,2939,185],{"class":164},[136,2941,2942,2944,2946,2948,2950,2952,2955,2958,2961,2963,2966,2968,2971,2973,2975],{"class":138,"line":223},[136,2943,192],{"class":191},[136,2945,195],{"class":164},[136,2947,198],{"class":164},[136,2949,201],{"class":160},[136,2951,204],{"class":164},[136,2953,2954],{"class":207},"sa",[136,2956,2957],{"class":164},"|",[136,2959,2960],{"class":207},"sc",[136,2962,2957],{"class":164},[136,2964,2965],{"class":207},"c",[136,2967,210],{"class":164},[136,2969,2970],{"class":207},"ss",[136,2972,214],{"class":213},[136,2974,217],{"class":164},[136,2976,220],{"class":164},[136,2978,2979,2981,2983,2985,2987,2989],{"class":138,"line":234},[136,2980,1973],{"class":191},[136,2982,195],{"class":164},[136,2984,198],{"class":164},[136,2986,1980],{"class":207},[136,2988,217],{"class":164},[136,2990,220],{"class":164},[136,2992,2993,2995,2997],{"class":138,"line":252},[136,2994,226],{"class":191},[136,2996,195],{"class":164},[136,2998,168],{"class":160},[136,3000,3001,3004,3006,3009],{"class":138,"line":258},[136,3002,3003],{"class":160},"            MiniCssExtractPlugin",[136,3005,688],{"class":164},[136,3007,3008],{"class":160},"loader",[136,3010,220],{"class":164},[136,3012,3013],{"class":138,"line":264},[136,3014,3015],{"class":164},"            {\n",[136,3017,3018,3021,3023,3025,3028,3030],{"class":138,"line":270},[136,3019,3020],{"class":191},"                loader",[136,3022,195],{"class":164},[136,3024,242],{"class":164},[136,3026,3027],{"class":207},"css-loader",[136,3029,247],{"class":164},[136,3031,220],{"class":164},[136,3033,3034,3037,3039,3042,3045,3047,3049],{"class":138,"line":276},[136,3035,3036],{"class":191},"                options",[136,3038,195],{"class":164},[136,3040,3041],{"class":164}," {",[136,3043,3044],{"class":191}," url",[136,3046,195],{"class":164},[136,3048,2031],{"class":913},[136,3050,3051],{"class":164}," }\n",[136,3053,3054],{"class":138,"line":281},[136,3055,3056],{"class":164},"            },\n",[136,3058,3059,3061,3064,3066],{"class":138,"line":297},[136,3060,1468],{"class":164},[136,3062,3063],{"class":207},"sass-loader",[136,3065,247],{"class":164},[136,3067,220],{"class":164},[136,3069,3070,3073],{"class":138,"line":314},[136,3071,3072],{"class":160},"        ]",[136,3074,220],{"class":164},[136,3076,3077],{"class":138,"line":320},[136,3078,261],{"class":164},[136,3080,3081],{"class":138,"line":338},[136,3082,185],{"class":164},[136,3084,3085,3087,3089,3091,3093,3095,3098,3100,3103,3105,3108,3110,3113,3115,3117,3119,3122],{"class":138,"line":344},[136,3086,192],{"class":191},[136,3088,195],{"class":164},[136,3090,198],{"class":164},[136,3092,201],{"class":160},[136,3094,204],{"class":164},[136,3096,3097],{"class":207},"png",[136,3099,2957],{"class":164},[136,3101,3102],{"class":207},"jpg",[136,3104,2957],{"class":164},[136,3106,3107],{"class":207},"gif",[136,3109,2957],{"class":164},[136,3111,3112],{"class":207},"svg",[136,3114,210],{"class":164},[136,3116,214],{"class":213},[136,3118,217],{"class":164},[136,3120,3121],{"class":775},"i",[136,3123,220],{"class":164},[136,3125,3126,3129,3131],{"class":138,"line":354},[136,3127,3128],{"class":191},"        generator",[136,3130,195],{"class":164},[136,3132,231],{"class":164},[136,3134,3135,3138,3140,3142,3145],{"class":138,"line":365},[136,3136,3137],{"class":191},"            filename",[136,3139,195],{"class":164},[136,3141,242],{"class":164},[136,3143,3144],{"class":207},"img\u002F[name][ext][query]",[136,3146,3147],{"class":164},"'\n",[136,3149,3150],{"class":138,"line":370},[136,3151,1501],{"class":164},[136,3153,3154,3157,3159,3161,3164],{"class":138,"line":375},[136,3155,3156],{"class":191},"        type",[136,3158,195],{"class":164},[136,3160,242],{"class":164},[136,3162,3163],{"class":207},"asset\u002Fresource",[136,3165,3147],{"class":164},[136,3167,3168],{"class":138,"line":387},[136,3169,261],{"class":164},[136,3171,3172],{"class":138,"line":392},[136,3173,185],{"class":164},[136,3175,3176,3178,3180,3182,3184,3186,3188,3190,3192,3194],{"class":138,"line":398},[136,3177,192],{"class":191},[136,3179,195],{"class":164},[136,3181,198],{"class":164},[136,3183,201],{"class":160},[136,3185,204],{"class":164},[136,3187,84],{"class":207},[136,3189,210],{"class":164},[136,3191,214],{"class":213},[136,3193,217],{"class":164},[136,3195,220],{"class":164},[136,3197,3198,3200,3202],{"class":138,"line":404},[136,3199,226],{"class":191},[136,3201,195],{"class":164},[136,3203,231],{"class":164},[136,3205,3206,3208,3210,3212,3214,3216],{"class":138,"line":409},[136,3207,237],{"class":191},[136,3209,195],{"class":164},[136,3211,242],{"class":164},[136,3213,106],{"class":207},[136,3215,247],{"class":164},[136,3217,220],{"class":164},[136,3219,3220],{"class":138,"line":736},[136,3221,255],{"class":164},[136,3223,3224],{"class":138,"line":790},[136,3225,3226],{"class":164},"     },\n",[136,3228,3229],{"class":138,"line":795},[136,3230,185],{"class":164},[136,3232,3233,3235,3237,3239,3241,3243,3245,3247],{"class":138,"line":814},[136,3234,192],{"class":191},[136,3236,195],{"class":164},[136,3238,198],{"class":164},[136,3240,201],{"class":160},[136,3242,1640],{"class":207},[136,3244,214],{"class":213},[136,3246,217],{"class":164},[136,3248,220],{"class":164},[136,3250,3251,3253,3255,3257,3259,3261],{"class":138,"line":828},[136,3252,1973],{"class":191},[136,3254,195],{"class":164},[136,3256,198],{"class":164},[136,3258,1980],{"class":207},[136,3260,217],{"class":164},[136,3262,220],{"class":164},[136,3264,3265,3267,3269],{"class":138,"line":876},[136,3266,226],{"class":191},[136,3268,195],{"class":164},[136,3270,168],{"class":160},[136,3272,3273],{"class":138,"line":893},[136,3274,1997],{"class":164},[136,3276,3277,3279,3281,3283,3285,3287],{"class":138,"line":905},[136,3278,237],{"class":191},[136,3280,195],{"class":164},[136,3282,242],{"class":164},[136,3284,2008],{"class":207},[136,3286,247],{"class":164},[136,3288,220],{"class":164},[136,3290,3291,3293,3295],{"class":138,"line":917},[136,3292,2017],{"class":191},[136,3294,195],{"class":164},[136,3296,231],{"class":164},[136,3298,3299,3301,3303,3305],{"class":138,"line":926},[136,3300,2026],{"class":191},[136,3302,195],{"class":164},[136,3304,2031],{"class":913},[136,3306,220],{"class":164},[136,3308,3309],{"class":138,"line":932},[136,3310,2038],{"class":164},[136,3312,3313],{"class":138,"line":941},[136,3314,2043],{"class":164},[136,3316,3317],{"class":138,"line":946},[136,3318,2048],{"class":160},[136,3320,3321],{"class":138,"line":2683},[136,3322,2053],{"class":164},[136,3324,3326],{"class":138,"line":3325},44,[136,3327,273],{"class":160},[136,3329,3331],{"class":138,"line":3330},45,[136,3332,143],{"emptyLinePlaceholder":142},[136,3334,3336,3339,3342,3344,3347,3349,3352],{"class":138,"line":3335},46,[136,3337,3338],{"class":213},"if",[136,3340,3341],{"class":160},"(process",[136,3343,688],{"class":164},[136,3345,3346],{"class":160},"env",[136,3348,688],{"class":164},[136,3350,3351],{"class":160},"es5)",[136,3353,825],{"class":164},[136,3355,3357,3359,3361,3363],{"class":138,"line":3356},47,[136,3358,378],{"class":160},[136,3360,688],{"class":164},[136,3362,808],{"class":452},[136,3364,811],{"class":191},[136,3366,3368],{"class":138,"line":3367},48,[136,3369,3370],{"class":164},"        {\n",[136,3372,3374,3377,3379,3381,3383,3386,3389,3392,3394,3396],{"class":138,"line":3373},49,[136,3375,3376],{"class":191},"            test",[136,3378,195],{"class":164},[136,3380,198],{"class":164},[136,3382,201],{"class":160},[136,3384,3385],{"class":207},"m",[136,3387,3388],{"class":164},"?",[136,3390,3391],{"class":207},"js",[136,3393,214],{"class":213},[136,3395,217],{"class":164},[136,3397,220],{"class":164},[136,3399,3401,3404,3406,3409,3411,3413,3416,3419],{"class":138,"line":3400},50,[136,3402,3403],{"class":191},"            exclude",[136,3405,195],{"class":164},[136,3407,3408],{"class":164}," \u002F(",[136,3410,1980],{"class":207},[136,3412,2957],{"class":164},[136,3414,3415],{"class":207},"bower_components",[136,3417,3418],{"class":164},")\u002F",[136,3420,220],{"class":164},[136,3422,3424,3427,3429],{"class":138,"line":3423},51,[136,3425,3426],{"class":191},"            use",[136,3428,195],{"class":164},[136,3430,231],{"class":164},[136,3432,3434,3437,3439,3441,3444,3446],{"class":138,"line":3433},52,[136,3435,3436],{"class":191},"              loader",[136,3438,195],{"class":164},[136,3440,242],{"class":164},[136,3442,3443],{"class":207},"babel-loader",[136,3445,247],{"class":164},[136,3447,220],{"class":164},[136,3449,3451,3454,3456],{"class":138,"line":3450},53,[136,3452,3453],{"class":191},"              options",[136,3455,195],{"class":164},[136,3457,231],{"class":164},[136,3459,3461,3464,3466,3468,3470,3473,3475],{"class":138,"line":3460},54,[136,3462,3463],{"class":191},"                presets",[136,3465,195],{"class":164},[136,3467,1416],{"class":191},[136,3469,247],{"class":164},[136,3471,3472],{"class":207},"@babel\u002Fpreset-env",[136,3474,247],{"class":164},[136,3476,273],{"class":191},[136,3478,3480],{"class":138,"line":3479},55,[136,3481,3482],{"class":164},"              }\n",[136,3484,3486],{"class":138,"line":3485},56,[136,3487,3056],{"class":164},[136,3489,3491,3494,3496],{"class":138,"line":3490},57,[136,3492,3493],{"class":191},"            generator",[136,3495,195],{"class":164},[136,3497,231],{"class":164},[136,3499,3501,3504,3506,3508,3511],{"class":138,"line":3500},58,[136,3502,3503],{"class":191},"              filename",[136,3505,195],{"class":164},[136,3507,242],{"class":164},[136,3509,3510],{"class":207},"[name].js",[136,3512,3147],{"class":164},[136,3514,3516],{"class":138,"line":3515},59,[136,3517,2038],{"class":164},[136,3519,3521],{"class":138,"line":3520},60,[136,3522,255],{"class":164},[136,3524,3526],{"class":138,"line":3525},61,[136,3527,929],{"class":191},[136,3529,3531],{"class":138,"line":3530},62,[136,3532,395],{"class":164},[136,3534,3536],{"class":138,"line":3535},63,[136,3537,143],{"emptyLinePlaceholder":142},[136,3539,3541,3543,3545,3547],{"class":138,"line":3540},64,[136,3542,284],{"class":156},[136,3544,287],{"class":160},[136,3546,165],{"class":164},[136,3548,231],{"class":164},[136,3550,3552,3554,3556,3559,3561,3564,3566,3568],{"class":138,"line":3551},65,[136,3553,300],{"class":191},[136,3555,195],{"class":164},[136,3557,3558],{"class":160},"[",[136,3560,247],{"class":164},[136,3562,3563],{"class":207},".\u002Fsrc\u002Findex.js",[136,3565,247],{"class":164},[136,3567,785],{"class":160},[136,3569,220],{"class":164},[136,3571,3573],{"class":138,"line":3572},66,[136,3574,317],{"class":160},[136,3576,3578,3580,3582,3585,3587,3589,3591,3594],{"class":138,"line":3577},67,[136,3579,323],{"class":191},[136,3581,195],{"class":164},[136,3583,3584],{"class":160},"process",[136,3586,688],{"class":164},[136,3588,3346],{"class":160},[136,3590,688],{"class":164},[136,3592,3593],{"class":160},"mode",[136,3595,220],{"class":164},[136,3597,3599],{"class":138,"line":3598},68,[136,3600,341],{"class":160},[136,3602,3604,3606,3608],{"class":138,"line":3603},69,[136,3605,347],{"class":191},[136,3607,195],{"class":164},[136,3609,231],{"class":164},[136,3611,3613,3615,3617],{"class":138,"line":3612},70,[136,3614,357],{"class":191},[136,3616,195],{"class":164},[136,3618,362],{"class":160},[136,3620,3622],{"class":138,"line":3621},71,[136,3623,261],{"class":164},[136,3625,3627,3629],{"class":138,"line":3626},72,[136,3628,1403],{"class":191},[136,3630,1406],{"class":164},[136,3632,3634,3636,3638,3640,3642,3644,3646,3648,3650,3652,3654,3656,3658,3660,3662,3664,3666,3668,3670,3672],{"class":138,"line":3633},73,[136,3635,1411],{"class":191},[136,3637,195],{"class":164},[136,3639,1416],{"class":160},[136,3641,247],{"class":164},[136,3643,1421],{"class":207},[136,3645,247],{"class":164},[136,3647,849],{"class":164},[136,3649,242],{"class":164},[136,3651,1430],{"class":207},[136,3653,247],{"class":164},[136,3655,849],{"class":164},[136,3657,242],{"class":164},[136,3659,1439],{"class":207},[136,3661,247],{"class":164},[136,3663,849],{"class":164},[136,3665,242],{"class":164},[136,3667,1448],{"class":207},[136,3669,247],{"class":164},[136,3671,785],{"class":160},[136,3673,220],{"class":164},[136,3675,3677,3679,3681],{"class":138,"line":3676},74,[136,3678,1459],{"class":191},[136,3680,195],{"class":164},[136,3682,231],{"class":164},[136,3684,3686,3689,3691,3693,3695,3697,3699,3701,3703,3705,3707,3709,3711,3713],{"class":138,"line":3685},75,[136,3687,3688],{"class":164},"          '",[136,3690,1471],{"class":191},[136,3692,247],{"class":164},[136,3694,195],{"class":164},[136,3696,1478],{"class":160},[136,3698,688],{"class":164},[136,3700,843],{"class":452},[136,3702,846],{"class":160},[136,3704,849],{"class":164},[136,3706,242],{"class":164},[136,3708,58],{"class":207},[136,3710,247],{"class":164},[136,3712,210],{"class":160},[136,3714,220],{"class":164},[136,3716,3718],{"class":138,"line":3717},76,[136,3719,1501],{"class":164},[136,3721,3723,3725,3727,3729,3731,3733,3735,3737,3739,3741,3743,3745],{"class":138,"line":3722},77,[136,3724,1511],{"class":191},[136,3726,195],{"class":164},[136,3728,1516],{"class":160},[136,3730,688],{"class":164},[136,3732,843],{"class":452},[136,3734,846],{"class":160},[136,3736,849],{"class":164},[136,3738,1527],{"class":164},[136,3740,58],{"class":207},[136,3742,328],{"class":164},[136,3744,1534],{"class":160},[136,3746,220],{"class":164},[136,3748,3750],{"class":138,"line":3749},78,[136,3751,261],{"class":164},[136,3753,3755],{"class":138,"line":3754},79,[136,3756,3757],{"class":149},"    \u002F\u002F ファイルの出力設定\n",[136,3759,3761,3764,3766],{"class":138,"line":3760},80,[136,3762,3763],{"class":191},"    output",[136,3765,195],{"class":164},[136,3767,231],{"class":164},[136,3769,3771],{"class":138,"line":3770},81,[136,3772,3773],{"class":149},"        \u002F\u002F  出力ファイルのディレクトリ名\n",[136,3775,3777,3780,3782,3784,3787,3789,3792,3795],{"class":138,"line":3776},82,[136,3778,3779],{"class":191},"        path",[136,3781,195],{"class":164},[136,3783,836],{"class":164},[136,3785,3786],{"class":160},"__dirname",[136,3788,860],{"class":164},[136,3790,3791],{"class":207},"\u002Fdist",[136,3793,3794],{"class":164},"`",[136,3796,220],{"class":164},[136,3798,3800,3802,3804,3806,3808,3810],{"class":138,"line":3799},83,[136,3801,831],{"class":191},[136,3803,195],{"class":164},[136,3805,242],{"class":164},[136,3807,3510],{"class":207},[136,3809,247],{"class":164},[136,3811,220],{"class":164},[136,3813,3815],{"class":138,"line":3814},84,[136,3816,261],{"class":164},[136,3818,3820,3823,3825],{"class":138,"line":3819},85,[136,3821,3822],{"class":191},"    plugins",[136,3824,195],{"class":164},[136,3826,168],{"class":160},[136,3828,3830,3833,3836,3838],{"class":138,"line":3829},86,[136,3831,3832],{"class":164},"        new",[136,3834,3835],{"class":452}," MiniCssExtractPlugin",[136,3837,204],{"class":160},[136,3839,825],{"class":164},[136,3841,3843,3845,3847,3849,3852],{"class":138,"line":3842},87,[136,3844,3137],{"class":191},[136,3846,195],{"class":164},[136,3848,242],{"class":164},[136,3850,3851],{"class":207},"[name].css",[136,3853,3147],{"class":164},[136,3855,3857,3860,3862],{"class":138,"line":3856},88,[136,3858,3859],{"class":164},"        }",[136,3861,210],{"class":160},[136,3863,220],{"class":164},[136,3865,3867],{"class":138,"line":3866},89,[136,3868,3869],{"class":160},"    ]\n",[136,3871,3873],{"class":138,"line":3872},90,[136,3874,3875],{"class":164},"};\n",[136,3877,3879],{"class":138,"line":3878},91,[136,3880,143],{"emptyLinePlaceholder":142},[136,3882,3884,3886,3888,3890,3892,3894,3896,3898,3900,3902,3904,3906],{"class":138,"line":3883},92,[136,3885,284],{"class":156},[136,3887,2412],{"class":160},[136,3889,165],{"class":164},[136,3891,685],{"class":160},[136,3893,688],{"class":164},[136,3895,691],{"class":452},[136,3897,204],{"class":160},[136,3899,247],{"class":164},[136,3901,2720],{"class":207},[136,3903,247],{"class":164},[136,3905,849],{"class":164},[136,3907,231],{"class":164},[136,3909,3911,3913,3915,3917,3919,3921,3923,3925,3927,3929,3931],{"class":138,"line":3910},93,[136,3912,2438],{"class":191},[136,3914,195],{"class":164},[136,3916,2443],{"class":160},[136,3918,247],{"class":164},[136,3920,2448],{"class":207},[136,3922,247],{"class":164},[136,3924,849],{"class":164},[136,3926,247],{"class":164},[136,3928,2457],{"class":207},[136,3930,247],{"class":164},[136,3932,2462],{"class":160},[136,3934,3936,3938,3940],{"class":138,"line":3935},94,[136,3937,860],{"class":164},[136,3939,210],{"class":160},[136,3941,420],{"class":164},[136,3943,3945],{"class":138,"line":3944},95,[136,3946,143],{"emptyLinePlaceholder":142},[136,3948,3950,3952,3954,3956,3958,3960,3962,3964,3966],{"class":138,"line":3949},96,[136,3951,2479],{"class":160},[136,3953,688],{"class":164},[136,3955,718],{"class":452},[136,3957,204],{"class":160},[136,3959,204],{"class":164},[136,3961,1640],{"class":725},[136,3963,210],{"class":164},[136,3965,731],{"class":156},[136,3967,231],{"class":164},[136,3969,3971,3973,3975,3977,3979,3981,3983,3985,3987,3989,3991,3993,3995,3997,3999,4001,4003,4005,4007,4009,4011,4013,4015,4017,4019,4021,4023,4025,4027,4029,4031],{"class":138,"line":3970},97,[136,3972,739],{"class":156},[136,3974,2502],{"class":160},[136,3976,292],{"class":164},[136,3978,2507],{"class":160},[136,3980,688],{"class":164},[136,3982,752],{"class":452},[136,3984,204],{"class":191},[136,3986,247],{"class":164},[136,3988,217],{"class":207},[136,3990,247],{"class":164},[136,3992,210],{"class":191},[136,3994,688],{"class":164},[136,3996,767],{"class":452},[136,3998,204],{"class":191},[136,4000,772],{"class":164},[136,4002,776],{"class":775},[136,4004,779],{"class":191},[136,4006,782],{"class":775},[136,4008,785],{"class":191},[136,4010,688],{"class":164},[136,4012,2542],{"class":452},[136,4014,204],{"class":191},[136,4016,247],{"class":164},[136,4018,2549],{"class":207},[136,4020,247],{"class":164},[136,4022,849],{"class":164},[136,4024,242],{"class":164},[136,4026,2558],{"class":207},[136,4028,247],{"class":164},[136,4030,210],{"class":191},[136,4032,420],{"class":164},[136,4034,4036,4038,4040,4042,4044,4046],{"class":138,"line":4035},98,[136,4037,798],{"class":160},[136,4039,688],{"class":164},[136,4041,803],{"class":160},[136,4043,688],{"class":164},[136,4045,808],{"class":452},[136,4047,811],{"class":191},[136,4049,4051,4053,4055,4057],{"class":138,"line":4050},99,[136,4052,817],{"class":164},[136,4054,820],{"class":452},[136,4056,204],{"class":191},[136,4058,825],{"class":164},[136,4060,4062,4064,4066,4068,4070,4072,4074,4076,4078,4080,4082,4084,4086,4088,4090,4092,4094,4096],{"class":138,"line":4061},100,[136,4063,831],{"class":191},[136,4065,195],{"class":164},[136,4067,836],{"class":164},[136,4069,484],{"class":160},[136,4071,688],{"class":164},[136,4073,843],{"class":452},[136,4075,846],{"class":160},[136,4077,849],{"class":164},[136,4079,242],{"class":164},[136,4081,54],{"class":207},[136,4083,247],{"class":164},[136,4085,210],{"class":160},[136,4087,860],{"class":164},[136,4089,217],{"class":207},[136,4091,865],{"class":164},[136,4093,84],{"class":160},[136,4095,871],{"class":164},[136,4097,220],{"class":164},[136,4099,4101,4103,4105,4107,4109,4111],{"class":138,"line":4100},101,[136,4102,879],{"class":191},[136,4104,195],{"class":164},[136,4106,247],{"class":164},[136,4108,886],{"class":207},[136,4110,247],{"class":164},[136,4112,220],{"class":164},[136,4114,4116,4118,4120,4122],{"class":138,"line":4115},102,[136,4117,896],{"class":191},[136,4119,195],{"class":164},[136,4121,2507],{"class":160},[136,4123,220],{"class":164},[136,4125,4127,4129,4131],{"class":138,"line":4126},103,[136,4128,908],{"class":191},[136,4130,195],{"class":164},[136,4132,914],{"class":913},[136,4134,4136,4138],{"class":138,"line":4135},104,[136,4137,920],{"class":164},[136,4139,923],{"class":191},[136,4141,4143],{"class":138,"line":4142},105,[136,4144,929],{"class":191},[136,4146,4148,4150,4152],{"class":138,"line":4147},106,[136,4149,860],{"class":164},[136,4151,210],{"class":160},[136,4153,420],{"class":164},[136,4155,4157],{"class":138,"line":4156},107,[136,4158,143],{"emptyLinePlaceholder":142},[136,4160,4162,4164,4166,4168],{"class":138,"line":4161},108,[136,4163,412],{"class":164},[136,4165,292],{"class":164},[136,4167,417],{"class":160},[136,4169,420],{"class":164},[4171,4172,4173],"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":79,"searchDepth":153,"depth":153,"links":4175},[4176,4177,4183,4189],{"id":41,"depth":146,"text":42},{"id":65,"depth":146,"text":66,"children":4178},[4179,4180,4181,4182],{"id":100,"depth":153,"text":100},{"id":119,"depth":153,"text":119},{"id":423,"depth":153,"text":423},{"id":1260,"depth":153,"text":1260},{"id":1618,"depth":146,"text":1619,"children":4184},[4185,4186,4187,4188],{"id":1628,"depth":153,"text":1628},{"id":1844,"depth":153,"text":1844},{"id":1895,"depth":153,"text":1895},{"id":2776,"depth":153,"text":2776},{"id":2821,"depth":146,"text":2822},[4191],"devstack","2021-10-30","HTMLファイルの取り扱いとPUGを使い方","md",{},"\u002Fseries\u002Fwell-study-webpack-3",{"title":8,"description":4193},"well-study-webpack","ちゃんと理解するWebpack5。","series\u002Fwell-study-webpack-3",[3391,4202,84],"webpack","_mix\u002Flogo-on-white-bg-768x299.png",null,"EsG5Dg5_6qbSZmEa8Ezu5AMWNTpxDesebmF7q4Bkix4",{"id":4207,"title":20,"body":4208,"category":7746,"createdAt":7747,"description":7748,"extension":4194,"index":146,"meta":7749,"navigation":142,"path":7750,"publish":142,"seo":7751,"series":4198,"seriesTitle":4199,"stem":7752,"tag":7753,"thumbnail":4203,"updatedAt":4204,"__hash__":7754},"series\u002Fseries\u002Fwell-study-webpack-2.md",{"type":10,"value":4209,"toc":7725},[4210,4214,4220,4230,4233,4236,4239,4250,4256,4265,4297,4307,4372,4378,4587,4597,4600,4614,4624,4627,4631,4634,4640,4646,5221,5224,5227,5230,5369,5372,5379,5393,5396,5464,5473,5492,5498,5504,5510,5526,5529,5538,5577,5580,5592,5595,5598,5608,6099,6113,6116,6118,6121,6127,6130,6136,6139,6327,6330,6348,6352,6355,6361,6374,6658,6661,6667,6670,6673,6684,6783,6797,7254,7278,7280,7283,7291,7298,7301,7316,7322,7331,7335,7348,7507,7513,7584,7594,7695,7717,7719,7722],[1249,4211,4213],{"className":4212},[1252,1253],"\n2021年10月30日：修正事項があっため追記しました。\n",[13,4215,15,4216,4219],{},[17,4217,4218],{"href":48},"ちゃんと理解するWebpack5。１：webpack基礎とSass・jsのバンドル","の続きの記事です。前回はjsファイルのバンドル、scssのコンパイルを行いました。今回はそこから",[26,4221,4222,4224,4227],{},[29,4223,1260],{},[29,4225,4226],{},"babelを用いたトランスコンパイル",[29,4228,4229],{},"複数のバンドルファイルを出力",[13,4231,4232],{},"以上を解説したいと思います。これらができればひとまず意図通りのwebコンテンツが作れるようになります。コードは前回のものから発展させて使用します。それではまず画像パスの解決から行っていきます。",[39,4234,4235],{"id":4235},"webpackで画像を取り扱う",[98,4237,4238],{"id":4238},"画像が必要なシチュエーションを準備",[13,4240,4241,4242,4245,4246,4249],{},"sassでは背景画像などで画像のパスが必要となることがあります。",[52,4243,4244],{},"\u002Fsrc","に",[52,4247,4248],{},"imgs","ディレクトリを作成します。",[71,4251,4254],{"className":4252,"code":4253,"language":76},[74],".\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",[52,4255,4253],{"__ignoreMap":79},[13,4257,4258,4260,4261,4264],{},[52,4259,1288],{},"ディレクトリにに画像を配置していきます。適当な画像sample.jpgをおいておき、sassにも適当な",[52,4262,4263],{},"background-image","を設定します。",[71,4266,4271],{"className":4267,"code":4268,"filename":4269,"language":4270,"meta":79,"style":79},"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",[52,4272,4273,4278,4283,4288,4293],{"__ignoreMap":79},[136,4274,4275],{"class":138,"line":139},[136,4276,4277],{},".image-box{\n",[136,4279,4280],{"class":138,"line":146},[136,4281,4282],{},"    width: 100px;\n",[136,4284,4285],{"class":138,"line":153},[136,4286,4287],{},"    height: 100px;\n",[136,4289,4290],{"class":138,"line":4},[136,4291,4292],{},"    background-image: url('~\u002Fimgs\u002Fsample.jpg');\n",[136,4294,4295],{"class":138,"line":176},[136,4296,395],{},[13,4298,4299,4302,4303,4306],{},[52,4300,4301],{},"url('..\u002Fimgs\u002Fsample.jpg');","のような相対パスでなく",[52,4304,4305],{},"url('~\u002Fimgs\u002Fsample.jpg');","としたのは運用上のテクニックです。後でこの説明をしますので、ひとまずこんなパスにしておきます。まだ設定していませんが、試しにビルドしてみます。",[71,4308,4313],{"className":4309,"code":4310,"filename":4311,"language":4312,"meta":79,"style":79},"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",[52,4314,4315,4325,4338,4349],{"__ignoreMap":79},[136,4316,4317,4319,4323],{"class":138,"line":139},[136,4318,688],{"class":164},[136,4320,4322],{"class":4321},"s5Dmg","image-box",[136,4324,231],{"class":164},[136,4326,4327,4331,4333,4336],{"class":138,"line":146},[136,4328,4330],{"class":4329},"s6YsC","  width",[136,4332,195],{"class":164},[136,4334,4335],{"class":775}," 100px",[136,4337,420],{"class":164},[136,4339,4340,4343,4345,4347],{"class":138,"line":153},[136,4341,4342],{"class":4329},"  height",[136,4344,195],{"class":164},[136,4346,4335],{"class":775},[136,4348,420],{"class":164},[136,4350,4351,4354,4356,4358,4360,4362,4365,4367,4370],{"class":138,"line":4},[136,4352,4353],{"class":4329},"  background-image",[136,4355,195],{"class":164},[136,4357,3044],{"class":452},[136,4359,204],{"class":164},[136,4361,328],{"class":164},[136,4363,4364],{"class":207},"~\u002Fimgs\u002Fsample.jpg",[136,4366,328],{"class":164},[136,4368,4369],{"class":164},");",[136,4371,3051],{"class":164},[13,4373,4374,4377],{},[52,4375,4376],{},"component.scss","で定義した通りのURLとなりましたが、もちろん不正なので404となります。",[71,4379,4382],{"className":1272,"code":4380,"filename":4381,"language":84,"meta":79,"style":79},"    ...\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",[52,4383,4384,4389,4399,4409,4430,4434,4443,4482,4513,4538,4560,4569,4578,4582],{"__ignoreMap":79},[136,4385,4386],{"class":138,"line":139},[136,4387,4388],{"class":160},"    ...\n",[136,4390,4391,4394,4396],{"class":138,"line":146},[136,4392,4393],{"class":164},"    \u003C",[136,4395,886],{"class":191},[136,4397,4398],{"class":164},">\n",[136,4400,4401,4404,4407],{"class":138,"line":153},[136,4402,4403],{"class":164},"        \u003C",[136,4405,4406],{"class":191},"main",[136,4408,4398],{"class":164},[136,4410,4411,4414,4416,4419,4421,4423,4426,4428],{"class":138,"line":4},[136,4412,4413],{"class":164},"            \u003C",[136,4415,1249],{"class":191},[136,4417,4418],{"class":156}," id",[136,4420,165],{"class":164},[136,4422,247],{"class":164},[136,4424,4425],{"class":207},"app",[136,4427,247],{"class":164},[136,4429,4398],{"class":164},[136,4431,4432],{"class":138,"line":176},[136,4433,143],{"emptyLinePlaceholder":142},[136,4435,4436,4439,4441],{"class":138,"line":182},[136,4437,4438],{"class":164},"            \u003C\u002F",[136,4440,1249],{"class":191},[136,4442,4398],{"class":164},[136,4444,4445,4447,4450,4453,4455,4457,4459,4461,4464,4466,4469,4471,4473,4475,4478,4480],{"class":138,"line":188},[136,4446,4413],{"class":164},[136,4448,4449],{"class":191},"input",[136,4451,4452],{"class":156}," type",[136,4454,165],{"class":164},[136,4456,328],{"class":164},[136,4458,76],{"class":207},[136,4460,328],{"class":164},[136,4462,4463],{"class":156}," value",[136,4465,165],{"class":164},[136,4467,4468],{"class":164},"\"\"",[136,4470,4418],{"class":156},[136,4472,165],{"class":164},[136,4474,328],{"class":164},[136,4476,4477],{"class":207},"inputs",[136,4479,328],{"class":164},[136,4481,4398],{"class":164},[136,4483,4484,4486,4489,4491,4493,4495,4498,4500,4503,4506,4509,4511],{"class":138,"line":223},[136,4485,4413],{"class":164},[136,4487,4488],{"class":191},"button",[136,4490,4418],{"class":156},[136,4492,165],{"class":164},[136,4494,328],{"class":164},[136,4496,4497],{"class":207},"submmit",[136,4499,328],{"class":164},[136,4501,4502],{"class":164}," >",[136,4504,4505],{"class":160},"追加する",[136,4507,4508],{"class":164},"\u003C\u002F",[136,4510,4488],{"class":191},[136,4512,4398],{"class":164},[136,4514,4515,4517,4519,4522,4524,4526,4529,4531,4534,4536],{"class":138,"line":234},[136,4516,4413],{"class":164},[136,4518,1249],{"class":191},[136,4520,4521],{"class":156}," class",[136,4523,165],{"class":164},[136,4525,247],{"class":164},[136,4527,4528],{"class":207},"box",[136,4530,247],{"class":164},[136,4532,4533],{"class":164},">\u003C\u002F",[136,4535,1249],{"class":191},[136,4537,4398],{"class":164},[136,4539,4540,4542,4544,4546,4548,4550,4552,4554,4556,4558],{"class":138,"line":252},[136,4541,4413],{"class":164},[136,4543,1249],{"class":191},[136,4545,4521],{"class":156},[136,4547,165],{"class":164},[136,4549,247],{"class":164},[136,4551,4322],{"class":207},[136,4553,247],{"class":164},[136,4555,4533],{"class":164},[136,4557,1249],{"class":191},[136,4559,4398],{"class":164},[136,4561,4562,4565,4567],{"class":138,"line":258},[136,4563,4564],{"class":164},"        \u003C\u002F",[136,4566,4406],{"class":191},[136,4568,4398],{"class":164},[136,4570,4571,4574,4576],{"class":138,"line":264},[136,4572,4573],{"class":164},"    \u003C\u002F",[136,4575,886],{"class":191},[136,4577,4398],{"class":164},[136,4579,4580],{"class":138,"line":270},[136,4581,4388],{"class":160},[136,4583,4584],{"class":138,"line":276},[136,4585,4586],{"class":149},"    \u003C!-- Failed to load resource: net::ERR_FILE_NOT_FOUND \u002F~\u002Fimgs\u002Fsample.jpg-->\n",[13,4588,4589,4590,4593,4594,4596],{},"相対リンクでやってもdist配下ににimgsディレクトリと画像そのものがないので、404となります。そのためwebpackを用いて",[52,4591,4592],{},"\u002Fsrc\u002Fimgs","と配下の画像をdistに移動し、",[52,4595,4305],{},"のようなパスを変換させてあげる必要があります。",[98,4598,4599],{"id":4599},"webpack4と5の違い",[13,4601,4602,4603,4606,4607,4606,4610,4613],{},"webpack4では画像の処理に",[52,4604,4605],{},"url-loader","、",[52,4608,4609],{},"raw-loader",[52,4611,4612],{},"file-loader","を使用していましたが、webpack5ではすでにwebpackに搭載されているAsset Modulesで行います。ただバージョン4の書き方もまだ主流なので、今回は4と5の方法を紹介し、最終的には5の方法で実装しようと思います。",[13,4615,4616,4617,4619,4620,4623],{},"なお、目指す形としては",[52,4618,3791],{},"配下に",[52,4621,4622],{},"\u002Fimgs","というディレクトリが作られ、そこに配下の画像が移動され、sassの画像パスが正しくなっているように設定します。",[98,4625,4626],{"id":4626},"webpack4の設定でやってみる",[4628,4629,4630],"h4",{"id":4630},"loaderをインストールとconfigの記述を変更",[13,4632,4633],{},"それでは従来の方法での説明をまずは行います。最初に必要なloaderをインストールします。",[71,4635,4638],{"className":4636,"code":4637,"language":76},[74],"npm i -D url-loader file-loader\n",[52,4639,4637],{"__ignoreMap":79},[13,4641,4642,4643,4645],{},"この2つを用いてパスの解決とファイルの移動を行うことができます。そして",[52,4644,131],{},"を以下のように変更します。",[71,4647,4649],{"className":129,"code":4648,"filename":131,"language":132,"meta":79,"style":79},"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",[52,4650,4651,4673,4699,4707,4712,4739,4743,4756,4760,4768,4776,4780,4813,4828,4837,4848,4853,4868,4889,4894,4905,4910,4914,4922,4954,4962,4967,4982,4991,5003,5017,5022,5027,5034,5051,5055,5061,5065,5075,5083,5111,5115,5119,5123,5131,5135,5153,5158,5172,5176,5184,5194,5207,5213,5217],{"__ignoreMap":79},[136,4652,4653,4655,4657,4659,4661,4663,4665,4667,4669,4671],{"class":138,"line":139},[136,4654,284],{"class":156},[136,4656,447],{"class":160},[136,4658,165],{"class":164},[136,4660,453],{"class":452},[136,4662,204],{"class":160},[136,4664,247],{"class":164},[136,4666,460],{"class":207},[136,4668,247],{"class":164},[136,4670,210],{"class":160},[136,4672,420],{"class":164},[136,4674,4675,4677,4679,4681,4683,4685,4687,4689,4691,4693,4696],{"class":138,"line":146},[136,4676,284],{"class":156},[136,4678,473],{"class":160},[136,4680,165],{"class":164},[136,4682,453],{"class":452},[136,4684,204],{"class":160},[136,4686,247],{"class":164},[136,4688,484],{"class":207},[136,4690,247],{"class":164},[136,4692,210],{"class":160},[136,4694,4695],{"class":164},";",[136,4697,4698],{"class":149}," \u002F\u002F 追加\n",[136,4700,4701,4703,4705],{"class":138,"line":153},[136,4702,412],{"class":164},[136,4704,292],{"class":164},[136,4706,231],{"class":164},[136,4708,4709],{"class":138,"line":4},[136,4710,4711],{"class":149},"    \u002F\u002Fバンドル対象のファイル\n",[136,4713,4714,4716,4718,4721,4723,4725,4727,4729,4731,4733,4735,4737],{"class":138,"line":176},[136,4715,300],{"class":191},[136,4717,195],{"class":164},[136,4719,4720],{"class":164}," .\u002F",[136,4722,58],{"class":160},[136,4724,217],{"class":164},[136,4726,3391],{"class":160},[136,4728,217],{"class":164},[136,4730,4406],{"class":160},[136,4732,688],{"class":164},[136,4734,3391],{"class":160},[136,4736,247],{"class":164},[136,4738,220],{"class":207},[136,4740,4741],{"class":138,"line":182},[136,4742,317],{"class":160},[136,4744,4745,4748,4750,4752,4754],{"class":138,"line":188},[136,4746,4747],{"class":160},"    mode:",[136,4749,328],{"class":164},[136,4751,331],{"class":207},[136,4753,328],{"class":164},[136,4755,220],{"class":164},[136,4757,4758],{"class":138,"line":223},[136,4759,341],{"class":160},[136,4761,4762,4764,4766],{"class":138,"line":234},[136,4763,347],{"class":191},[136,4765,195],{"class":164},[136,4767,231],{"class":164},[136,4769,4770,4772,4774],{"class":138,"line":252},[136,4771,357],{"class":191},[136,4773,195],{"class":164},[136,4775,168],{"class":160},[136,4777,4778],{"class":138,"line":258},[136,4779,3015],{"class":164},[136,4781,4782,4785,4787,4789,4791,4793,4795,4797,4799,4801,4803,4805,4807,4809,4811],{"class":138,"line":264},[136,4783,4784],{"class":191},"                test",[136,4786,195],{"class":164},[136,4788,198],{"class":164},[136,4790,201],{"class":160},[136,4792,204],{"class":164},[136,4794,2954],{"class":207},[136,4796,2957],{"class":164},[136,4798,2960],{"class":207},[136,4800,2957],{"class":164},[136,4802,2965],{"class":207},[136,4804,210],{"class":164},[136,4806,2970],{"class":207},[136,4808,214],{"class":213},[136,4810,217],{"class":164},[136,4812,220],{"class":164},[136,4814,4815,4818,4820,4822,4824,4826],{"class":138,"line":270},[136,4816,4817],{"class":191},"                exclude",[136,4819,195],{"class":164},[136,4821,198],{"class":164},[136,4823,1980],{"class":207},[136,4825,217],{"class":164},[136,4827,220],{"class":164},[136,4829,4830,4833,4835],{"class":138,"line":276},[136,4831,4832],{"class":191},"                use",[136,4834,195],{"class":164},[136,4836,168],{"class":160},[136,4838,4839,4842,4844,4846],{"class":138,"line":281},[136,4840,4841],{"class":160},"                    MiniCssExtractPlugin",[136,4843,688],{"class":164},[136,4845,3008],{"class":160},[136,4847,220],{"class":164},[136,4849,4850],{"class":138,"line":297},[136,4851,4852],{"class":164},"                    {\n",[136,4854,4855,4858,4860,4862,4864,4866],{"class":138,"line":314},[136,4856,4857],{"class":191},"                        loader",[136,4859,195],{"class":164},[136,4861,242],{"class":164},[136,4863,3027],{"class":207},[136,4865,247],{"class":164},[136,4867,220],{"class":164},[136,4869,4870,4873,4875,4877,4879,4881,4883,4886],{"class":138,"line":320},[136,4871,4872],{"class":191},"                        options",[136,4874,195],{"class":164},[136,4876,3041],{"class":164},[136,4878,3044],{"class":191},[136,4880,195],{"class":164},[136,4882,2031],{"class":913},[136,4884,4885],{"class":164}," }",[136,4887,4888],{"class":149},"　\u002F\u002F trueに変更\n",[136,4890,4891],{"class":138,"line":338},[136,4892,4893],{"class":164},"                    },\n",[136,4895,4896,4899,4901,4903],{"class":138,"line":344},[136,4897,4898],{"class":164},"                    '",[136,4900,3063],{"class":207},[136,4902,247],{"class":164},[136,4904,220],{"class":164},[136,4906,4907],{"class":138,"line":354},[136,4908,4909],{"class":160},"                ]\n",[136,4911,4912],{"class":138,"line":365},[136,4913,3056],{"class":164},[136,4915,4916,4919],{"class":138,"line":370},[136,4917,4918],{"class":164},"            {",[136,4920,4921],{"class":149},"   \u002F\u002F追加\n",[136,4923,4924,4926,4928,4930,4932,4934,4936,4938,4940,4942,4944,4946,4948,4950,4952],{"class":138,"line":375},[136,4925,4784],{"class":191},[136,4927,195],{"class":164},[136,4929,198],{"class":164},[136,4931,201],{"class":160},[136,4933,204],{"class":164},[136,4935,3097],{"class":207},[136,4937,2957],{"class":164},[136,4939,3102],{"class":207},[136,4941,2957],{"class":164},[136,4943,3107],{"class":207},[136,4945,210],{"class":164},[136,4947,214],{"class":213},[136,4949,217],{"class":164},[136,4951,3121],{"class":775},[136,4953,220],{"class":164},[136,4955,4956,4958,4960],{"class":138,"line":387},[136,4957,4832],{"class":191},[136,4959,195],{"class":164},[136,4961,168],{"class":160},[136,4963,4964],{"class":138,"line":392},[136,4965,4966],{"class":164},"                  {\n",[136,4968,4969,4972,4974,4976,4978,4980],{"class":138,"line":398},[136,4970,4971],{"class":191},"                    loader",[136,4973,195],{"class":164},[136,4975,242],{"class":164},[136,4977,4605],{"class":207},[136,4979,247],{"class":164},[136,4981,220],{"class":164},[136,4983,4984,4987,4989],{"class":138,"line":404},[136,4985,4986],{"class":191},"                    options",[136,4988,195],{"class":164},[136,4990,231],{"class":164},[136,4992,4993,4996,4998,5001],{"class":138,"line":409},[136,4994,4995],{"class":191},"                      limit",[136,4997,195],{"class":164},[136,4999,5000],{"class":775}," 8192",[136,5002,220],{"class":164},[136,5004,5005,5008,5010,5012,5015],{"class":138,"line":736},[136,5006,5007],{"class":191},"                      name",[136,5009,195],{"class":164},[136,5011,247],{"class":164},[136,5013,5014],{"class":207},".\u002Fimgs\u002F[name].[ext]",[136,5016,3147],{"class":164},[136,5018,5019],{"class":138,"line":790},[136,5020,5021],{"class":164},"                    }\n",[136,5023,5024],{"class":138,"line":795},[136,5025,5026],{"class":164},"                  },\n",[136,5028,5029,5032],{"class":138,"line":814},[136,5030,5031],{"class":160},"                ]",[136,5033,220],{"class":164},[136,5035,5036,5039,5041,5043,5046,5048],{"class":138,"line":828},[136,5037,5038],{"class":191},"               type",[136,5040,195],{"class":164},[136,5042,242],{"class":164},[136,5044,5045],{"class":207},"javascript\u002Fauto",[136,5047,247],{"class":164},[136,5049,5050],{"class":149}," \u002F\u002F 大切\n",[136,5052,5053],{"class":138,"line":876},[136,5054,3056],{"class":164},[136,5056,5057,5059],{"class":138,"line":893},[136,5058,3072],{"class":160},[136,5060,220],{"class":164},[136,5062,5063],{"class":138,"line":905},[136,5064,261],{"class":164},[136,5066,5067,5069,5072],{"class":138,"line":917},[136,5068,1403],{"class":191},[136,5070,5071],{"class":164},":{",[136,5073,5074],{"class":149},"　\u002F\u002F追加\n",[136,5076,5077,5079,5081],{"class":138,"line":926},[136,5078,1459],{"class":191},[136,5080,195],{"class":164},[136,5082,231],{"class":164},[136,5084,5085,5087,5089,5091,5093,5095,5097,5099,5101,5103,5105,5107,5109],{"class":138,"line":932},[136,5086,3688],{"class":164},[136,5088,1471],{"class":191},[136,5090,247],{"class":164},[136,5092,195],{"class":164},[136,5094,1478],{"class":160},[136,5096,688],{"class":164},[136,5098,843],{"class":452},[136,5100,846],{"class":160},[136,5102,849],{"class":164},[136,5104,242],{"class":164},[136,5106,58],{"class":207},[136,5108,247],{"class":164},[136,5110,923],{"class":160},[136,5112,5113],{"class":138,"line":941},[136,5114,255],{"class":164},[136,5116,5117],{"class":138,"line":946},[136,5118,261],{"class":164},[136,5120,5121],{"class":138,"line":2683},[136,5122,3757],{"class":149},[136,5124,5125,5127,5129],{"class":138,"line":3325},[136,5126,3763],{"class":191},[136,5128,195],{"class":164},[136,5130,231],{"class":164},[136,5132,5133],{"class":138,"line":3330},[136,5134,3773],{"class":149},[136,5136,5137,5139,5141,5143,5145,5147,5149,5151],{"class":138,"line":3335},[136,5138,3779],{"class":191},[136,5140,195],{"class":164},[136,5142,836],{"class":164},[136,5144,3786],{"class":160},[136,5146,860],{"class":164},[136,5148,3791],{"class":207},[136,5150,3794],{"class":164},[136,5152,220],{"class":164},[136,5154,5155],{"class":138,"line":3356},[136,5156,5157],{"class":149},"        \u002F\u002F 出力ファイル名\n",[136,5159,5160,5162,5164,5166,5169],{"class":138,"line":3367},[136,5161,831],{"class":191},[136,5163,195],{"class":164},[136,5165,1527],{"class":164},[136,5167,5168],{"class":207},"bundle.js",[136,5170,5171],{"class":164},"\"\n",[136,5173,5174],{"class":138,"line":3373},[136,5175,261],{"class":164},[136,5177,5178,5180,5182],{"class":138,"line":3400},[136,5179,3822],{"class":191},[136,5181,195],{"class":164},[136,5183,168],{"class":160},[136,5185,5186,5188,5190,5192],{"class":138,"line":3423},[136,5187,3832],{"class":164},[136,5189,3835],{"class":452},[136,5191,204],{"class":160},[136,5193,825],{"class":164},[136,5195,5196,5198,5200,5202,5205],{"class":138,"line":3433},[136,5197,3137],{"class":191},[136,5199,195],{"class":164},[136,5201,242],{"class":164},[136,5203,5204],{"class":207},"style.css",[136,5206,3147],{"class":164},[136,5208,5209,5211],{"class":138,"line":3450},[136,5210,3859],{"class":164},[136,5212,923],{"class":160},[136,5214,5215],{"class":138,"line":3460},[136,5216,3869],{"class":160},[136,5218,5219],{"class":138,"line":3479},[136,5220,3875],{"class":164},[13,5222,5223],{},"それでは細かい説明をします。",[4628,5225,5226],{"id":5226},"file-loaderの設定",[13,5228,5229],{},"file-loaderではjpg,png,gifの拡張子を見つけた時の処理を記述します。",[71,5231,5233],{"className":129,"code":5232,"filename":131,"language":132,"meta":79,"style":79},"{\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",[52,5234,5235,5239,5272,5281,5285,5300,5309,5320,5333,5337,5341,5348,5364],{"__ignoreMap":79},[136,5236,5237],{"class":138,"line":139},[136,5238,825],{"class":164},[136,5240,5241,5244,5246,5248,5250,5252,5254,5256,5258,5260,5262,5264,5266,5268,5270],{"class":138,"line":146},[136,5242,5243],{"class":4321},"    test",[136,5245,195],{"class":164},[136,5247,198],{"class":164},[136,5249,201],{"class":160},[136,5251,204],{"class":164},[136,5253,3097],{"class":207},[136,5255,2957],{"class":164},[136,5257,3102],{"class":207},[136,5259,2957],{"class":164},[136,5261,3107],{"class":207},[136,5263,210],{"class":164},[136,5265,214],{"class":213},[136,5267,217],{"class":164},[136,5269,3121],{"class":775},[136,5271,220],{"class":164},[136,5273,5274,5277,5279],{"class":138,"line":153},[136,5275,5276],{"class":4321},"    use",[136,5278,195],{"class":164},[136,5280,168],{"class":191},[136,5282,5283],{"class":138,"line":4},[136,5284,3370],{"class":164},[136,5286,5287,5290,5292,5294,5296,5298],{"class":138,"line":176},[136,5288,5289],{"class":191},"        loader",[136,5291,195],{"class":164},[136,5293,242],{"class":164},[136,5295,4605],{"class":207},[136,5297,247],{"class":164},[136,5299,220],{"class":164},[136,5301,5302,5305,5307],{"class":138,"line":182},[136,5303,5304],{"class":191},"        options",[136,5306,195],{"class":164},[136,5308,231],{"class":164},[136,5310,5311,5314,5316,5318],{"class":138,"line":188},[136,5312,5313],{"class":191},"            limit",[136,5315,195],{"class":164},[136,5317,5000],{"class":775},[136,5319,220],{"class":164},[136,5321,5322,5325,5327,5329,5331],{"class":138,"line":223},[136,5323,5324],{"class":191},"            name",[136,5326,195],{"class":164},[136,5328,247],{"class":164},[136,5330,5014],{"class":207},[136,5332,3147],{"class":164},[136,5334,5335],{"class":138,"line":234},[136,5336,255],{"class":164},[136,5338,5339],{"class":138,"line":252},[136,5340,1501],{"class":164},[136,5342,5343,5346],{"class":138,"line":258},[136,5344,5345],{"class":191},"    ]",[136,5347,220],{"class":164},[136,5349,5350,5353,5355,5357,5359,5361],{"class":138,"line":264},[136,5351,5352],{"class":4321},"    type",[136,5354,195],{"class":164},[136,5356,242],{"class":164},[136,5358,5045],{"class":207},[136,5360,247],{"class":164},[136,5362,5363],{"class":149}," \u002F\u002F大切\n",[136,5365,5366],{"class":138,"line":270},[136,5367,5368],{"class":164},"},\n",[13,5370,5371],{},"loaderにはurl-loaderを指定してファイルをURIに変換できるようにします。",[13,5373,5374,5375,5378],{},"distでは画像はimgsディレクトリ配下に格納させますので、",[52,5376,5377],{},"name:'.\u002Fimgs\u002F[name].[ext]'","としておきます。sass,jsの画像ファイルの参照もこのディレクトリ構成にあったパスに変更してくれます。",[13,5380,5381,5382,5385,5386,5392],{},"webpack5で従来の方法を使う場合、",[52,5383,5384],{},"type: 'javascript\u002Fauto'","を忘れないようにしてください。",[17,5387,5391],{"href":5388,"rel":5389},"https:\u002F\u002Fwebpack.js.org\u002Fguides\u002Fasset-modules\u002F",[5390],"nofollow","公式ドキュメントの記述はこちら。"," webpack5にはAsset Moduleというものがすでにあり、それがfile-loader達と似たような働きを行います。もし先ほどの記述がないと二重で処理が入るなどがしておかしくなります。",[4628,5394,5395],{"id":5395},"エイリアスの設定",[71,5397,5399],{"className":129,"code":5398,"filename":131,"language":132,"meta":79,"style":79},"{\n    resolve:{　\u002F\u002F追加\n        alias: {\n          '~': path.resolve(__dirname, 'src')\n        }\n    },\n},\n",[52,5400,5401,5405,5413,5421,5452,5456,5460],{"__ignoreMap":79},[136,5402,5403],{"class":138,"line":139},[136,5404,825],{"class":164},[136,5406,5407,5409,5411],{"class":138,"line":146},[136,5408,1403],{"class":4321},[136,5410,5071],{"class":164},[136,5412,5074],{"class":149},[136,5414,5415,5417,5419],{"class":138,"line":153},[136,5416,1459],{"class":4321},[136,5418,195],{"class":164},[136,5420,231],{"class":164},[136,5422,5423,5425,5427,5429,5432,5434,5436,5438,5440,5442,5444,5446,5448,5450],{"class":138,"line":4},[136,5424,3688],{"class":164},[136,5426,1471],{"class":207},[136,5428,247],{"class":164},[136,5430,5431],{"class":191},": ",[136,5433,484],{"class":160},[136,5435,688],{"class":164},[136,5437,843],{"class":452},[136,5439,204],{"class":191},[136,5441,3786],{"class":160},[136,5443,849],{"class":164},[136,5445,242],{"class":164},[136,5447,58],{"class":207},[136,5449,247],{"class":164},[136,5451,923],{"class":191},[136,5453,5454],{"class":138,"line":176},[136,5455,255],{"class":164},[136,5457,5458],{"class":138,"line":182},[136,5459,261],{"class":164},[136,5461,5462],{"class":138,"line":188},[136,5463,5368],{"class":164},[13,5465,5466,5468,5469,5472],{},[52,5467,843],{},"ではwebpackがデフォルトで持っている、名前解決に新しい設定を追加したり、変更することができます。ここでは先ほど",[52,5470,5471],{},"~\u002Fimg\u002Ftest.png","みたいな書き方をしたパスを正しいパスに変換する処理を書いています。",[13,5474,5475,5477,5478,5481,5482,5484,5485,5488,5489,5491],{},[52,5476,1471],{},"はエイリアスとして設定しました。",[52,5479,5480],{},"'~': path.resolve(__dirname, 'src')","とすることで、",[52,5483,1471],{},"を見つけたら",[52,5486,5487],{},"path.resolve(__dirname, 'src')","というに変換するんだなとwebpackが読み取ります。ちなみに",[52,5490,5487],{},"というのはこのファイル（今回のwebpack.config.js）が置かれているOS上のパスのことです。macのあるディレクトリで構築していると以下の様に変換されます。",[71,5493,5496],{"className":5494,"code":5495,"language":76},[74],"\u002FUsers\u002Fjun\u002FDesktop\u002Fmy_apps\u002Fwebpack_practice\u002Fsrc\n",[52,5497,5495],{"__ignoreMap":79},[13,5499,5500,5501,5503],{},"もう少しざっくり説明するとこの",[52,5502,58],{},"ディレクトリを指しています。",[71,5505,5508],{"className":5506,"code":5507,"language":76},[74],".\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",[52,5509,5507],{"__ignoreMap":79},[13,5511,5512,5513,5516,5517,5519,5520,5522,5523,5525],{},"つまり、sassで",[52,5514,5515],{},"~\u002Fimgs\u002Ftest.png","とすれば",[52,5518,1471],{},"を自動に変換して",[52,5521,58],{},"配下の",[52,5524,4248],{},"の画像にバインドされます。このように特定ディレクトリやそのパスを別名で呼ぶことをエイリアス（alias）といいます。",[13,5527,5528],{},"ではなぜエイリアスで呼ぶことがいいのでしょうか？それは階層が深くなるほど、相対パスの指定では苦労するからです。他にも相対パスで指定すると、imgsディレクトリの位置を変えたいとなった時に全ての相対パスを変更する必要があります。srcディレクトリをエイリアスにすることで、相対パスでしていなくても良くなります。画像を使いたい場合は",[71,5530,5532],{"className":4267,"code":5531,"language":4270,"meta":79,"style":79},"background-image('~\u002Fimgs\u002Ftest.png')\n",[52,5533,5534],{"__ignoreMap":79},[136,5535,5536],{"class":138,"line":139},[136,5537,5531],{},[71,5539,5541],{"className":129,"code":5540,"language":132,"meta":79,"style":79},"import img from '~\u002Fimgs\u002Ftest.png';\nconsole.log(img);\n",[52,5542,5543,5562],{"__ignoreMap":79},[136,5544,5545,5548,5551,5554,5556,5558,5560],{"class":138,"line":139},[136,5546,5547],{"class":213},"import",[136,5549,5550],{"class":160}," img ",[136,5552,5553],{"class":213},"from",[136,5555,242],{"class":164},[136,5557,5515],{"class":207},[136,5559,247],{"class":164},[136,5561,420],{"class":164},[136,5563,5564,5567,5569,5572,5575],{"class":138,"line":146},[136,5565,5566],{"class":160},"console",[136,5568,688],{"class":164},[136,5570,5571],{"class":452},"log",[136,5573,5574],{"class":160},"(img)",[136,5576,420],{"class":164},[13,5578,5579],{},"と指定すればよくなります。ディレクトリ構成の変更にも柔軟に対応できます。",[1249,5581,5584,5585,5587,5588,5591],{"className":5582},[1252,5583],"alert-success","\nエイリアスは干渉しなければいろいろ設定できます。今回は",[52,5586,58],{},"直下ですが、",[52,5589,5590],{},"src\u002Fimgs","を指す画像用エイリアスなんかも作成できます。プロジェクトに合わせて設定しましょう。\n",[13,5593,5594],{},"これで画像ファイルが利用できる様になります。次はwebpack5の方法でやってみましょう。",[98,5596,5597],{"id":5597},"webpack5でのやり方",[13,5599,5600,5601,849,5603,849,5605,5607],{},"webpack5の方法では結構簡単になりました。webpack4でインストールした",[52,5602,4609],{},[52,5604,4605],{},[52,5606,4612],{},"は必要ありません。",[71,5609,5611],{"className":129,"code":5610,"filename":131,"language":132,"meta":79,"style":79},"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",[52,5612,5613,5635,5657,5665,5669,5695,5699,5711,5715,5723,5731,5735,5767,5781,5789,5799,5803,5817,5833,5837,5847,5851,5855,5859,5891,5896,5905,5919,5924,5937,5941,5947,5951,5957,5965,5993,5997,6001,6005,6013,6017,6035,6039,6051,6055,6063,6073,6085,6091,6095],{"__ignoreMap":79},[136,5614,5615,5617,5619,5621,5623,5625,5627,5629,5631,5633],{"class":138,"line":139},[136,5616,284],{"class":156},[136,5618,447],{"class":160},[136,5620,165],{"class":164},[136,5622,453],{"class":452},[136,5624,204],{"class":160},[136,5626,247],{"class":164},[136,5628,460],{"class":207},[136,5630,247],{"class":164},[136,5632,210],{"class":160},[136,5634,420],{"class":164},[136,5636,5637,5639,5641,5643,5645,5647,5649,5651,5653,5655],{"class":138,"line":146},[136,5638,284],{"class":156},[136,5640,473],{"class":160},[136,5642,165],{"class":164},[136,5644,453],{"class":452},[136,5646,204],{"class":160},[136,5648,247],{"class":164},[136,5650,484],{"class":207},[136,5652,247],{"class":164},[136,5654,210],{"class":160},[136,5656,420],{"class":164},[136,5658,5659,5661,5663],{"class":138,"line":153},[136,5660,412],{"class":164},[136,5662,292],{"class":164},[136,5664,231],{"class":164},[136,5666,5667],{"class":138,"line":4},[136,5668,4711],{"class":149},[136,5670,5671,5673,5675,5677,5679,5681,5683,5685,5687,5689,5691,5693],{"class":138,"line":176},[136,5672,300],{"class":191},[136,5674,195],{"class":164},[136,5676,4720],{"class":164},[136,5678,58],{"class":160},[136,5680,217],{"class":164},[136,5682,3391],{"class":160},[136,5684,217],{"class":164},[136,5686,4406],{"class":160},[136,5688,688],{"class":164},[136,5690,3391],{"class":160},[136,5692,247],{"class":164},[136,5694,220],{"class":207},[136,5696,5697],{"class":138,"line":182},[136,5698,317],{"class":160},[136,5700,5701,5703,5705,5707,5709],{"class":138,"line":188},[136,5702,4747],{"class":160},[136,5704,328],{"class":164},[136,5706,331],{"class":207},[136,5708,328],{"class":164},[136,5710,220],{"class":164},[136,5712,5713],{"class":138,"line":223},[136,5714,341],{"class":160},[136,5716,5717,5719,5721],{"class":138,"line":234},[136,5718,347],{"class":191},[136,5720,195],{"class":164},[136,5722,231],{"class":164},[136,5724,5725,5727,5729],{"class":138,"line":252},[136,5726,357],{"class":191},[136,5728,195],{"class":164},[136,5730,168],{"class":160},[136,5732,5733],{"class":138,"line":258},[136,5734,3015],{"class":164},[136,5736,5737,5739,5741,5743,5745,5747,5749,5751,5753,5755,5757,5759,5761,5763,5765],{"class":138,"line":264},[136,5738,4784],{"class":191},[136,5740,195],{"class":164},[136,5742,198],{"class":164},[136,5744,201],{"class":160},[136,5746,204],{"class":164},[136,5748,2954],{"class":207},[136,5750,2957],{"class":164},[136,5752,2960],{"class":207},[136,5754,2957],{"class":164},[136,5756,2965],{"class":207},[136,5758,210],{"class":164},[136,5760,2970],{"class":207},[136,5762,214],{"class":213},[136,5764,217],{"class":164},[136,5766,220],{"class":164},[136,5768,5769,5771,5773,5775,5777,5779],{"class":138,"line":270},[136,5770,4817],{"class":191},[136,5772,195],{"class":164},[136,5774,198],{"class":164},[136,5776,1980],{"class":207},[136,5778,217],{"class":164},[136,5780,220],{"class":164},[136,5782,5783,5785,5787],{"class":138,"line":276},[136,5784,4832],{"class":191},[136,5786,195],{"class":164},[136,5788,168],{"class":160},[136,5790,5791,5793,5795,5797],{"class":138,"line":281},[136,5792,4841],{"class":160},[136,5794,688],{"class":164},[136,5796,3008],{"class":160},[136,5798,220],{"class":164},[136,5800,5801],{"class":138,"line":297},[136,5802,4852],{"class":164},[136,5804,5805,5807,5809,5811,5813,5815],{"class":138,"line":314},[136,5806,4857],{"class":191},[136,5808,195],{"class":164},[136,5810,242],{"class":164},[136,5812,3027],{"class":207},[136,5814,247],{"class":164},[136,5816,220],{"class":164},[136,5818,5819,5821,5823,5825,5827,5829,5831],{"class":138,"line":320},[136,5820,4872],{"class":191},[136,5822,195],{"class":164},[136,5824,3041],{"class":164},[136,5826,3044],{"class":191},[136,5828,195],{"class":164},[136,5830,2031],{"class":913},[136,5832,3051],{"class":164},[136,5834,5835],{"class":138,"line":338},[136,5836,4893],{"class":164},[136,5838,5839,5841,5843,5845],{"class":138,"line":344},[136,5840,4898],{"class":164},[136,5842,3063],{"class":207},[136,5844,247],{"class":164},[136,5846,220],{"class":164},[136,5848,5849],{"class":138,"line":354},[136,5850,4909],{"class":160},[136,5852,5853],{"class":138,"line":365},[136,5854,3056],{"class":164},[136,5856,5857],{"class":138,"line":370},[136,5858,3015],{"class":164},[136,5860,5861,5863,5865,5867,5869,5871,5873,5875,5877,5879,5881,5883,5885,5887,5889],{"class":138,"line":375},[136,5862,4784],{"class":191},[136,5864,195],{"class":164},[136,5866,198],{"class":164},[136,5868,201],{"class":160},[136,5870,204],{"class":164},[136,5872,3097],{"class":207},[136,5874,2957],{"class":164},[136,5876,3102],{"class":207},[136,5878,2957],{"class":164},[136,5880,3107],{"class":207},[136,5882,210],{"class":164},[136,5884,214],{"class":213},[136,5886,217],{"class":164},[136,5888,3121],{"class":775},[136,5890,220],{"class":164},[136,5892,5893],{"class":138,"line":387},[136,5894,5895],{"class":149},"                \u002F\u002F ここから変更。useがなくなり。typeが変更されている。\n",[136,5897,5898,5901,5903],{"class":138,"line":392},[136,5899,5900],{"class":191},"                generator",[136,5902,195],{"class":164},[136,5904,231],{"class":164},[136,5906,5907,5910,5912,5914,5917],{"class":138,"line":398},[136,5908,5909],{"class":191},"                    filename",[136,5911,195],{"class":164},[136,5913,242],{"class":164},[136,5915,5916],{"class":207},"imgs\u002F[name][ext][query]",[136,5918,3147],{"class":164},[136,5920,5921],{"class":138,"line":404},[136,5922,5923],{"class":164},"                },\n",[136,5925,5926,5929,5931,5933,5935],{"class":138,"line":409},[136,5927,5928],{"class":191},"                type",[136,5930,195],{"class":164},[136,5932,242],{"class":164},[136,5934,3163],{"class":207},[136,5936,3147],{"class":164},[136,5938,5939],{"class":138,"line":736},[136,5940,3056],{"class":164},[136,5942,5943,5945],{"class":138,"line":790},[136,5944,3072],{"class":160},[136,5946,220],{"class":164},[136,5948,5949],{"class":138,"line":795},[136,5950,261],{"class":164},[136,5952,5953,5955],{"class":138,"line":814},[136,5954,1403],{"class":191},[136,5956,1406],{"class":164},[136,5958,5959,5961,5963],{"class":138,"line":828},[136,5960,1459],{"class":191},[136,5962,195],{"class":164},[136,5964,231],{"class":164},[136,5966,5967,5969,5971,5973,5975,5977,5979,5981,5983,5985,5987,5989,5991],{"class":138,"line":876},[136,5968,3688],{"class":164},[136,5970,1471],{"class":191},[136,5972,247],{"class":164},[136,5974,195],{"class":164},[136,5976,1478],{"class":160},[136,5978,688],{"class":164},[136,5980,843],{"class":452},[136,5982,846],{"class":160},[136,5984,849],{"class":164},[136,5986,242],{"class":164},[136,5988,58],{"class":207},[136,5990,247],{"class":164},[136,5992,923],{"class":160},[136,5994,5995],{"class":138,"line":893},[136,5996,255],{"class":164},[136,5998,5999],{"class":138,"line":905},[136,6000,261],{"class":164},[136,6002,6003],{"class":138,"line":917},[136,6004,3757],{"class":149},[136,6006,6007,6009,6011],{"class":138,"line":926},[136,6008,3763],{"class":191},[136,6010,195],{"class":164},[136,6012,231],{"class":164},[136,6014,6015],{"class":138,"line":932},[136,6016,3773],{"class":149},[136,6018,6019,6021,6023,6025,6027,6029,6031,6033],{"class":138,"line":941},[136,6020,3779],{"class":191},[136,6022,195],{"class":164},[136,6024,836],{"class":164},[136,6026,3786],{"class":160},[136,6028,860],{"class":164},[136,6030,3791],{"class":207},[136,6032,3794],{"class":164},[136,6034,220],{"class":164},[136,6036,6037],{"class":138,"line":946},[136,6038,5157],{"class":149},[136,6040,6041,6043,6045,6047,6049],{"class":138,"line":2683},[136,6042,831],{"class":191},[136,6044,195],{"class":164},[136,6046,1527],{"class":164},[136,6048,5168],{"class":207},[136,6050,5171],{"class":164},[136,6052,6053],{"class":138,"line":3325},[136,6054,261],{"class":164},[136,6056,6057,6059,6061],{"class":138,"line":3330},[136,6058,3822],{"class":191},[136,6060,195],{"class":164},[136,6062,168],{"class":160},[136,6064,6065,6067,6069,6071],{"class":138,"line":3335},[136,6066,3832],{"class":164},[136,6068,3835],{"class":452},[136,6070,204],{"class":160},[136,6072,825],{"class":164},[136,6074,6075,6077,6079,6081,6083],{"class":138,"line":3356},[136,6076,3137],{"class":191},[136,6078,195],{"class":164},[136,6080,242],{"class":164},[136,6082,5204],{"class":207},[136,6084,3147],{"class":164},[136,6086,6087,6089],{"class":138,"line":3367},[136,6088,3859],{"class":164},[136,6090,923],{"class":160},[136,6092,6093],{"class":138,"line":3373},[136,6094,3869],{"class":160},[136,6096,6097],{"class":138,"line":3400},[136,6098,3875],{"class":164},[13,6100,6101,6102,6104,6105,6108,6109,6112],{},"変わった箇所はpng,jpg,gifの",[52,6103,125],{},"の設定です。4の設定ではloaderを使用するために",[52,6106,6107],{},"use","で設定しました。しかし5では",[52,6110,6111],{},"type: 'asset\u002Fresource'","を使用すること4で実装していた動きを実装できます。",[13,6114,6115],{},"エイリアスなどの設定は変わりません。webpackにおける画像ファイルの設定以上となります。",[39,6117,4226],{"id":4226},[13,6119,6120],{},"これらの設定があればひとまずsassとjsを用いた作成ができそうです。ですがwebエンジニアを悩ませるこれの対策をしなくてはいけません。",[6122,6123],"image-render",{":src":6124,":width":6125,":center":6126},"'_mix\u002FInternet-Explorer-Logo.png'","'300px'","true",[13,6128,6129],{},"Interner Explorer（以後IE）です。特にJSが影響を受けます。JSにはES5、ES6という2種類の記述方法があります。今回はその違いの説明は省きますが、ES6はES5より効率的な書き方ができます。しかしIEはES5の書き方しか受け付けず、ES6の書き方は構文エラーを起こして実行できないというクソ仕様です。",[13,6131,6132,6133,6135],{},"そのためES6のJSを使用するにはES5の記述に変換する必要があります。その変換をしてくれるのがBabelです。webpackには",[52,6134,3443],{},"というものがあるので、それを利用してバンドルと同時に変換（トランスコンパイル）を行いましょう。",[13,6137,6138],{},"試しにIEでは使用できないアロー関数と定数宣言を書いておきます。",[71,6140,6143],{"className":129,"code":6141,"filename":6142,"language":132,"meta":79,"style":79},"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",[52,6144,6145,6163,6181,6194,6198,6235,6270,6276,6280,6298,6307,6323],{"__ignoreMap":79},[136,6146,6147,6149,6152,6154,6156,6159,6161],{"class":138,"line":139},[136,6148,5547],{"class":213},[136,6150,6151],{"class":160}," $ ",[136,6153,5553],{"class":213},[136,6155,242],{"class":164},[136,6157,6158],{"class":207},"jquery",[136,6160,247],{"class":164},[136,6162,420],{"class":164},[136,6164,6165,6167,6170,6172,6174,6177,6179],{"class":138,"line":146},[136,6166,5547],{"class":213},[136,6168,6169],{"class":160}," funcs ",[136,6171,5553],{"class":213},[136,6173,242],{"class":164},[136,6175,6176],{"class":207},".\u002Ffunctions",[136,6178,247],{"class":164},[136,6180,420],{"class":164},[136,6182,6183,6185,6187,6190,6192],{"class":138,"line":153},[136,6184,5547],{"class":213},[136,6186,242],{"class":164},[136,6188,6189],{"class":207},"~\u002Fsass\u002Fstyle.scss",[136,6191,247],{"class":164},[136,6193,420],{"class":164},[136,6195,6196],{"class":138,"line":4},[136,6197,143],{"emptyLinePlaceholder":142},[136,6199,6200,6202,6204,6206,6209,6211,6213,6215,6218,6220,6222,6225,6227,6230,6233],{"class":138,"line":176},[136,6201,214],{"class":452},[136,6203,204],{"class":160},[136,6205,247],{"class":164},[136,6207,6208],{"class":207},"#submmit",[136,6210,247],{"class":164},[136,6212,210],{"class":160},[136,6214,688],{"class":164},[136,6216,6217],{"class":452},"on",[136,6219,204],{"class":160},[136,6221,247],{"class":164},[136,6223,6224],{"class":207},"click",[136,6226,247],{"class":164},[136,6228,6229],{"class":164},",()",[136,6231,6232],{"class":156},"=>",[136,6234,825],{"class":164},[136,6236,6237,6240,6243,6245,6248,6250,6252,6255,6257,6259,6261,6264,6266,6268],{"class":138,"line":182},[136,6238,6239],{"class":213},"    return",[136,6241,6242],{"class":160}," funcs",[136,6244,688],{"class":164},[136,6246,6247],{"class":452},"addNewText",[136,6249,204],{"class":191},[136,6251,247],{"class":164},[136,6253,6254],{"class":207},"#app",[136,6256,247],{"class":164},[136,6258,849],{"class":164},[136,6260,247],{"class":164},[136,6262,6263],{"class":207},"#inputs",[136,6265,247],{"class":164},[136,6267,210],{"class":191},[136,6269,420],{"class":164},[136,6271,6272,6274],{"class":138,"line":188},[136,6273,860],{"class":164},[136,6275,923],{"class":160},[136,6277,6278],{"class":138,"line":223},[136,6279,143],{"emptyLinePlaceholder":142},[136,6281,6282,6284,6287,6289,6291,6294,6296],{"class":138,"line":234},[136,6283,284],{"class":156},[136,6285,6286],{"class":160}," message ",[136,6288,165],{"class":164},[136,6290,1527],{"class":164},[136,6292,6293],{"class":207},"use in IE",[136,6295,328],{"class":164},[136,6297,420],{"class":164},[136,6299,6300,6303,6305],{"class":138,"line":252},[136,6301,6302],{"class":164},"()",[136,6304,6232],{"class":156},[136,6306,825],{"class":164},[136,6308,6309,6312,6314,6316,6318,6321],{"class":138,"line":258},[136,6310,6311],{"class":160},"    console",[136,6313,688],{"class":164},[136,6315,5571],{"class":452},[136,6317,204],{"class":191},[136,6319,6320],{"class":160},"message",[136,6322,923],{"class":191},[136,6324,6325],{"class":138,"line":264},[136,6326,395],{"class":164},[13,6328,6329],{},"ちなみにbundle.jsは以下の通りに書かれていました。ES6の書き方がで出力されています。",[71,6331,6333],{"className":129,"code":6332,"filename":5168,"language":132,"meta":79,"style":79},"\u002F\u002F...\n\u002F\u002F const message = \\\"use in IE\\\";\\n()=>{\\n    console.log(message)\n\u002F\u002F...\n",[52,6334,6335,6339,6344],{"__ignoreMap":79},[136,6336,6337],{"class":138,"line":139},[136,6338,401],{"class":149},[136,6340,6341],{"class":138,"line":146},[136,6342,6343],{"class":149},"\u002F\u002F const message = \\\"use in IE\\\";\\n()=>{\\n    console.log(message)\n",[136,6345,6346],{"class":138,"line":153},[136,6347,401],{"class":149},[98,6349,6351],{"id":6350},"モジュールをインストールしjsのruleを設定","モジュールをインストールし、JSのruleを設定",[13,6353,6354],{},"まずはloaderをインストールします。",[71,6356,6359],{"className":6357,"code":6358,"language":76},[74],"npm install -D babel-loader @babel\u002Fcore @babel\u002Fpreset-env\n",[52,6360,6358],{"__ignoreMap":79},[13,6362,6363,6364,6369,6370,6373],{},"そして",[17,6365,6368],{"href":6366,"rel":6367},"https:\u002F\u002Fwebpack.js.org\u002Floaders\u002Fbabel-loader\u002F",[5390],"ドキュメントのまま","ですがJSファイルに対しての",[52,6371,6372],{},"rule","を追加し、babel-loaderを適用させる様にします。",[71,6375,6378],{"className":129,"code":6376,"filename":6377,"language":132,"meta":79,"style":79},"\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",[52,6379,6380,6385,6394,6402,6407,6411,6433,6451,6459,6473,6481,6498,6503,6507,6511,6515,6547,6561,6569,6580,6585,6599,6615,6619,6630,6635,6639,6644,6650,6654],{"__ignoreMap":79},[136,6381,6382],{"class":138,"line":139},[136,6383,6384],{"class":149},"\u002F\u002F ...\n",[136,6386,6387,6390,6392],{"class":138,"line":146},[136,6388,6389],{"class":4321},"module",[136,6391,195],{"class":164},[136,6393,231],{"class":164},[136,6395,6396,6398,6400],{"class":138,"line":153},[136,6397,378],{"class":4321},[136,6399,195],{"class":164},[136,6401,168],{"class":191},[136,6403,6404],{"class":138,"line":4},[136,6405,6406],{"class":149},"        \u002F\u002F 追加\n",[136,6408,6409],{"class":138,"line":176},[136,6410,3370],{"class":164},[136,6412,6413,6415,6417,6419,6421,6423,6425,6427,6429,6431],{"class":138,"line":182},[136,6414,3376],{"class":191},[136,6416,195],{"class":164},[136,6418,198],{"class":164},[136,6420,201],{"class":160},[136,6422,3385],{"class":207},[136,6424,3388],{"class":164},[136,6426,3391],{"class":207},[136,6428,214],{"class":213},[136,6430,217],{"class":164},[136,6432,220],{"class":164},[136,6434,6435,6437,6439,6441,6443,6445,6447,6449],{"class":138,"line":188},[136,6436,3403],{"class":191},[136,6438,195],{"class":164},[136,6440,3408],{"class":164},[136,6442,1980],{"class":207},[136,6444,2957],{"class":164},[136,6446,3415],{"class":207},[136,6448,3418],{"class":164},[136,6450,220],{"class":164},[136,6452,6453,6455,6457],{"class":138,"line":223},[136,6454,3426],{"class":191},[136,6456,195],{"class":164},[136,6458,231],{"class":164},[136,6460,6461,6463,6465,6467,6469,6471],{"class":138,"line":234},[136,6462,3020],{"class":191},[136,6464,195],{"class":164},[136,6466,242],{"class":164},[136,6468,3443],{"class":207},[136,6470,247],{"class":164},[136,6472,220],{"class":164},[136,6474,6475,6477,6479],{"class":138,"line":252},[136,6476,3036],{"class":191},[136,6478,195],{"class":164},[136,6480,231],{"class":164},[136,6482,6483,6486,6488,6490,6492,6494,6496],{"class":138,"line":258},[136,6484,6485],{"class":191},"                    presets",[136,6487,195],{"class":164},[136,6489,1416],{"class":191},[136,6491,247],{"class":164},[136,6493,3472],{"class":207},[136,6495,247],{"class":164},[136,6497,273],{"class":191},[136,6499,6500],{"class":138,"line":264},[136,6501,6502],{"class":164},"                }\n",[136,6504,6505],{"class":138,"line":270},[136,6506,2038],{"class":164},[136,6508,6509],{"class":138,"line":276},[136,6510,1501],{"class":164},[136,6512,6513],{"class":138,"line":281},[136,6514,3370],{"class":164},[136,6516,6517,6519,6521,6523,6525,6527,6529,6531,6533,6535,6537,6539,6541,6543,6545],{"class":138,"line":297},[136,6518,3376],{"class":191},[136,6520,195],{"class":164},[136,6522,198],{"class":164},[136,6524,201],{"class":160},[136,6526,204],{"class":164},[136,6528,2954],{"class":207},[136,6530,2957],{"class":164},[136,6532,2960],{"class":207},[136,6534,2957],{"class":164},[136,6536,2965],{"class":207},[136,6538,210],{"class":164},[136,6540,2970],{"class":207},[136,6542,214],{"class":213},[136,6544,217],{"class":164},[136,6546,220],{"class":164},[136,6548,6549,6551,6553,6555,6557,6559],{"class":138,"line":314},[136,6550,3403],{"class":191},[136,6552,195],{"class":164},[136,6554,198],{"class":164},[136,6556,1980],{"class":207},[136,6558,217],{"class":164},[136,6560,220],{"class":164},[136,6562,6563,6565,6567],{"class":138,"line":320},[136,6564,3426],{"class":191},[136,6566,195],{"class":164},[136,6568,168],{"class":191},[136,6570,6571,6574,6576,6578],{"class":138,"line":338},[136,6572,6573],{"class":160},"                MiniCssExtractPlugin",[136,6575,688],{"class":164},[136,6577,3008],{"class":160},[136,6579,220],{"class":164},[136,6581,6582],{"class":138,"line":344},[136,6583,6584],{"class":164},"                {\n",[136,6586,6587,6589,6591,6593,6595,6597],{"class":138,"line":354},[136,6588,4971],{"class":191},[136,6590,195],{"class":164},[136,6592,242],{"class":164},[136,6594,3027],{"class":207},[136,6596,247],{"class":164},[136,6598,220],{"class":164},[136,6600,6601,6603,6605,6607,6609,6611,6613],{"class":138,"line":365},[136,6602,4986],{"class":191},[136,6604,195],{"class":164},[136,6606,3041],{"class":164},[136,6608,3044],{"class":191},[136,6610,195],{"class":164},[136,6612,2031],{"class":913},[136,6614,3051],{"class":164},[136,6616,6617],{"class":138,"line":370},[136,6618,5923],{"class":164},[136,6620,6621,6624,6626,6628],{"class":138,"line":375},[136,6622,6623],{"class":164},"                '",[136,6625,3063],{"class":207},[136,6627,247],{"class":164},[136,6629,220],{"class":164},[136,6631,6632],{"class":138,"line":387},[136,6633,6634],{"class":191},"            ]\n",[136,6636,6637],{"class":138,"line":392},[136,6638,1501],{"class":164},[136,6640,6641],{"class":138,"line":398},[136,6642,6643],{"class":149},"        \u002F\u002F ...\n",[136,6645,6646,6648],{"class":138,"line":404},[136,6647,5345],{"class":191},[136,6649,220],{"class":164},[136,6651,6652],{"class":138,"line":409},[136,6653,5368],{"class":164},[136,6655,6656],{"class":138,"line":736},[136,6657,6384],{"class":149},[13,6659,6660],{},"これでbabelが有効になり、トランスコンパイルされます。実際に動かしてみてbundle.jsをみてみると",[71,6662,6665],{"className":6663,"code":6664,"filename":5168,"language":76,"meta":79},[74],"var message = \\\"use in IE\\\";\\n\\n(function () {\\n  console.log(message);\\n})\n",[52,6666,6664],{"__ignoreMap":79},[13,6668,6669],{},"このようにES5の書き方に直してくれました。",[98,6671,6672],{"id":6672},"特定のビルドだけでトランスコンパイルしたい時",[13,6674,6675,6676,6679,6680,6683],{},"ちなみに今回は数行のコードなので十分ですが、本番では大量のファイルと記述を変換するので時間がかかったりメモリを食います。",[52,6677,6678],{},"npm run watch","でもそこそこメモリを食う様になります。対策としては環境変数を用いて本番ビルドの時だけトランスコンパイルさせる様にします。簡単な例としてまず",[52,6681,6682],{},"packge.json","でnode.jsの変数をコマンド上で定義します。",[71,6685,6690],{"className":6686,"code":6687,"filename":6688,"language":6689,"meta":79,"style":79},"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",[52,6691,6692,6706,6727,6747,6776],{"__ignoreMap":79},[136,6693,6694,6697,6700,6702,6704],{"class":138,"line":139},[136,6695,6696],{"class":164},"  \"",[136,6698,6699],{"class":207},"scripts",[136,6701,328],{"class":164},[136,6703,5431],{"class":160},[136,6705,825],{"class":164},[136,6707,6708,6711,6714,6716,6718,6720,6723,6725],{"class":138,"line":146},[136,6709,6710],{"class":164},"    \"",[136,6712,6713],{"class":156},"build",[136,6715,328],{"class":164},[136,6717,195],{"class":164},[136,6719,1527],{"class":164},[136,6721,6722],{"class":207},"es5=true npx webpack-cli build",[136,6724,328],{"class":164},[136,6726,220],{"class":164},[136,6728,6729,6731,6734,6736,6738,6740,6743,6745],{"class":138,"line":153},[136,6730,6710],{"class":164},[136,6732,6733],{"class":156},"watch",[136,6735,328],{"class":164},[136,6737,195],{"class":164},[136,6739,1527],{"class":164},[136,6741,6742],{"class":207},"npx webpack-cli watch",[136,6744,328],{"class":164},[136,6746,220],{"class":164},[136,6748,6749,6751,6754,6756,6758,6760,6763,6766,6769,6771,6774],{"class":138,"line":4},[136,6750,6710],{"class":164},[136,6752,6753],{"class":156},"test",[136,6755,328],{"class":164},[136,6757,195],{"class":164},[136,6759,1527],{"class":164},[136,6761,6762],{"class":207},"echo ",[136,6764,6765],{"class":160},"\\\"",[136,6767,6768],{"class":207},"Error: no test specified",[136,6770,6765],{"class":160},[136,6772,6773],{"class":207}," && exit 1",[136,6775,5171],{"class":164},[136,6777,6778,6781],{"class":138,"line":176},[136,6779,6780],{"class":164},"  }",[136,6782,220],{"class":160},[13,6784,6785,6786,6789,6790,6793,6794,6796],{},"今回の場合、",[52,6787,6788],{},"npm run build","した時に",[52,6791,6792],{},"es5=true","という変数が定義されます。そして",[52,6795,131],{},"のrulesをこんな風に変更してみます。",[71,6798,6800],{"className":129,"code":6799,"filename":6377,"language":132,"meta":79,"style":79},"\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",[52,6801,6802,6806,6811,6821,6825,6857,6871,6879,6889,6893,6907,6923,6927,6937,6941,6945,6949,6981,6989,7001,7005,7017,7021,7025,7029,7034,7050,7060,7064,7086,7104,7112,7126,7134,7150,7154,7158,7162,7166,7170,7174,7182,7186,7200,7204,7218,7222,7230,7238,7242,7246,7250],{"__ignoreMap":79},[136,6803,6804],{"class":138,"line":139},[136,6805,6384],{"class":149},[136,6807,6808],{"class":138,"line":146},[136,6809,6810],{"class":149},"\u002F\u002F rulesを外で定義しておく。\n",[136,6812,6813,6815,6817,6819],{"class":138,"line":153},[136,6814,157],{"class":156},[136,6816,161],{"class":160},[136,6818,165],{"class":164},[136,6820,168],{"class":160},[136,6822,6823],{"class":138,"line":4},[136,6824,185],{"class":164},[136,6826,6827,6829,6831,6833,6835,6837,6839,6841,6843,6845,6847,6849,6851,6853,6855],{"class":138,"line":176},[136,6828,192],{"class":191},[136,6830,195],{"class":164},[136,6832,198],{"class":164},[136,6834,201],{"class":160},[136,6836,204],{"class":164},[136,6838,2954],{"class":207},[136,6840,2957],{"class":164},[136,6842,2960],{"class":207},[136,6844,2957],{"class":164},[136,6846,2965],{"class":207},[136,6848,210],{"class":164},[136,6850,2970],{"class":207},[136,6852,214],{"class":213},[136,6854,217],{"class":164},[136,6856,220],{"class":164},[136,6858,6859,6861,6863,6865,6867,6869],{"class":138,"line":182},[136,6860,1973],{"class":191},[136,6862,195],{"class":164},[136,6864,198],{"class":164},[136,6866,1980],{"class":207},[136,6868,217],{"class":164},[136,6870,220],{"class":164},[136,6872,6873,6875,6877],{"class":138,"line":188},[136,6874,226],{"class":191},[136,6876,195],{"class":164},[136,6878,168],{"class":160},[136,6880,6881,6883,6885,6887],{"class":138,"line":223},[136,6882,3003],{"class":160},[136,6884,688],{"class":164},[136,6886,3008],{"class":160},[136,6888,220],{"class":164},[136,6890,6891],{"class":138,"line":234},[136,6892,3015],{"class":164},[136,6894,6895,6897,6899,6901,6903,6905],{"class":138,"line":252},[136,6896,3020],{"class":191},[136,6898,195],{"class":164},[136,6900,242],{"class":164},[136,6902,3027],{"class":207},[136,6904,247],{"class":164},[136,6906,220],{"class":164},[136,6908,6909,6911,6913,6915,6917,6919,6921],{"class":138,"line":258},[136,6910,3036],{"class":191},[136,6912,195],{"class":164},[136,6914,3041],{"class":164},[136,6916,3044],{"class":191},[136,6918,195],{"class":164},[136,6920,2031],{"class":913},[136,6922,3051],{"class":164},[136,6924,6925],{"class":138,"line":264},[136,6926,3056],{"class":164},[136,6928,6929,6931,6933,6935],{"class":138,"line":270},[136,6930,1468],{"class":164},[136,6932,3063],{"class":207},[136,6934,247],{"class":164},[136,6936,220],{"class":164},[136,6938,6939],{"class":138,"line":276},[136,6940,2048],{"class":160},[136,6942,6943],{"class":138,"line":281},[136,6944,261],{"class":164},[136,6946,6947],{"class":138,"line":297},[136,6948,185],{"class":164},[136,6950,6951,6953,6955,6957,6959,6961,6963,6965,6967,6969,6971,6973,6975,6977,6979],{"class":138,"line":314},[136,6952,192],{"class":191},[136,6954,195],{"class":164},[136,6956,198],{"class":164},[136,6958,201],{"class":160},[136,6960,204],{"class":164},[136,6962,3097],{"class":207},[136,6964,2957],{"class":164},[136,6966,3102],{"class":207},[136,6968,2957],{"class":164},[136,6970,3107],{"class":207},[136,6972,210],{"class":164},[136,6974,214],{"class":213},[136,6976,217],{"class":164},[136,6978,3121],{"class":775},[136,6980,220],{"class":164},[136,6982,6983,6985,6987],{"class":138,"line":320},[136,6984,3128],{"class":191},[136,6986,195],{"class":164},[136,6988,231],{"class":164},[136,6990,6991,6993,6995,6997,6999],{"class":138,"line":338},[136,6992,3137],{"class":191},[136,6994,195],{"class":164},[136,6996,242],{"class":164},[136,6998,5916],{"class":207},[136,7000,3147],{"class":164},[136,7002,7003],{"class":138,"line":344},[136,7004,1501],{"class":164},[136,7006,7007,7009,7011,7013,7015],{"class":138,"line":354},[136,7008,3156],{"class":191},[136,7010,195],{"class":164},[136,7012,242],{"class":164},[136,7014,3163],{"class":207},[136,7016,3147],{"class":164},[136,7018,7019],{"class":138,"line":365},[136,7020,2053],{"class":164},[136,7022,7023],{"class":138,"line":370},[136,7024,273],{"class":160},[136,7026,7027],{"class":138,"line":375},[136,7028,143],{"emptyLinePlaceholder":142},[136,7030,7031],{"class":138,"line":387},[136,7032,7033],{"class":149},"\u002F\u002F es5がtrueならばバベルを適用\n",[136,7035,7036,7038,7040,7042,7044,7046,7048],{"class":138,"line":392},[136,7037,3338],{"class":213},[136,7039,3341],{"class":160},[136,7041,688],{"class":164},[136,7043,3346],{"class":160},[136,7045,688],{"class":164},[136,7047,3351],{"class":160},[136,7049,825],{"class":164},[136,7051,7052,7054,7056,7058],{"class":138,"line":398},[136,7053,378],{"class":160},[136,7055,688],{"class":164},[136,7057,808],{"class":452},[136,7059,811],{"class":191},[136,7061,7062],{"class":138,"line":404},[136,7063,3370],{"class":164},[136,7065,7066,7068,7070,7072,7074,7076,7078,7080,7082,7084],{"class":138,"line":409},[136,7067,3376],{"class":191},[136,7069,195],{"class":164},[136,7071,198],{"class":164},[136,7073,201],{"class":160},[136,7075,3385],{"class":207},[136,7077,3388],{"class":164},[136,7079,3391],{"class":207},[136,7081,214],{"class":213},[136,7083,217],{"class":164},[136,7085,220],{"class":164},[136,7087,7088,7090,7092,7094,7096,7098,7100,7102],{"class":138,"line":736},[136,7089,3403],{"class":191},[136,7091,195],{"class":164},[136,7093,3408],{"class":164},[136,7095,1980],{"class":207},[136,7097,2957],{"class":164},[136,7099,3415],{"class":207},[136,7101,3418],{"class":164},[136,7103,220],{"class":164},[136,7105,7106,7108,7110],{"class":138,"line":790},[136,7107,3426],{"class":191},[136,7109,195],{"class":164},[136,7111,231],{"class":164},[136,7113,7114,7116,7118,7120,7122,7124],{"class":138,"line":795},[136,7115,3436],{"class":191},[136,7117,195],{"class":164},[136,7119,242],{"class":164},[136,7121,3443],{"class":207},[136,7123,247],{"class":164},[136,7125,220],{"class":164},[136,7127,7128,7130,7132],{"class":138,"line":814},[136,7129,3453],{"class":191},[136,7131,195],{"class":164},[136,7133,231],{"class":164},[136,7135,7136,7138,7140,7142,7144,7146,7148],{"class":138,"line":828},[136,7137,3463],{"class":191},[136,7139,195],{"class":164},[136,7141,1416],{"class":191},[136,7143,247],{"class":164},[136,7145,3472],{"class":207},[136,7147,247],{"class":164},[136,7149,273],{"class":191},[136,7151,7152],{"class":138,"line":876},[136,7153,3482],{"class":164},[136,7155,7156],{"class":138,"line":893},[136,7157,2038],{"class":164},[136,7159,7160],{"class":138,"line":905},[136,7161,255],{"class":164},[136,7163,7164],{"class":138,"line":917},[136,7165,929],{"class":191},[136,7167,7168],{"class":138,"line":926},[136,7169,395],{"class":164},[136,7171,7172],{"class":138,"line":932},[136,7173,143],{"emptyLinePlaceholder":142},[136,7175,7176,7178,7180],{"class":138,"line":941},[136,7177,412],{"class":164},[136,7179,292],{"class":164},[136,7181,231],{"class":164},[136,7183,7184],{"class":138,"line":946},[136,7185,4711],{"class":149},[136,7187,7188,7190,7192,7194,7196,7198],{"class":138,"line":2683},[136,7189,300],{"class":191},[136,7191,195],{"class":164},[136,7193,242],{"class":164},[136,7195,307],{"class":207},[136,7197,247],{"class":164},[136,7199,220],{"class":164},[136,7201,7202],{"class":138,"line":3325},[136,7203,317],{"class":160},[136,7205,7206,7208,7210,7212,7214,7216],{"class":138,"line":3330},[136,7207,323],{"class":191},[136,7209,195],{"class":164},[136,7211,328],{"class":164},[136,7213,331],{"class":207},[136,7215,328],{"class":164},[136,7217,220],{"class":164},[136,7219,7220],{"class":138,"line":3335},[136,7221,341],{"class":160},[136,7223,7224,7226,7228],{"class":138,"line":3356},[136,7225,347],{"class":191},[136,7227,195],{"class":164},[136,7229,231],{"class":164},[136,7231,7232,7234,7236],{"class":138,"line":3367},[136,7233,357],{"class":191},[136,7235,195],{"class":164},[136,7237,362],{"class":160},[136,7239,7240],{"class":138,"line":3373},[136,7241,261],{"class":164},[136,7243,7244],{"class":138,"line":3400},[136,7245,143],{"emptyLinePlaceholder":142},[136,7247,7248],{"class":138,"line":3423},[136,7249,267],{"class":149},[136,7251,7252],{"class":138,"line":3433},[136,7253,395],{"class":164},[13,7255,7256,7258,7259,7261,7262,7265,7266,7268,7269,7271,7272,7274,7275,7277],{},[52,7257,125],{},"を",[52,7260,412],{},"の外に出しておいて、",[52,7263,7264],{},"process.env.es5","の値によって",[52,7267,125],{},"を変更できる様にします。これで",[52,7270,125],{},"の分岐ができました。",[52,7273,6713],{},"の時だけBabelが使用され、",[52,7276,6733],{},"の時はBabelが無しになります。この辺はプロジェクトごとに好きに設定してみてください。",[39,7279,4229],{"id":4229},[13,7281,7282],{},"最後に複数のバンドルファイルを出力する方法を解説します。今は参照されているアセットファイルを全てbundle.js、bundle.cssにしています。しかしプロジェクトによっては",[26,7284,7285,7288],{},[29,7286,7287],{},"一般ユーザーが閲覧するページのjs\u002Fcss",[29,7289,7290],{},"管理画面など特定のユーザーのみが使用するページのjs\u002Fcss",[13,7292,7293,7294,7297],{},"など複数パターンのファイルを出力したい時があります。例えば私はよく管理画面のUIはbootstrapとvueを使って構築してしまいます。そして一般画面はせいぜいjqueryを使用して200行にも満たないこともあります。管理画面はbootstrap合わせていろんなライブラリを使うため本番ビルドしてもかなりファイル容量を食います。一方、一般画面はそれほど大きくなりません。そんな時に全て一つの",[52,7295,7296],{},"bundle.js\u002Fcss","にまとめては一般画面に重いファイルを配ってしまいますし、場合によっては管理画面の構築コードが漏れてしまうのでよろしくありません。",[98,7299,7300],{"id":7300},"作成目標とsrcを作成",[13,7302,7303,7304,849,7307,89,7310,849,7312,7315],{},"このような状況もよくあるので複数のバンドルファイルを出力できる様にしましょう。上記の様な状況として管理画面の",[52,7305,7306],{},"admin.js",[52,7308,7309],{},"admin.css",[52,7311,6142],{},[52,7313,7314],{},"main.css","が必要になったとしましょう。",[71,7317,7320],{"className":7318,"code":7319,"language":76},[74],".\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",[52,7321,7319],{"__ignoreMap":79},[13,7323,7324,7325,849,7327,7330],{},"srcにエントリーとなる",[52,7326,7306],{},[52,7328,7329],{},"admin.scss","を作成します。中身は適当にadminのみで使われている記述にしてみてください。ここでは省きます。",[98,7332,7334],{"id":7333},"webpackconfigjsを設定","webpack.config.jsを設定",[13,7336,6363,7337,1380,7339,849,7342,849,7345,7347],{},[52,7338,131],{},[52,7340,7341],{},"entry",[52,7343,7344],{},"output",[52,7346,803],{},"を以下の様に変更します。",[71,7349,7351],{"className":129,"code":7350,"filename":131,"language":132,"meta":79,"style":79},"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",[52,7352,7353,7361,7367,7382,7396,7400,7404,7409,7413,7421,7425,7443,7447,7459,7463,7471,7481,7493,7499,7503],{"__ignoreMap":79},[136,7354,7355,7357,7359],{"class":138,"line":139},[136,7356,412],{"class":164},[136,7358,292],{"class":164},[136,7360,231],{"class":164},[136,7362,7363,7365],{"class":138,"line":146},[136,7364,300],{"class":191},[136,7366,1406],{"class":164},[136,7368,7369,7372,7374,7376,7378,7380],{"class":138,"line":153},[136,7370,7371],{"class":191},"        main",[136,7373,195],{"class":164},[136,7375,247],{"class":164},[136,7377,307],{"class":207},[136,7379,247],{"class":164},[136,7381,220],{"class":164},[136,7383,7384,7387,7389,7391,7394],{"class":138,"line":4},[136,7385,7386],{"class":191},"        admin",[136,7388,195],{"class":164},[136,7390,247],{"class":164},[136,7392,7393],{"class":207},".\u002Fsrc\u002Fjs\u002Fadmin.js",[136,7395,3147],{"class":164},[136,7397,7398],{"class":138,"line":176},[136,7399,261],{"class":164},[136,7401,7402],{"class":138,"line":182},[136,7403,143],{"emptyLinePlaceholder":142},[136,7405,7406],{"class":138,"line":188},[136,7407,7408],{"class":149},"    \u002F\u002F 省略\n",[136,7410,7411],{"class":138,"line":223},[136,7412,143],{"emptyLinePlaceholder":142},[136,7414,7415,7417,7419],{"class":138,"line":234},[136,7416,3763],{"class":191},[136,7418,195],{"class":164},[136,7420,231],{"class":164},[136,7422,7423],{"class":138,"line":252},[136,7424,3773],{"class":149},[136,7426,7427,7429,7431,7433,7435,7437,7439,7441],{"class":138,"line":258},[136,7428,3779],{"class":191},[136,7430,195],{"class":164},[136,7432,836],{"class":164},[136,7434,3786],{"class":160},[136,7436,860],{"class":164},[136,7438,3791],{"class":207},[136,7440,3794],{"class":164},[136,7442,220],{"class":164},[136,7444,7445],{"class":138,"line":264},[136,7446,5157],{"class":149},[136,7448,7449,7451,7453,7455,7457],{"class":138,"line":270},[136,7450,831],{"class":191},[136,7452,195],{"class":164},[136,7454,1527],{"class":164},[136,7456,3510],{"class":207},[136,7458,5171],{"class":164},[136,7460,7461],{"class":138,"line":276},[136,7462,261],{"class":164},[136,7464,7465,7467,7469],{"class":138,"line":281},[136,7466,3822],{"class":191},[136,7468,195],{"class":164},[136,7470,168],{"class":160},[136,7472,7473,7475,7477,7479],{"class":138,"line":297},[136,7474,3832],{"class":164},[136,7476,3835],{"class":452},[136,7478,204],{"class":160},[136,7480,825],{"class":164},[136,7482,7483,7485,7487,7489,7491],{"class":138,"line":314},[136,7484,3137],{"class":191},[136,7486,195],{"class":164},[136,7488,242],{"class":164},[136,7490,3851],{"class":207},[136,7492,3147],{"class":164},[136,7494,7495,7497],{"class":138,"line":320},[136,7496,3859],{"class":164},[136,7498,923],{"class":160},[136,7500,7501],{"class":138,"line":338},[136,7502,3869],{"class":160},[136,7504,7505],{"class":138,"line":344},[136,7506,3875],{"class":164},[13,7508,7509,7510,7512],{},"注目して欲しいのは",[52,7511,7341],{},"です。",[71,7514,7516],{"className":129,"code":7515,"language":132,"meta":79,"style":79},"\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",[52,7517,7518,7523,7537,7541,7546,7552,7567,7580],{"__ignoreMap":79},[136,7519,7520],{"class":138,"line":139},[136,7521,7522],{"class":149},"\u002F\u002F 変更前\n",[136,7524,7525,7527,7529,7531,7533,7535],{"class":138,"line":146},[136,7526,7341],{"class":4321},[136,7528,195],{"class":164},[136,7530,242],{"class":164},[136,7532,307],{"class":207},[136,7534,247],{"class":164},[136,7536,220],{"class":164},[136,7538,7539],{"class":138,"line":153},[136,7540,143],{"emptyLinePlaceholder":142},[136,7542,7543],{"class":138,"line":4},[136,7544,7545],{"class":149},"\u002F\u002F 変更後\n",[136,7547,7548,7550],{"class":138,"line":176},[136,7549,7341],{"class":4321},[136,7551,1406],{"class":164},[136,7553,7554,7557,7559,7561,7563,7565],{"class":138,"line":182},[136,7555,7556],{"class":4321},"    main",[136,7558,195],{"class":164},[136,7560,247],{"class":164},[136,7562,307],{"class":207},[136,7564,247],{"class":164},[136,7566,220],{"class":164},[136,7568,7569,7572,7574,7576,7578],{"class":138,"line":188},[136,7570,7571],{"class":4321},"    admin",[136,7573,195],{"class":164},[136,7575,247],{"class":164},[136,7577,7393],{"class":207},[136,7579,3147],{"class":164},[136,7581,7582],{"class":138,"line":223},[136,7583,5368],{"class":164},[13,7585,7586,7587,7590,7591,7593],{},"今まではそれぞれのファイルを直接配列で指定してましたが、変更後ではオブジェクトにしています。オブジェクトのキーは",[52,7588,7589],{},"[name]","として利用できます。例えば、",[52,7592,7344],{},"でこの様に利用します。",[71,7595,7597],{"className":129,"code":7596,"language":132,"meta":79,"style":79},"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",[52,7598,7599,7607,7612,7631,7636,7649,7653,7661,7672,7684,7691],{"__ignoreMap":79},[136,7600,7601,7603,7605],{"class":138,"line":139},[136,7602,7344],{"class":4321},[136,7604,195],{"class":164},[136,7606,231],{"class":164},[136,7608,7609],{"class":138,"line":146},[136,7610,7611],{"class":149},"    \u002F\u002F  出力ファイルのディレクトリ名\n",[136,7613,7614,7617,7619,7621,7623,7625,7627,7629],{"class":138,"line":153},[136,7615,7616],{"class":4321},"    path",[136,7618,195],{"class":164},[136,7620,836],{"class":164},[136,7622,3786],{"class":160},[136,7624,860],{"class":164},[136,7626,3791],{"class":207},[136,7628,3794],{"class":164},[136,7630,220],{"class":164},[136,7632,7633],{"class":138,"line":4},[136,7634,7635],{"class":149},"    \u002F\u002F 出力ファイル名\n",[136,7637,7638,7641,7643,7645,7647],{"class":138,"line":176},[136,7639,7640],{"class":4321},"    filename",[136,7642,195],{"class":164},[136,7644,1527],{"class":164},[136,7646,3510],{"class":207},[136,7648,5171],{"class":164},[136,7650,7651],{"class":138,"line":182},[136,7652,5368],{"class":164},[136,7654,7655,7657,7659],{"class":138,"line":188},[136,7656,803],{"class":4321},[136,7658,195],{"class":164},[136,7660,168],{"class":160},[136,7662,7663,7666,7668,7670],{"class":138,"line":223},[136,7664,7665],{"class":164},"    new",[136,7667,3835],{"class":452},[136,7669,204],{"class":160},[136,7671,825],{"class":164},[136,7673,7674,7676,7678,7680,7682],{"class":138,"line":234},[136,7675,831],{"class":191},[136,7677,195],{"class":164},[136,7679,242],{"class":164},[136,7681,3851],{"class":207},[136,7683,3147],{"class":164},[136,7685,7686,7689],{"class":138,"line":252},[136,7687,7688],{"class":164},"    }",[136,7690,923],{"class":160},[136,7692,7693],{"class":138,"line":258},[136,7694,273],{"class":160},[13,7696,7697,7698,849,7700,7702,7703,4606,7705,7707,7708,4606,7710,4606,7712,4606,7714,7716],{},"変更前は全て",[52,7699,5168],{},[52,7701,5204],{},"と一定の名前でしたが、こうするとオブジェクトのキー名に応じて、",[52,7704,6142],{},[52,7706,7306],{},"など作成されます。実際にビルドをしてみると、",[52,7709,6142],{},[52,7711,7306],{},[52,7713,7314],{},[52,7715,7309],{},"が作成されました。",[39,7718,2822],{"id":2821},[13,7720,7721],{},"以上が今回の内容です。画像・Babelそして複数ファイルパターンができればもうプロジェクトで十分利用可能です。次回はhtmlをsrc配下で利用できるようにします。src配下のみで作業してコマンド打って完成したファイルがdistに出せる様にします。そしてまとめとしてこれらの構成とpugを使用したプロトタイプページの作成をしてみます。",[4171,7723,7724],{},"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":79,"searchDepth":153,"depth":153,"links":7726},[7727,7737,7741,7745],{"id":4235,"depth":146,"text":4235,"children":7728},[7729,7730,7731,7736],{"id":4238,"depth":153,"text":4238},{"id":4599,"depth":153,"text":4599},{"id":4626,"depth":153,"text":4626,"children":7732},[7733,7734,7735],{"id":4630,"depth":4,"text":4630},{"id":5226,"depth":4,"text":5226},{"id":5395,"depth":4,"text":5395},{"id":5597,"depth":153,"text":5597},{"id":4226,"depth":146,"text":4226,"children":7738},[7739,7740],{"id":6350,"depth":153,"text":6351},{"id":6672,"depth":153,"text":6672},{"id":4229,"depth":146,"text":4229,"children":7742},[7743,7744],{"id":7300,"depth":153,"text":7300},{"id":7333,"depth":153,"text":7334},{"id":2821,"depth":146,"text":2822},[4191],"2021-06-06","Babel、画像の処理と複数バンドル",{},"\u002Fseries\u002Fwell-study-webpack-2",{"title":20,"description":7748},"series\u002Fwell-study-webpack-2",[3391,4202],"HmfkSL8RL8-q0C9UnXt7ExxZBfF5TgF206dj6ahXmq8",{"id":7756,"title":7757,"body":7758,"category":8245,"createdAt":8246,"description":7757,"extension":4194,"index":4204,"meta":8247,"navigation":142,"path":8248,"publish":142,"seo":8249,"series":4204,"seriesTitle":4204,"stem":8250,"tag":8251,"thumbnail":8254,"updatedAt":4204,"__hash__":8255},"articles\u002Farticles\u002Flaravel-mixx-heroku-fail.md","Laravel mixのアセットがherokuで動かない時の対処法",{"type":10,"value":7759,"toc":8236},[7760,7763,7766,7769,7773,7780,7783,7786,7790,7803,7807,7810,7813,7817,7832,7848,7861,7871,7875,7881,7890,8049,8052,8199,8208,8211,8214,8225,8233],[13,7761,7762],{},"こんにちはjunです。最近よくLaravelの開発を行っていて、プロトタイプとかをherokuにあげるのですがLaravel mixのアセットが動かない（main.jsが404）でちょっと困ったので、今回はその対処法を書きたいと思います。",[13,7764,7765],{},"Laravel\bmixの説明を軽くするので、さっさと解決策みたいひとは「ビルドアセットをgitignoreしていた」から参照してください。なお使用環境は以下の通りです。",[13,7767,7768],{},"Laravel 6\nPHP 7.4\nNode.js 12.21（開発）\nNode.js 14.16（heroku）",[39,7770,7772],{"id":7771},"laravel-mixって","Laravel Mixって？",[13,7774,7775,7776,7779],{},"Laravel MixはLaravelが公式に出している、JS・CSSのアセットコンパイラとモジュールバンドラです。",[52,7777,7778],{},"resource","配下のjsやsassをコンパイルしたり、バンドルするwebpackの設定がすでにLaraveに最適化されています。webpackをほとんど触らずともvue、react、sass、そのほかjsライブラリをもちいた開発ができます。",[13,7781,7782],{},"resource 配下のアセットはLaravel Mixによってpublic配下に自動的に吐かれるようになっています。開発時にはnpm run watchをしていますが、よく見るとpublic配下に開発用ビルドしたアセットファイルが逐一置かれています。",[13,7784,7785],{},"大体のLaraveフロントエンドではこのMixを用いて開発していることが多いと思います。しかしherokuや本番環境にあげた時にちょっと問題がおきました。",[39,7787,7789],{"id":7788},"mainjs-is-not-found","main.js is not found",[13,7791,7792,7793,7795,7796,7798,7799,7802],{},"Laravel Mixでフロントを構築して、ある程度バック含めて完成したのでherokuにデプロイしてみました。ビルドは普通に成功し、満を辞して目的の画面をみても",[52,7794,7789],{},"となってしましました。",[52,7797,6142],{},"にはビルドしたvue.jsのプロジェクトがあるはずなのにと思い、サーバーに入って",[52,7800,7801],{},"public\u002Fjs","配下をみてみたところ、何もありませんでした。",[98,7804,7806],{"id":7805},"原因その１ビルドアセットをgitignoreしていた","原因その１：ビルドアセットをgitignoreしていた",[13,7808,7809],{},"ビルドされたアセットはpublic配下に置かれますが、ファイル量が膨大だったり、開発モードと本番モードが混じる可能性があること、あとどうせコロコロ変わるのでバージョン管理から外そうと思い、public\u002Fjsとpublic\u002Fcssはバージョン管理から外していました。",[13,7811,7812],{},"herokuは基本的にgitを用いてデプロイします。管理対象外のファイルはもちろんherokuサーバー上にないので、アセットがあるはずもありません。であればherokuにデプロイした時にLaravel Mixを叩いて、ビルドすれば解決します。",[98,7814,7816],{"id":7815},"原因その２laravel-mixがdevdependencies","原因その２：Laravel MixがdevDependencies",[13,7818,7819,7820,7823,7824,7827,7828,7831],{},"Herokuでは",[52,7821,7822],{},"NODE_ENV","が",[52,7825,7826],{},"production","（本番環境）で定義されていると、",[52,7829,7830],{},"devDependencies","がプリーニングされてしまい、ビルドがうまく走りません。",[1249,7833,7835,7836,7839],{"className":7834},[1252,5583],"\nデフォルトでは、Heroku は ​package.json​ の ​dependencies​ および ​devDependencies​ に記載されているすべての依存関係をインストールします。\n",[13,7837,7838],{},"インストールおよび​ビルドステップ​を実行した後、 Heroku はアプリケーションをデプロイする前に、​devDependencies​ に宣言されているパッケージを取り除きます。",[13,7840,7841],{},[7842,7843,7844],"small",{},[17,7845,7846],{"href":7846,"rel":7847},"https:\u002F\u002Fdevcenter.heroku.com\u002Fja\u002Farticles\u002Fnodejs-support#skip-pruning",[5390],[13,7849,7850,7851,7856,7857,7860],{},"インストールおよび​",[17,7852,7855],{"href":7853,"rel":7854},"https:\u002F\u002Fdevcenter.heroku.com\u002Farticles\u002Fnodejs-support#heroku-specific-build-steps",[5390],"ビルドステップ","​を実行した後、 Heroku はアプリケーションをデプロイする前に、",[52,7858,7859],{},"​devDependencies​"," に宣言されているパッケージを取り除きます。",[13,7862,7863,7864,7866,7867,7870],{},"対策としては",[52,7865,6688],{},"をいじって",[52,7868,7869],{},"dependencies","に移動します。デフォルトでLaravel Mixはdevの方にインストールされます。それを移動してプッシュすればひとまずLaravel Mixのビルドがうまくいきます。",[98,7872,7874],{"id":7873},"原因その３npm-run-productionを動かすように設定","原因その３：npm run productionを動かすように設定",[13,7876,7877,7878,7880],{},"その２に加えて、今度はherokuデプロイの際にLaravel Mixのビルドスクリプトがキックされるように設定します。herokuはNode.jsのプロジェクトがあり、そのスクリプトに",[52,7879,6788],{},"がある場合はそれを実行してくれます。",[13,7882,7883,7884,7886,7887,7889],{},"初期の",[52,7885,6688],{},"のスクリプトは",[52,7888,6713],{},"がないので、mixが実行されません。",[71,7891,7894],{"className":6686,"code":7892,"filename":7893,"language":6689,"meta":79,"style":79},"\"scripts\": {\n    \"dev\": \"npm run development\",\n    \"development\": \"cross-env NODE_ENV=development node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\",\n    \"watch\": \"npm run development -- --watch\",\n    \"watch-poll\": \"npm run watch -- --watch-poll\",\n    \"hot\": \"cross-env NODE_ENV=development node_modules\u002Fwebpack-dev-server\u002Fbin\u002Fwebpack-dev-server.js --inline --hot --disable-host-check --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\",\n    \"prod\": \"npm run production\",\n    \"production\": \"cross-env NODE_ENV=production node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --no-progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\"\n},\n","pakage.json",[52,7895,7896,7908,7928,7947,7966,7986,8006,8026,8043],{"__ignoreMap":79},[136,7897,7898,7900,7902,7904,7906],{"class":138,"line":139},[136,7899,328],{"class":164},[136,7901,6699],{"class":207},[136,7903,328],{"class":164},[136,7905,5431],{"class":160},[136,7907,825],{"class":164},[136,7909,7910,7912,7915,7917,7919,7921,7924,7926],{"class":138,"line":146},[136,7911,6710],{"class":164},[136,7913,7914],{"class":156},"dev",[136,7916,328],{"class":164},[136,7918,195],{"class":164},[136,7920,1527],{"class":164},[136,7922,7923],{"class":207},"npm run development",[136,7925,328],{"class":164},[136,7927,220],{"class":164},[136,7929,7930,7932,7934,7936,7938,7940,7943,7945],{"class":138,"line":153},[136,7931,6710],{"class":164},[136,7933,331],{"class":156},[136,7935,328],{"class":164},[136,7937,195],{"class":164},[136,7939,1527],{"class":164},[136,7941,7942],{"class":207},"cross-env NODE_ENV=development node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js",[136,7944,328],{"class":164},[136,7946,220],{"class":164},[136,7948,7949,7951,7953,7955,7957,7959,7962,7964],{"class":138,"line":4},[136,7950,6710],{"class":164},[136,7952,6733],{"class":156},[136,7954,328],{"class":164},[136,7956,195],{"class":164},[136,7958,1527],{"class":164},[136,7960,7961],{"class":207},"npm run development -- --watch",[136,7963,328],{"class":164},[136,7965,220],{"class":164},[136,7967,7968,7970,7973,7975,7977,7979,7982,7984],{"class":138,"line":176},[136,7969,6710],{"class":164},[136,7971,7972],{"class":156},"watch-poll",[136,7974,328],{"class":164},[136,7976,195],{"class":164},[136,7978,1527],{"class":164},[136,7980,7981],{"class":207},"npm run watch -- --watch-poll",[136,7983,328],{"class":164},[136,7985,220],{"class":164},[136,7987,7988,7990,7993,7995,7997,7999,8002,8004],{"class":138,"line":182},[136,7989,6710],{"class":164},[136,7991,7992],{"class":156},"hot",[136,7994,328],{"class":164},[136,7996,195],{"class":164},[136,7998,1527],{"class":164},[136,8000,8001],{"class":207},"cross-env NODE_ENV=development node_modules\u002Fwebpack-dev-server\u002Fbin\u002Fwebpack-dev-server.js --inline --hot --disable-host-check --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js",[136,8003,328],{"class":164},[136,8005,220],{"class":164},[136,8007,8008,8010,8013,8015,8017,8019,8022,8024],{"class":138,"line":188},[136,8009,6710],{"class":164},[136,8011,8012],{"class":156},"prod",[136,8014,328],{"class":164},[136,8016,195],{"class":164},[136,8018,1527],{"class":164},[136,8020,8021],{"class":207},"npm run production",[136,8023,328],{"class":164},[136,8025,220],{"class":164},[136,8027,8028,8030,8032,8034,8036,8038,8041],{"class":138,"line":223},[136,8029,6710],{"class":164},[136,8031,7826],{"class":156},[136,8033,328],{"class":164},[136,8035,195],{"class":164},[136,8037,1527],{"class":164},[136,8039,8040],{"class":207},"cross-env NODE_ENV=production node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --no-progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js",[136,8042,5171],{"class":164},[136,8044,8045,8047],{"class":138,"line":234},[136,8046,860],{"class":164},[136,8048,220],{"class":160},[13,8050,8051],{},"ちょうどprodというのがあるのでbuildに変えてやりましょう。",[71,8053,8055],{"className":6686,"code":8054,"filename":7893,"language":6689,"meta":79,"style":79},"\"scripts\": {\n    \"dev\": \"npm run development\",\n    \"development\": \"cross-env NODE_ENV=development node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\",\n    \"watch\": \"npm run development -- --watch\",\n    \"watch-poll\": \"npm run watch -- --watch-poll\",\n    \"hot\": \"cross-env NODE_ENV=development node_modules\u002Fwebpack-dev-server\u002Fbin\u002Fwebpack-dev-server.js --inline --hot --disable-host-check --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\",\n    \"build\": \"npm run production\",\n    \"production\": \"cross-env NODE_ENV=production node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --no-progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\"\n},\n",[52,8056,8057,8069,8087,8105,8123,8141,8159,8177,8193],{"__ignoreMap":79},[136,8058,8059,8061,8063,8065,8067],{"class":138,"line":139},[136,8060,328],{"class":164},[136,8062,6699],{"class":207},[136,8064,328],{"class":164},[136,8066,5431],{"class":160},[136,8068,825],{"class":164},[136,8070,8071,8073,8075,8077,8079,8081,8083,8085],{"class":138,"line":146},[136,8072,6710],{"class":164},[136,8074,7914],{"class":156},[136,8076,328],{"class":164},[136,8078,195],{"class":164},[136,8080,1527],{"class":164},[136,8082,7923],{"class":207},[136,8084,328],{"class":164},[136,8086,220],{"class":164},[136,8088,8089,8091,8093,8095,8097,8099,8101,8103],{"class":138,"line":153},[136,8090,6710],{"class":164},[136,8092,331],{"class":156},[136,8094,328],{"class":164},[136,8096,195],{"class":164},[136,8098,1527],{"class":164},[136,8100,7942],{"class":207},[136,8102,328],{"class":164},[136,8104,220],{"class":164},[136,8106,8107,8109,8111,8113,8115,8117,8119,8121],{"class":138,"line":4},[136,8108,6710],{"class":164},[136,8110,6733],{"class":156},[136,8112,328],{"class":164},[136,8114,195],{"class":164},[136,8116,1527],{"class":164},[136,8118,7961],{"class":207},[136,8120,328],{"class":164},[136,8122,220],{"class":164},[136,8124,8125,8127,8129,8131,8133,8135,8137,8139],{"class":138,"line":176},[136,8126,6710],{"class":164},[136,8128,7972],{"class":156},[136,8130,328],{"class":164},[136,8132,195],{"class":164},[136,8134,1527],{"class":164},[136,8136,7981],{"class":207},[136,8138,328],{"class":164},[136,8140,220],{"class":164},[136,8142,8143,8145,8147,8149,8151,8153,8155,8157],{"class":138,"line":182},[136,8144,6710],{"class":164},[136,8146,7992],{"class":156},[136,8148,328],{"class":164},[136,8150,195],{"class":164},[136,8152,1527],{"class":164},[136,8154,8001],{"class":207},[136,8156,328],{"class":164},[136,8158,220],{"class":164},[136,8160,8161,8163,8165,8167,8169,8171,8173,8175],{"class":138,"line":188},[136,8162,6710],{"class":164},[136,8164,6713],{"class":156},[136,8166,328],{"class":164},[136,8168,195],{"class":164},[136,8170,1527],{"class":164},[136,8172,8021],{"class":207},[136,8174,328],{"class":164},[136,8176,220],{"class":164},[136,8178,8179,8181,8183,8185,8187,8189,8191],{"class":138,"line":223},[136,8180,6710],{"class":164},[136,8182,7826],{"class":156},[136,8184,328],{"class":164},[136,8186,195],{"class":164},[136,8188,1527],{"class":164},[136,8190,8040],{"class":207},[136,8192,5171],{"class":164},[136,8194,8195,8197],{"class":138,"line":234},[136,8196,860],{"class":164},[136,8198,220],{"class":160},[13,8200,8201,8202,8204,8205,8207],{},"こうすれば",[52,8203,6788],{}," が ",[52,8206,8021],{}," を実行して本番用のアセットを作ってくれます。これで解決です。",[39,8209,8210],{"id":8210},"ビルドアセットがうまく出力されない時に考えるべきこと",[13,8212,8213],{},"今回はいくつかのファイルをビルドする必要があり、デプロイ作業が自動で行われる状況でした。開発環境ではアセットがあるのに、本番だとなくなっているという場合は以下のことを考えましょう。",[26,8215,8216,8219,8222],{},[29,8217,8218],{},"ファイルはある？（サーバーに入ってlsしてチェック）",[29,8220,8221],{},"ビルドに必要なモジュールがインストールされているか？",[29,8223,8224],{},"ビルドスクリプトはキックされているか？",[13,8226,8227,8228,8232],{},"大体こうゆうときはビルドがうまくいっていないので、そこからチェックしていくといいです。ちなみに私が検索した時のワードは ",[8229,8230,8231],"strong",{},"「heroku laravel mix ビルド」"," でした。それではまた。",[4171,8234,8235],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}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 .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}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);}",{"title":79,"searchDepth":153,"depth":153,"links":8237},[8238,8239,8244],{"id":7771,"depth":146,"text":7772},{"id":7788,"depth":146,"text":7789,"children":8240},[8241,8242,8243],{"id":7805,"depth":153,"text":7806},{"id":7815,"depth":153,"text":7816},{"id":7873,"depth":153,"text":7874},{"id":8210,"depth":146,"text":8210},[4191],"2021-03-27",{},"\u002Farticles\u002Flaravel-mixx-heroku-fail",{"title":7757,"description":7757},"articles\u002Flaravel-mixx-heroku-fail",[3391,4202,8252,8253],"laravel","infrastructure","_mix\u002F8_laravel-icon.3f70de72f3.jpg","zvECdzfredOonr51btVrUrKqFCKw247gmW-jXba47XU",{"id":8257,"title":4218,"body":8258,"category":10746,"createdAt":8246,"description":10747,"extension":4194,"index":139,"meta":10748,"navigation":142,"path":10749,"publish":142,"seo":10750,"series":4198,"seriesTitle":4199,"stem":10751,"tag":10752,"thumbnail":4203,"updatedAt":4204,"__hash__":10753},"series\u002Fseries\u002Fwell-study-webpack-1.md",{"type":10,"value":8259,"toc":10732},[8260,8263,8270,8273,8284,8287,8290,8301,8304,8307,8310,8321,8324,8327,8330,8338,8355,8358,8362,8365,8371,8374,8380,8395,8401,8404,8585,8588,8643,8657,8662,8775,8789,8797,8803,8872,8880,8886,8895,8899,8902,8904,8915,8918,8935,9059,9222,9331,9338,9354,9360,9363,9366,9369,9372,9378,9464,9473,9477,9480,9484,9487,9498,9501,9513,9519,9522,9862,9866,9869,9875,9878,9910,9962,9995,10003,10293,10299,10421,10427,10430,10657,10668,10681,10711,10714,10720,10723,10726,10729],[1249,8261,4213],{"className":8262},[1252,1253],[13,8264,8265,8266,8269],{},"こんにちはjunです。最近の自社開発では息を吸うようにNuxt.jsやVue.js、React.jsなどを使用しています。私もそれらのJSライブラリをよく使用するのですが、使いは初めて１年ほどにして「もっと",[8229,8267,8268],{},"JSライブラリやNode.jsの開発をしっかり理解しないと」"," という場面が増えてきました。",[13,8271,8272],{},"VueやNuxt、Reactなどは特に、ライブラリ自身のチュートリアルやインストール時のセットアップが充実しすぎてwebpack.config.jsさえ見ることもなくなりました。すぐに開発できるのが強みですが、弊害として",[26,8274,8275,8278,8281],{},[29,8276,8277],{},"実際の細かい原理や仕組みを把握できない",[29,8279,8280],{},"なにか個別にカスタマイズしようとしてもわからない",[29,8282,8283],{},"応用がわからない",[13,8285,8286],{},"といったことが生じています。フレームワークやライブラリは便利ですが、簡単でもいいので構成の概念を知っておくと細かいカスタマイズや環境構築ができるようになります。",[13,8288,8289],{},"VueやReactを使わないプロジェクトなんてざらにありますし、webpackの設定ができるだけでもフロントエンドの開発でできることが違ってきます。数回に分けてwebpackを使用した以下のパターンに分けて環境構築解説をしていきたいと思います。",[26,8291,8292,8295,8298],{},[29,8293,8294],{},"webpack基礎とSass・js",[29,8296,8297],{},"babelの導入、画像のバンドル、複数ファイル出力",[29,8299,8300],{},"htmlの取り扱いとまとめ",[13,8302,8303],{},"それではまず基礎編から初めていきます。",[39,8305,8306],{"id":8306},"webpackとは",[13,8308,8309],{},"まずwebpackとはについて解説します。webpackは静的モジュールバンドラーというもので、複数のJSファイルなどを１つのファイルにまとめることができます。1つにまとめることで",[26,8311,8312,8315,8318],{},[29,8313,8314],{},"依存性の解決（JSの読み込む順番などを気にしなくて済む）",[29,8316,8317],{},"モジュール化による保守性と安全性の向上",[29,8319,8320],{},"圧縮による軽量化",[13,8322,8323],{},"などが見込まれます。Browserifyというものなど、他にもバンドラーはありますが今は性能的、機能的にもwebpackがかなり主流になっています。",[13,8325,8326],{},"タスクランナー的な使い方も可能であり、watchして差分だけビルドして開発するなんてことも可能です。",[39,8328,8329],{"id":8329},"基礎的な概念",[13,8331,8332,8337],{},[17,8333,8336],{"href":8334,"rel":8335},"https:\u002F\u002Fwebpack.js.org\u002Fconcepts\u002F#browser-compatibility",[5390],"公式ドキュメント","にもある通り、構築において以下の概念が重要となります。",[26,8339,8340,8343,8346,8349,8352],{},[29,8341,8342],{},"Entry（バンドルの起点となるファイル）",[29,8344,8345],{},"Output（バンドルファイルの吐き出し先）",[29,8347,8348],{},"Loaders（JS以外のファイルを扱えるようにする）",[29,8350,8351],{},"Plugins（最適化したり、さらなる機能を追加する）",[29,8353,8354],{},"Mode（開発か本番か）",[13,8356,8357],{},"今のところ特にパッとしなくてもいいので、上記にあげた５パターンを再現するためにはこの概念が必要であること、そしてその通りに設定していることを頭に入れておいてください。",[39,8359,8361],{"id":8360},"まずは複数のjsファイルやライブラリをバンドルしてみよう","まずは複数のJSファイルやライブラリをバンドルしてみよう",[13,8363,8364],{},"まずはSassとかは忘れて、複数のJSファイルとモジュールの連携をやってみましょう。新しくディレクトリを作成してnpm initします。",[71,8366,8369],{"className":8367,"code":8368,"language":76},[74],"npm init\nnpm install -D webpack webpack-cli\n",[52,8370,8368],{"__ignoreMap":79},[13,8372,8373],{},"webpackは開発時しか使わないので -DをつけてdevDependenciesに入れます。インストール後にはnode_moduelsが作成されます。そして以下のディレクトリとファイルを作成します。",[71,8375,8378],{"className":8376,"code":8377,"language":76},[74],"├── dist #作成\n    ├── index.html #作成\n├── node_modules\n├── package-lock.json\n├── package.json\n├── webpack.config.js\n└── src　#作成\n    ├── functions.js　#作成\n    └── main.js　#作成\n",[52,8379,8377],{"__ignoreMap":79},[13,8381,8382,8383,89,8385,8388,8389,8391,8392,8394],{},"開発しているときは",[52,8384,6142],{},[52,8386,8387],{},"functions.js","に記述していきます。",[52,8390,8387],{},"には共通の関数的な物を書き、モジュールとしてはおなじみの",[52,8393,6158],{},"をインストールしておきます。",[71,8396,8399],{"className":8397,"code":8398,"language":76},[74],"npm install jquery --save\n",[52,8400,8398],{"__ignoreMap":79},[13,8402,8403],{},"index.htmlを適当に以下のようにしておきます。",[71,8405,8408],{"className":1272,"code":8406,"filename":8407,"language":84,"meta":79,"style":79},"\u003C!DOCTYPE html>\n\u003Chtml>\n    \u003Chead>\n        \u003Cmeta charset=\"utf-8\">\n        \u003Ctitle>webpackの練習\u003C\u002Ftitle>\n    \u003C\u002Fhead>\n\n    \u003Cbody>\n        \u003Cmain>\n            \u003Cdiv id='app'>\n\n            \u003C\u002Fdiv>\n        \u003C\u002Fmain>\n    \u003C\u002Fbody>\n    \u003Cscript src='.\u002Fbundle.js'>\u003C\u002Fscript>\n\u003C\u002Fhtml>\n","dist\u002Findex.html",[52,8409,8410,8422,8430,8439,8460,8479,8487,8491,8499,8507,8525,8529,8537,8545,8553,8577],{"__ignoreMap":79},[136,8411,8412,8415,8418,8420],{"class":138,"line":139},[136,8413,8414],{"class":164},"\u003C!",[136,8416,8417],{"class":191},"DOCTYPE",[136,8419,2502],{"class":156},[136,8421,4398],{"class":164},[136,8423,8424,8426,8428],{"class":138,"line":146},[136,8425,1285],{"class":164},[136,8427,84],{"class":191},[136,8429,4398],{"class":164},[136,8431,8432,8434,8437],{"class":138,"line":153},[136,8433,4393],{"class":164},[136,8435,8436],{"class":191},"head",[136,8438,4398],{"class":164},[136,8440,8441,8443,8446,8449,8451,8453,8456,8458],{"class":138,"line":4},[136,8442,4403],{"class":164},[136,8444,8445],{"class":191},"meta",[136,8447,8448],{"class":156}," charset",[136,8450,165],{"class":164},[136,8452,328],{"class":164},[136,8454,8455],{"class":207},"utf-8",[136,8457,328],{"class":164},[136,8459,4398],{"class":164},[136,8461,8462,8464,8467,8470,8473,8475,8477],{"class":138,"line":176},[136,8463,4403],{"class":164},[136,8465,8466],{"class":191},"title",[136,8468,8469],{"class":164},">",[136,8471,8472],{"class":160},"webpackの練習",[136,8474,4508],{"class":164},[136,8476,8466],{"class":191},[136,8478,4398],{"class":164},[136,8480,8481,8483,8485],{"class":138,"line":182},[136,8482,4573],{"class":164},[136,8484,8436],{"class":191},[136,8486,4398],{"class":164},[136,8488,8489],{"class":138,"line":188},[136,8490,143],{"emptyLinePlaceholder":142},[136,8492,8493,8495,8497],{"class":138,"line":223},[136,8494,4393],{"class":164},[136,8496,886],{"class":191},[136,8498,4398],{"class":164},[136,8500,8501,8503,8505],{"class":138,"line":234},[136,8502,4403],{"class":164},[136,8504,4406],{"class":191},[136,8506,4398],{"class":164},[136,8508,8509,8511,8513,8515,8517,8519,8521,8523],{"class":138,"line":252},[136,8510,4413],{"class":164},[136,8512,1249],{"class":191},[136,8514,4418],{"class":156},[136,8516,165],{"class":164},[136,8518,247],{"class":164},[136,8520,4425],{"class":207},[136,8522,247],{"class":164},[136,8524,4398],{"class":164},[136,8526,8527],{"class":138,"line":258},[136,8528,143],{"emptyLinePlaceholder":142},[136,8530,8531,8533,8535],{"class":138,"line":264},[136,8532,4438],{"class":164},[136,8534,1249],{"class":191},[136,8536,4398],{"class":164},[136,8538,8539,8541,8543],{"class":138,"line":270},[136,8540,4564],{"class":164},[136,8542,4406],{"class":191},[136,8544,4398],{"class":164},[136,8546,8547,8549,8551],{"class":138,"line":276},[136,8548,4573],{"class":164},[136,8550,886],{"class":191},[136,8552,4398],{"class":164},[136,8554,8555,8557,8560,8562,8564,8566,8569,8571,8573,8575],{"class":138,"line":281},[136,8556,4393],{"class":164},[136,8558,8559],{"class":191},"script",[136,8561,1291],{"class":156},[136,8563,165],{"class":164},[136,8565,247],{"class":164},[136,8567,8568],{"class":207},".\u002Fbundle.js",[136,8570,247],{"class":164},[136,8572,4533],{"class":164},[136,8574,8559],{"class":191},[136,8576,4398],{"class":164},[136,8578,8579,8581,8583],{"class":138,"line":297},[136,8580,4508],{"class":164},[136,8582,84],{"class":191},[136,8584,4398],{"class":164},[13,8586,8587],{},"それでmain.jsは適当にこうしておきましょう。",[71,8589,8592],{"className":129,"code":8590,"filename":8591,"language":132,"meta":79,"style":79},"import $ from 'jquery';\n\n$('#app').text('hello world')\n","src\u002Fmain.js",[52,8593,8594,8610,8614],{"__ignoreMap":79},[136,8595,8596,8598,8600,8602,8604,8606,8608],{"class":138,"line":139},[136,8597,5547],{"class":213},[136,8599,6151],{"class":160},[136,8601,5553],{"class":213},[136,8603,242],{"class":164},[136,8605,6158],{"class":207},[136,8607,247],{"class":164},[136,8609,420],{"class":164},[136,8611,8612],{"class":138,"line":146},[136,8613,143],{"emptyLinePlaceholder":142},[136,8615,8616,8618,8620,8622,8624,8626,8628,8630,8632,8634,8636,8639,8641],{"class":138,"line":153},[136,8617,214],{"class":452},[136,8619,204],{"class":160},[136,8621,247],{"class":164},[136,8623,6254],{"class":207},[136,8625,247],{"class":164},[136,8627,210],{"class":160},[136,8629,688],{"class":164},[136,8631,76],{"class":452},[136,8633,204],{"class":160},[136,8635,247],{"class":164},[136,8637,8638],{"class":207},"hello world",[136,8640,247],{"class":164},[136,8642,923],{"class":160},[13,8644,8645,8647,8648,8650,8651,8653,8654,8656],{},[52,8646,1980],{}," からjQueryをインポートして、",[52,8649,88],{},"を操作します。しかし今のままではバンドルされていないので、main.jsの内容は利用できません。",[52,8652,131],{},"を設定して、",[52,8655,6142],{},"をビルドしてみましょう。",[13,8658,8659,8661],{},[52,8660,131],{},"を以下のように設定してみましょう。",[71,8663,8665],{"className":129,"code":8664,"filename":131,"language":132,"meta":79,"style":79},"module.exports = {\n    \u002F\u002Fバンドル対象のファイル\n    entry: `.\u002Fsrc\u002Fmain.js`,\n  \n    mode:\"development\",\n    \u002F\u002F ファイルの出力設定\n    output: {\n      \u002F\u002F  出力ファイルのディレクトリ名\n      path: `${__dirname}\u002Fdist`,\n      \u002F\u002F 出力ファイル名\n      filename: \"bundle.js\"\n    }\n};\n",[52,8666,8667,8675,8679,8695,8699,8713,8717,8725,8730,8749,8754,8767,8771],{"__ignoreMap":79},[136,8668,8669,8671,8673],{"class":138,"line":139},[136,8670,412],{"class":164},[136,8672,292],{"class":164},[136,8674,231],{"class":164},[136,8676,8677],{"class":138,"line":146},[136,8678,4711],{"class":149},[136,8680,8681,8683,8685,8688,8691,8693],{"class":138,"line":153},[136,8682,300],{"class":191},[136,8684,195],{"class":164},[136,8686,8687],{"class":164}," `",[136,8689,8690],{"class":207},".\u002Fsrc\u002Fmain.js",[136,8692,3794],{"class":164},[136,8694,220],{"class":164},[136,8696,8697],{"class":138,"line":4},[136,8698,317],{"class":160},[136,8700,8701,8703,8705,8707,8709,8711],{"class":138,"line":176},[136,8702,323],{"class":191},[136,8704,195],{"class":164},[136,8706,328],{"class":164},[136,8708,331],{"class":207},[136,8710,328],{"class":164},[136,8712,220],{"class":164},[136,8714,8715],{"class":138,"line":182},[136,8716,3757],{"class":149},[136,8718,8719,8721,8723],{"class":138,"line":188},[136,8720,3763],{"class":191},[136,8722,195],{"class":164},[136,8724,231],{"class":164},[136,8726,8727],{"class":138,"line":223},[136,8728,8729],{"class":149},"      \u002F\u002F  出力ファイルのディレクトリ名\n",[136,8731,8732,8735,8737,8739,8741,8743,8745,8747],{"class":138,"line":234},[136,8733,8734],{"class":191},"      path",[136,8736,195],{"class":164},[136,8738,836],{"class":164},[136,8740,3786],{"class":160},[136,8742,860],{"class":164},[136,8744,3791],{"class":207},[136,8746,3794],{"class":164},[136,8748,220],{"class":164},[136,8750,8751],{"class":138,"line":252},[136,8752,8753],{"class":149},"      \u002F\u002F 出力ファイル名\n",[136,8755,8756,8759,8761,8763,8765],{"class":138,"line":258},[136,8757,8758],{"class":191},"      filename",[136,8760,195],{"class":164},[136,8762,1527],{"class":164},[136,8764,5168],{"class":207},[136,8766,5171],{"class":164},[136,8768,8769],{"class":138,"line":264},[136,8770,2053],{"class":164},[136,8772,8773],{"class":138,"line":270},[136,8774,3875],{"class":164},[13,8776,8777,8778,8780,8781,8783,8784,4245,8786,8788],{},"ここで先ほどの５つの概念を思い出してください。Entry、Output、Modeの設定が書かれています。パスは",[52,8779,131],{},"から見たパスになります。エントリーはsrc配下の",[52,8782,6142],{},"、吐き出し先は同じ階層の",[52,8785,54],{},[52,8787,5168],{},"という名前で吐き出します。",[13,8790,8791,1266,8793,8796],{},[52,8792,412],{},[52,8794,8795],{},"node.js","のモジュールとして利用するために必要です。webpackはnode.jsの環境下でビルドを行うからです。",[13,8798,8799,8800,8802],{},"設定が終わったら",[52,8801,6688],{},"に以下の内容を付け足しておきます。",[71,8804,8806],{"className":6686,"code":8805,"filename":6688,"language":6689,"meta":79,"style":79},"\"scripts\": {\n    \"build\": \"npx webpack-cli build\", #これ\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n},\n",[52,8807,8808,8820,8842,8866],{"__ignoreMap":79},[136,8809,8810,8812,8814,8816,8818],{"class":138,"line":139},[136,8811,328],{"class":164},[136,8813,6699],{"class":207},[136,8815,328],{"class":164},[136,8817,5431],{"class":160},[136,8819,825],{"class":164},[136,8821,8822,8824,8826,8828,8830,8832,8835,8837,8839],{"class":138,"line":146},[136,8823,6710],{"class":164},[136,8825,6713],{"class":156},[136,8827,328],{"class":164},[136,8829,195],{"class":164},[136,8831,1527],{"class":164},[136,8833,8834],{"class":207},"npx webpack-cli build",[136,8836,328],{"class":164},[136,8838,849],{"class":164},[136,8840,8841],{"class":160}," #これ\n",[136,8843,8844,8846,8848,8850,8852,8854,8856,8858,8860,8862,8864],{"class":138,"line":153},[136,8845,6710],{"class":164},[136,8847,6753],{"class":156},[136,8849,328],{"class":164},[136,8851,195],{"class":164},[136,8853,1527],{"class":164},[136,8855,6762],{"class":207},[136,8857,6765],{"class":160},[136,8859,6768],{"class":207},[136,8861,6765],{"class":160},[136,8863,6773],{"class":207},[136,8865,5171],{"class":164},[136,8867,8868,8870],{"class":138,"line":4},[136,8869,860],{"class":164},[136,8871,220],{"class":160},[13,8873,8874,8876,8877,8879],{},[52,8875,6788],{},"を叩くと",[52,8878,4202],{},"のバンドルが走ります。それではやってみましょう。",[71,8881,8884],{"className":8882,"code":8883,"language":76},[74],"npm run build\n> webpack_parctice@1.0.0 build \u002FUsers\u002Fjunjiishii\u002FDesktop\u002Fmy_apps\u002Fwebpack_parctice\n> webpack\n\nasset bundle.js 323 KiB [emitted] (name: main)\nruntime modules 937 bytes 4 modules\ncacheable modules 282 KiB\n  .\u002Fsrc\u002Fmain.js 54 bytes [built] [code generated]\n  .\u002Fnode_modules\u002Fjquery\u002Fdist\u002Fjquery.js 282 KiB [built] [code generated]\nwebpack 5.28.0 compiled successfully in 234 ms\n",[52,8885,8883],{"__ignoreMap":79},[13,8887,8888,8889,8891,8892,8894],{},"jqueryがきちんとnode_modulesから読み込まれいます。そして",[52,8890,54],{},"配下を見るとbundle.jsができています。",[52,8893,5168],{},"の中身をみてみますと、",[6122,8896],{":src":8897,":width":8898,":center":6126},"'_mix\u002Fsch-2021-03-27-17.29.11.png'","'500px'",[13,8900,8901],{},"わお。必要なjsファイルが一つにまとめられているので、こうなっています。main.js一行とjqueryがくっついています。それではindex.htmlをみてみると..",[6122,8903],{":src":8897,":width":8898,":center":6126},[13,8905,8906,8907,8909,8910,89,8912,8914],{},"はい。",[52,8908,6142],{},"でhello worldを入れたのできちんと",[52,8911,6142],{},[52,8913,6158],{},"がバンドルされ、動作していることが確認されました。",[39,8916,8917],{"id":8917},"自前のファイルをバンドルしよう",[13,8919,8920,8921,1380,8923,8925,8926,8928,8929,4606,8931,4606,8933,4645],{},"先程は",[52,8922,1980],{},[52,8924,6158],{},"をインポートして利用してみました。次は",[52,8927,8387],{},"の関数群をインポートして利用できるようにしてみましょう。",[52,8930,88],{},[52,8932,6142],{},[52,8934,8387],{},[71,8936,8938],{"className":1272,"code":8937,"filename":8407,"language":84,"meta":79,"style":79},"\u003C!-- body のみ見せます -->\n\u003Cbody>\n    \u003Cmain>\n        \u003Cdiv id='app'>\u003C\u002Fdiv>\n        \u003Cinput type=\"text\" value=\"\" id=\"inputs\">\n        \u003Cbutton id=\"submmit\" >追加する\u003C\u002Fbutton>\n    \u003C\u002Fmain>\n\u003C\u002Fbody>\n",[52,8939,8940,8945,8953,8961,8983,9017,9043,9051],{"__ignoreMap":79},[136,8941,8942],{"class":138,"line":139},[136,8943,8944],{"class":149},"\u003C!-- body のみ見せます -->\n",[136,8946,8947,8949,8951],{"class":138,"line":146},[136,8948,1285],{"class":164},[136,8950,886],{"class":191},[136,8952,4398],{"class":164},[136,8954,8955,8957,8959],{"class":138,"line":153},[136,8956,4393],{"class":164},[136,8958,4406],{"class":191},[136,8960,4398],{"class":164},[136,8962,8963,8965,8967,8969,8971,8973,8975,8977,8979,8981],{"class":138,"line":4},[136,8964,4403],{"class":164},[136,8966,1249],{"class":191},[136,8968,4418],{"class":156},[136,8970,165],{"class":164},[136,8972,247],{"class":164},[136,8974,4425],{"class":207},[136,8976,247],{"class":164},[136,8978,4533],{"class":164},[136,8980,1249],{"class":191},[136,8982,4398],{"class":164},[136,8984,8985,8987,8989,8991,8993,8995,8997,8999,9001,9003,9005,9007,9009,9011,9013,9015],{"class":138,"line":176},[136,8986,4403],{"class":164},[136,8988,4449],{"class":191},[136,8990,4452],{"class":156},[136,8992,165],{"class":164},[136,8994,328],{"class":164},[136,8996,76],{"class":207},[136,8998,328],{"class":164},[136,9000,4463],{"class":156},[136,9002,165],{"class":164},[136,9004,4468],{"class":164},[136,9006,4418],{"class":156},[136,9008,165],{"class":164},[136,9010,328],{"class":164},[136,9012,4477],{"class":207},[136,9014,328],{"class":164},[136,9016,4398],{"class":164},[136,9018,9019,9021,9023,9025,9027,9029,9031,9033,9035,9037,9039,9041],{"class":138,"line":182},[136,9020,4403],{"class":164},[136,9022,4488],{"class":191},[136,9024,4418],{"class":156},[136,9026,165],{"class":164},[136,9028,328],{"class":164},[136,9030,4497],{"class":207},[136,9032,328],{"class":164},[136,9034,4502],{"class":164},[136,9036,4505],{"class":160},[136,9038,4508],{"class":164},[136,9040,4488],{"class":191},[136,9042,4398],{"class":164},[136,9044,9045,9047,9049],{"class":138,"line":188},[136,9046,4573],{"class":164},[136,9048,4406],{"class":191},[136,9050,4398],{"class":164},[136,9052,9053,9055,9057],{"class":138,"line":223},[136,9054,4508],{"class":164},[136,9056,886],{"class":191},[136,9058,4398],{"class":164},[71,9060,9062],{"className":129,"code":9061,"filename":8387,"language":132,"meta":79,"style":79},"import $ from 'jquery';\n\nexport default {\n    addNewText(to,input){\n        let text = $(input).val();\n        $(to).append('\u003Cp>'+text+'\u003C\u002Fp>');　#XSSできちゃうので本番では使わないように。。\n        $(input).val('');\n    }\n}\n",[52,9063,9064,9080,9084,9094,9111,9139,9191,9214,9218],{"__ignoreMap":79},[136,9065,9066,9068,9070,9072,9074,9076,9078],{"class":138,"line":139},[136,9067,5547],{"class":213},[136,9069,6151],{"class":160},[136,9071,5553],{"class":213},[136,9073,242],{"class":164},[136,9075,6158],{"class":207},[136,9077,247],{"class":164},[136,9079,420],{"class":164},[136,9081,9082],{"class":138,"line":146},[136,9083,143],{"emptyLinePlaceholder":142},[136,9085,9086,9089,9092],{"class":138,"line":153},[136,9087,9088],{"class":213},"export",[136,9090,9091],{"class":213}," default",[136,9093,231],{"class":164},[136,9095,9096,9099,9101,9104,9106,9108],{"class":138,"line":4},[136,9097,9098],{"class":191},"    addNewText",[136,9100,204],{"class":164},[136,9102,9103],{"class":725},"to",[136,9105,849],{"class":164},[136,9107,4449],{"class":725},[136,9109,9110],{"class":164},"){\n",[136,9112,9113,9116,9119,9121,9124,9126,9128,9130,9132,9135,9137],{"class":138,"line":176},[136,9114,9115],{"class":156},"        let",[136,9117,9118],{"class":160}," text",[136,9120,292],{"class":164},[136,9122,9123],{"class":452}," $",[136,9125,204],{"class":191},[136,9127,4449],{"class":160},[136,9129,210],{"class":191},[136,9131,688],{"class":164},[136,9133,9134],{"class":452},"val",[136,9136,6302],{"class":191},[136,9138,420],{"class":164},[136,9140,9141,9144,9146,9148,9150,9152,9155,9157,9159,9162,9164,9167,9169,9171,9173,9176,9178,9180,9182,9185,9188],{"class":138,"line":182},[136,9142,9143],{"class":452},"        $",[136,9145,204],{"class":191},[136,9147,9103],{"class":160},[136,9149,210],{"class":191},[136,9151,688],{"class":164},[136,9153,9154],{"class":452},"append",[136,9156,204],{"class":191},[136,9158,247],{"class":164},[136,9160,9161],{"class":207},"\u003Cp>",[136,9163,247],{"class":164},[136,9165,9166],{"class":164},"+",[136,9168,76],{"class":160},[136,9170,9166],{"class":164},[136,9172,247],{"class":164},[136,9174,9175],{"class":207},"\u003C\u002Fp>",[136,9177,247],{"class":164},[136,9179,210],{"class":191},[136,9181,4695],{"class":164},[136,9183,9184],{"class":191},"　#",[136,9186,9187],{"class":160},"XSSできちゃうので本番では使わないように",[136,9189,9190],{"class":191},"。。\n",[136,9192,9193,9195,9197,9199,9201,9203,9205,9207,9210,9212],{"class":138,"line":188},[136,9194,9143],{"class":452},[136,9196,204],{"class":191},[136,9198,4449],{"class":160},[136,9200,210],{"class":191},[136,9202,688],{"class":164},[136,9204,9134],{"class":452},[136,9206,204],{"class":191},[136,9208,9209],{"class":164},"''",[136,9211,210],{"class":191},[136,9213,420],{"class":164},[136,9215,9216],{"class":138,"line":223},[136,9217,2053],{"class":164},[136,9219,9220],{"class":138,"line":234},[136,9221,395],{"class":164},[71,9223,9225],{"className":129,"code":9224,"filename":8591,"language":132,"meta":79,"style":79},"import $ from 'jquery';\nimport funcs from '.\u002Ffunctions';\n\n$('#submmit').on('click',()=>{\n    return funcs.addNewText('#app','#inputs');\n})\n\n",[52,9226,9227,9243,9259,9263,9295,9325],{"__ignoreMap":79},[136,9228,9229,9231,9233,9235,9237,9239,9241],{"class":138,"line":139},[136,9230,5547],{"class":213},[136,9232,6151],{"class":160},[136,9234,5553],{"class":213},[136,9236,242],{"class":164},[136,9238,6158],{"class":207},[136,9240,247],{"class":164},[136,9242,420],{"class":164},[136,9244,9245,9247,9249,9251,9253,9255,9257],{"class":138,"line":146},[136,9246,5547],{"class":213},[136,9248,6169],{"class":160},[136,9250,5553],{"class":213},[136,9252,242],{"class":164},[136,9254,6176],{"class":207},[136,9256,247],{"class":164},[136,9258,420],{"class":164},[136,9260,9261],{"class":138,"line":153},[136,9262,143],{"emptyLinePlaceholder":142},[136,9264,9265,9267,9269,9271,9273,9275,9277,9279,9281,9283,9285,9287,9289,9291,9293],{"class":138,"line":4},[136,9266,214],{"class":452},[136,9268,204],{"class":160},[136,9270,247],{"class":164},[136,9272,6208],{"class":207},[136,9274,247],{"class":164},[136,9276,210],{"class":160},[136,9278,688],{"class":164},[136,9280,6217],{"class":452},[136,9282,204],{"class":160},[136,9284,247],{"class":164},[136,9286,6224],{"class":207},[136,9288,247],{"class":164},[136,9290,6229],{"class":164},[136,9292,6232],{"class":156},[136,9294,825],{"class":164},[136,9296,9297,9299,9301,9303,9305,9307,9309,9311,9313,9315,9317,9319,9321,9323],{"class":138,"line":176},[136,9298,6239],{"class":213},[136,9300,6242],{"class":160},[136,9302,688],{"class":164},[136,9304,6247],{"class":452},[136,9306,204],{"class":191},[136,9308,247],{"class":164},[136,9310,6254],{"class":207},[136,9312,247],{"class":164},[136,9314,849],{"class":164},[136,9316,247],{"class":164},[136,9318,6263],{"class":207},[136,9320,247],{"class":164},[136,9322,210],{"class":191},[136,9324,420],{"class":164},[136,9326,9327,9329],{"class":138,"line":182},[136,9328,860],{"class":164},[136,9330,923],{"class":160},[13,9332,9333,9334,9337],{},"functions.jsには便利関数を入れているのを想定しているので、オブジェクトに関数を入れておきます。それをexportします。",[52,9335,9336],{},"addNewText()","は指定した入力フォームの文字列を、指定したDOMにpタグとして入れてくれる神メソッドです。TODO LIST的な物を開発していると思ってください。",[13,9339,9340,2763,9342,9345,9346,9349,9350,9353],{},[52,9341,6142],{},[52,9343,9344],{},"import funcs from '.\u002Ffunctions';","で読み込みます。",[52,9347,9348],{},"funcs","というのはオブジェクトなので",[52,9351,9352],{},"funcs.addNewText()","で使用できます。イベントリスナーでボタンを押したら追加できるようにしてみましょう。",[13,9355,9356,9357,9359],{},"ビルドしたら再度",[52,9358,88],{},"をみてみます。",[6122,9361],{":src":9362,":width":6125},"'_mix\u002Fsch-2021-03-27-18.04.19-768x283.png'",[6122,9364],{":src":9365,":width":6125},"'_mix\u002Fsch-2021-03-27-18.05.16.png'",[13,9367,9368],{},"入力内容を入れて、追加するを押すとこのように文字が追加されました。webpackが各ファイルのimportの関係性を解決してくれるので、これで複数ファイルのバンドルができるようになりました。",[98,9370,9371],{"id":9371},"watchモードを追加しておく",[13,9373,9374,9375,9377],{},"jsのコードを書いてビルドしたらスクリプトにエラーが起きていたという時、毎回ビルドするのは面倒です。webpackにはwatchモードという物があり、変更を検知して差分ビルドをしてくれます。",[52,9376,6688],{},"に以下のように記述します。",[71,9379,9381],{"className":6686,"code":9380,"filename":6688,"language":6689,"meta":79,"style":79},"\"scripts\": {\n  \"build\": \"npx webpack-cli build\",\n  \"watch\": \"npx webpack-cli watch\",　\b#これ\n  \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n},\n",[52,9382,9383,9395,9413,9434,9458],{"__ignoreMap":79},[136,9384,9385,9387,9389,9391,9393],{"class":138,"line":139},[136,9386,328],{"class":164},[136,9388,6699],{"class":207},[136,9390,328],{"class":164},[136,9392,5431],{"class":160},[136,9394,825],{"class":164},[136,9396,9397,9399,9401,9403,9405,9407,9409,9411],{"class":138,"line":146},[136,9398,6696],{"class":164},[136,9400,6713],{"class":156},[136,9402,328],{"class":164},[136,9404,195],{"class":164},[136,9406,1527],{"class":164},[136,9408,8834],{"class":207},[136,9410,328],{"class":164},[136,9412,220],{"class":164},[136,9414,9415,9417,9419,9421,9423,9425,9427,9429,9431],{"class":138,"line":153},[136,9416,6696],{"class":164},[136,9418,6733],{"class":156},[136,9420,328],{"class":164},[136,9422,195],{"class":164},[136,9424,1527],{"class":164},[136,9426,6742],{"class":207},[136,9428,328],{"class":164},[136,9430,849],{"class":164},[136,9432,9433],{"class":160},"　\b#これ\n",[136,9435,9436,9438,9440,9442,9444,9446,9448,9450,9452,9454,9456],{"class":138,"line":4},[136,9437,6696],{"class":164},[136,9439,6753],{"class":156},[136,9441,328],{"class":164},[136,9443,195],{"class":164},[136,9445,1527],{"class":164},[136,9447,6762],{"class":207},[136,9449,6765],{"class":160},[136,9451,6768],{"class":207},[136,9453,6765],{"class":160},[136,9455,6773],{"class":207},[136,9457,5171],{"class":164},[136,9459,9460,9462],{"class":138,"line":176},[136,9461,860],{"class":164},[136,9463,220],{"class":160},[13,9465,9466,9467,9469,9470,9472],{},"これで",[52,9468,6678],{}," を行うことで",[52,9471,6733],{},"モードでビルドが動くようになります。",[39,9474,9476],{"id":9475},"sassをコンパイルバンドルしてみる","Sassをコンパイル・バンドルしてみる",[13,9478,9479],{},"Webpackは基本的にjsファイルのバンドルを想定していますが、css・sassもバンドルできます。今回はsassの説明をします。",[98,9481,9483],{"id":9482},"必要なモジュールを追加インストール設定","必要なモジュールを追加インストール&設定",[13,9485,9486],{},"webpackがsassをバンドルしてビルドするには",[26,9488,9489,9491,9494,9496],{},[29,9490,3063],{},[29,9492,9493],{},"node-sass",[29,9495,3027],{},[29,9497,460],{},[13,9499,9500],{},"の４つのdevDependenciesが必要になります。",[13,9502,9503,9505,9506,9508,9509,9512],{},[8229,9504,3063],{},"は重要な概念に出てきた「loader」に該当します。webpackがsassファイルをバンドルするのに必要です。",[8229,9507,9493],{},"はnode.jsでsassのコンパイルをするために必要です。sassをコンパイルして生成されたcssを扱うために",[8229,9510,9511],{},"css-loader、mini-css-extract-plugin","が必要です。そのためまずはインストールしてみましょう。",[71,9514,9517],{"className":9515,"code":9516,"language":76},[74],"npm install -D sass-loader node-sass css-loader mini-css-extract-plugin\n",[52,9518,9516],{"__ignoreMap":79},[13,9520,9521],{},"ひとまず入れられたら、webpack.config.jsを以下のように変更します。",[71,9523,9525],{"className":129,"code":9524,"filename":131,"language":132,"meta":79,"style":79},"const MiniCssExtractPlugin = require('mini-css-extract-plugin');\n\nmodule.exports = {\n    \u002F\u002Fバンドル対象のファイル\n    entry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    \u002F\u002F ここから追加\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: false }\n              },\n              'sass-loader'\n            ]\n          }\n        ]\n      },\n    \u002F\u002F ファイルの出力設定\n    output: {\n      \u002F\u002F  出力ファイルのディレクトリ名\n      path: `${__dirname}\u002Fdist`,\n      \u002F\u002F 出力ファイル名\n      filename: \"bundle.js\"\n    },\n 　　\u002F\u002F ここも追加\n    plugins: [\n      new MiniCssExtractPlugin({\n          filename:'style.css'\n      })\n    ]\n};\n",[52,9526,9527,9549,9553,9561,9565,9579,9583,9597,9601,9606,9614,9622,9626,9658,9672,9680,9691,9696,9710,9727,9732,9741,9745,9749,9753,9758,9762,9770,9774,9792,9796,9808,9812,9817,9825,9835,9848,9854,9858],{"__ignoreMap":79},[136,9528,9529,9531,9533,9535,9537,9539,9541,9543,9545,9547],{"class":138,"line":139},[136,9530,284],{"class":156},[136,9532,447],{"class":160},[136,9534,165],{"class":164},[136,9536,453],{"class":452},[136,9538,204],{"class":160},[136,9540,247],{"class":164},[136,9542,460],{"class":207},[136,9544,247],{"class":164},[136,9546,210],{"class":160},[136,9548,420],{"class":164},[136,9550,9551],{"class":138,"line":146},[136,9552,143],{"emptyLinePlaceholder":142},[136,9554,9555,9557,9559],{"class":138,"line":153},[136,9556,412],{"class":164},[136,9558,292],{"class":164},[136,9560,231],{"class":164},[136,9562,9563],{"class":138,"line":4},[136,9564,4711],{"class":149},[136,9566,9567,9569,9571,9573,9575,9577],{"class":138,"line":176},[136,9568,300],{"class":191},[136,9570,195],{"class":164},[136,9572,242],{"class":164},[136,9574,307],{"class":207},[136,9576,247],{"class":164},[136,9578,220],{"class":164},[136,9580,9581],{"class":138,"line":182},[136,9582,317],{"class":160},[136,9584,9585,9587,9589,9591,9593,9595],{"class":138,"line":188},[136,9586,323],{"class":191},[136,9588,195],{"class":164},[136,9590,328],{"class":164},[136,9592,331],{"class":207},[136,9594,328],{"class":164},[136,9596,220],{"class":164},[136,9598,9599],{"class":138,"line":223},[136,9600,341],{"class":160},[136,9602,9603],{"class":138,"line":234},[136,9604,9605],{"class":149},"    \u002F\u002F ここから追加\n",[136,9607,9608,9610,9612],{"class":138,"line":252},[136,9609,347],{"class":191},[136,9611,195],{"class":164},[136,9613,231],{"class":164},[136,9615,9616,9618,9620],{"class":138,"line":258},[136,9617,357],{"class":191},[136,9619,195],{"class":164},[136,9621,168],{"class":160},[136,9623,9624],{"class":138,"line":264},[136,9625,1997],{"class":164},[136,9627,9628,9630,9632,9634,9636,9638,9640,9642,9644,9646,9648,9650,9652,9654,9656],{"class":138,"line":270},[136,9629,3376],{"class":191},[136,9631,195],{"class":164},[136,9633,198],{"class":164},[136,9635,201],{"class":160},[136,9637,204],{"class":164},[136,9639,2954],{"class":207},[136,9641,2957],{"class":164},[136,9643,2960],{"class":207},[136,9645,2957],{"class":164},[136,9647,2965],{"class":207},[136,9649,210],{"class":164},[136,9651,2970],{"class":207},[136,9653,214],{"class":213},[136,9655,217],{"class":164},[136,9657,220],{"class":164},[136,9659,9660,9662,9664,9666,9668,9670],{"class":138,"line":276},[136,9661,3403],{"class":191},[136,9663,195],{"class":164},[136,9665,198],{"class":164},[136,9667,1980],{"class":207},[136,9669,217],{"class":164},[136,9671,220],{"class":164},[136,9673,9674,9676,9678],{"class":138,"line":281},[136,9675,3426],{"class":191},[136,9677,195],{"class":164},[136,9679,168],{"class":160},[136,9681,9682,9685,9687,9689],{"class":138,"line":297},[136,9683,9684],{"class":160},"              MiniCssExtractPlugin",[136,9686,688],{"class":164},[136,9688,3008],{"class":160},[136,9690,220],{"class":164},[136,9692,9693],{"class":138,"line":314},[136,9694,9695],{"class":164},"              {\n",[136,9697,9698,9700,9702,9704,9706,9708],{"class":138,"line":320},[136,9699,3020],{"class":191},[136,9701,195],{"class":164},[136,9703,242],{"class":164},[136,9705,3027],{"class":207},[136,9707,247],{"class":164},[136,9709,220],{"class":164},[136,9711,9712,9714,9716,9718,9720,9722,9725],{"class":138,"line":338},[136,9713,3036],{"class":191},[136,9715,195],{"class":164},[136,9717,3041],{"class":164},[136,9719,3044],{"class":191},[136,9721,195],{"class":164},[136,9723,9724],{"class":913}," false",[136,9726,3051],{"class":164},[136,9728,9729],{"class":138,"line":344},[136,9730,9731],{"class":164},"              },\n",[136,9733,9734,9737,9739],{"class":138,"line":354},[136,9735,9736],{"class":164},"              '",[136,9738,3063],{"class":207},[136,9740,3147],{"class":164},[136,9742,9743],{"class":138,"line":365},[136,9744,6634],{"class":160},[136,9746,9747],{"class":138,"line":370},[136,9748,2043],{"class":164},[136,9750,9751],{"class":138,"line":375},[136,9752,2048],{"class":160},[136,9754,9755],{"class":138,"line":387},[136,9756,9757],{"class":164},"      },\n",[136,9759,9760],{"class":138,"line":392},[136,9761,3757],{"class":149},[136,9763,9764,9766,9768],{"class":138,"line":398},[136,9765,3763],{"class":191},[136,9767,195],{"class":164},[136,9769,231],{"class":164},[136,9771,9772],{"class":138,"line":404},[136,9773,8729],{"class":149},[136,9775,9776,9778,9780,9782,9784,9786,9788,9790],{"class":138,"line":409},[136,9777,8734],{"class":191},[136,9779,195],{"class":164},[136,9781,836],{"class":164},[136,9783,3786],{"class":160},[136,9785,860],{"class":164},[136,9787,3791],{"class":207},[136,9789,3794],{"class":164},[136,9791,220],{"class":164},[136,9793,9794],{"class":138,"line":736},[136,9795,8753],{"class":149},[136,9797,9798,9800,9802,9804,9806],{"class":138,"line":790},[136,9799,8758],{"class":191},[136,9801,195],{"class":164},[136,9803,1527],{"class":164},[136,9805,5168],{"class":207},[136,9807,5171],{"class":164},[136,9809,9810],{"class":138,"line":795},[136,9811,261],{"class":164},[136,9813,9814],{"class":138,"line":814},[136,9815,9816],{"class":149}," 　　\u002F\u002F ここも追加\n",[136,9818,9819,9821,9823],{"class":138,"line":828},[136,9820,3822],{"class":191},[136,9822,195],{"class":164},[136,9824,168],{"class":160},[136,9826,9827,9829,9831,9833],{"class":138,"line":876},[136,9828,817],{"class":164},[136,9830,3835],{"class":452},[136,9832,204],{"class":160},[136,9834,825],{"class":164},[136,9836,9837,9840,9842,9844,9846],{"class":138,"line":893},[136,9838,9839],{"class":191},"          filename",[136,9841,195],{"class":164},[136,9843,247],{"class":164},[136,9845,5204],{"class":207},[136,9847,3147],{"class":164},[136,9849,9850,9852],{"class":138,"line":905},[136,9851,920],{"class":164},[136,9853,923],{"class":160},[136,9855,9856],{"class":138,"line":917},[136,9857,3869],{"class":160},[136,9859,9860],{"class":138,"line":926},[136,9861,3875],{"class":164},[98,9863,9865],{"id":9864},"アセットのディレクトリとindexhtmlの変更","アセットのディレクトリとindex.htmlの変更",[13,9867,9868],{},"srcにsassのディレクトリを作成し、そしてややこしいのでjsのフォルダも作りました。",[71,9870,9873],{"className":9871,"code":9872,"language":76},[74],".\n├── dist\n│   ├── index.html\n├── package-lock.json\n├── package.json\n├── src\n│   ├── js\n│   │   ├── functions.js\n│   │   └── main.js\n│   └── sass\n│       ├── component.scss\n│       ├── style.scss\n│       └── variable.scss\n└── webpack.config.js\n",[52,9874,9872],{"__ignoreMap":79},[13,9876,9877],{},"sassの３ファイルは以下のような構成になっています。",[71,9879,9884],{"className":9880,"code":9881,"filename":9882,"language":9883,"meta":79,"style":79},"language-scss shiki shiki-themes material-theme-ocean","$base_color:red;\n$box_size:30px;\n","variacle.scss","scss",[52,9885,9886,9898],{"__ignoreMap":79},[136,9887,9888,9891,9893,9896],{"class":138,"line":139},[136,9889,9890],{"class":160},"$base_color",[136,9892,195],{"class":164},[136,9894,9895],{"class":160},"red",[136,9897,420],{"class":164},[136,9899,9900,9903,9905,9908],{"class":138,"line":146},[136,9901,9902],{"class":160},"$box_size",[136,9904,195],{"class":164},[136,9906,9907],{"class":775},"30px",[136,9909,420],{"class":164},[71,9911,9913],{"className":9880,"code":9912,"filename":4376,"language":9883,"meta":79,"style":79},".box{\n    background-color: $base_color;\n    width: 20px;\n    height: 20px;\n}\n",[52,9914,9915,9923,9935,9947,9958],{"__ignoreMap":79},[136,9916,9917,9919,9921],{"class":138,"line":139},[136,9918,688],{"class":164},[136,9920,4528],{"class":4321},[136,9922,825],{"class":164},[136,9924,9925,9928,9930,9933],{"class":138,"line":146},[136,9926,9927],{"class":4329},"    background-color",[136,9929,195],{"class":164},[136,9931,9932],{"class":160}," $base_color",[136,9934,420],{"class":164},[136,9936,9937,9940,9942,9945],{"class":138,"line":153},[136,9938,9939],{"class":4329},"    width",[136,9941,195],{"class":164},[136,9943,9944],{"class":775}," 20px",[136,9946,420],{"class":164},[136,9948,9949,9952,9954,9956],{"class":138,"line":4},[136,9950,9951],{"class":4329},"    height",[136,9953,195],{"class":164},[136,9955,9944],{"class":775},[136,9957,420],{"class":164},[136,9959,9960],{"class":138,"line":176},[136,9961,395],{"class":164},[71,9963,9966],{"className":9880,"code":9964,"filename":9965,"language":9883,"meta":79,"style":79},"@import '.\u002Fvariable.scss';\n@import '.\u002Fcomponent.scss';\n","style.scss",[52,9967,9968,9982],{"__ignoreMap":79},[136,9969,9970,9973,9975,9978,9980],{"class":138,"line":139},[136,9971,9972],{"class":213},"@import",[136,9974,242],{"class":164},[136,9976,9977],{"class":207},".\u002Fvariable.scss",[136,9979,247],{"class":164},[136,9981,420],{"class":164},[136,9983,9984,9986,9988,9991,9993],{"class":138,"line":146},[136,9985,9972],{"class":213},[136,9987,242],{"class":164},[136,9989,9990],{"class":207},".\u002Fcomponent.scss",[136,9992,247],{"class":164},[136,9994,420],{"class":164},[13,9996,9997,9999,10000,10002],{},[52,9998,88],{},"もバンドルされた",[52,10001,5204],{},"を読み込むようにしましょう。",[71,10004,10007],{"className":1272,"code":10005,"filename":10006,"language":84,"meta":79,"style":79},"\u003C!DOCTYPE html>\n\u003Chtml>\n    \u003Chead>\n        \u003Cmeta charset=\"utf-8\">\n        \u003Ctitle>webpackの練習\u003C\u002Ftitle>\n　　　　　\u003C!-- これ -->\n        \u003Clink rel=\"stylesheet\" href=\".\u002Fstyle.css\">\n    \u003C\u002Fhead>\n\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        \u003C\u002Fmain>\n    \u003C\u002Fbody>\n    \u003Cscript src='.\u002Fbundle.js'>\u003C\u002Fscript>\n\u003C\u002Fhtml>\n","dist\u002Findexx.html",[52,10008,10009,10019,10027,10035,10053,10069,10074,10107,10115,10119,10127,10135,10153,10157,10165,10199,10225,10247,10255,10263,10285],{"__ignoreMap":79},[136,10010,10011,10013,10015,10017],{"class":138,"line":139},[136,10012,8414],{"class":164},[136,10014,8417],{"class":191},[136,10016,2502],{"class":156},[136,10018,4398],{"class":164},[136,10020,10021,10023,10025],{"class":138,"line":146},[136,10022,1285],{"class":164},[136,10024,84],{"class":191},[136,10026,4398],{"class":164},[136,10028,10029,10031,10033],{"class":138,"line":153},[136,10030,4393],{"class":164},[136,10032,8436],{"class":191},[136,10034,4398],{"class":164},[136,10036,10037,10039,10041,10043,10045,10047,10049,10051],{"class":138,"line":4},[136,10038,4403],{"class":164},[136,10040,8445],{"class":191},[136,10042,8448],{"class":156},[136,10044,165],{"class":164},[136,10046,328],{"class":164},[136,10048,8455],{"class":207},[136,10050,328],{"class":164},[136,10052,4398],{"class":164},[136,10054,10055,10057,10059,10061,10063,10065,10067],{"class":138,"line":176},[136,10056,4403],{"class":164},[136,10058,8466],{"class":191},[136,10060,8469],{"class":164},[136,10062,8472],{"class":160},[136,10064,4508],{"class":164},[136,10066,8466],{"class":191},[136,10068,4398],{"class":164},[136,10070,10071],{"class":138,"line":182},[136,10072,10073],{"class":149},"　　　　　\u003C!-- これ -->\n",[136,10075,10076,10078,10081,10084,10086,10088,10091,10093,10096,10098,10100,10103,10105],{"class":138,"line":188},[136,10077,4403],{"class":164},[136,10079,10080],{"class":191},"link",[136,10082,10083],{"class":156}," rel",[136,10085,165],{"class":164},[136,10087,328],{"class":164},[136,10089,10090],{"class":207},"stylesheet",[136,10092,328],{"class":164},[136,10094,10095],{"class":156}," href",[136,10097,165],{"class":164},[136,10099,328],{"class":164},[136,10101,10102],{"class":207},".\u002Fstyle.css",[136,10104,328],{"class":164},[136,10106,4398],{"class":164},[136,10108,10109,10111,10113],{"class":138,"line":223},[136,10110,4573],{"class":164},[136,10112,8436],{"class":191},[136,10114,4398],{"class":164},[136,10116,10117],{"class":138,"line":234},[136,10118,143],{"emptyLinePlaceholder":142},[136,10120,10121,10123,10125],{"class":138,"line":252},[136,10122,4393],{"class":164},[136,10124,886],{"class":191},[136,10126,4398],{"class":164},[136,10128,10129,10131,10133],{"class":138,"line":258},[136,10130,4403],{"class":164},[136,10132,4406],{"class":191},[136,10134,4398],{"class":164},[136,10136,10137,10139,10141,10143,10145,10147,10149,10151],{"class":138,"line":264},[136,10138,4413],{"class":164},[136,10140,1249],{"class":191},[136,10142,4418],{"class":156},[136,10144,165],{"class":164},[136,10146,247],{"class":164},[136,10148,4425],{"class":207},[136,10150,247],{"class":164},[136,10152,4398],{"class":164},[136,10154,10155],{"class":138,"line":270},[136,10156,143],{"emptyLinePlaceholder":142},[136,10158,10159,10161,10163],{"class":138,"line":276},[136,10160,4438],{"class":164},[136,10162,1249],{"class":191},[136,10164,4398],{"class":164},[136,10166,10167,10169,10171,10173,10175,10177,10179,10181,10183,10185,10187,10189,10191,10193,10195,10197],{"class":138,"line":281},[136,10168,4413],{"class":164},[136,10170,4449],{"class":191},[136,10172,4452],{"class":156},[136,10174,165],{"class":164},[136,10176,328],{"class":164},[136,10178,76],{"class":207},[136,10180,328],{"class":164},[136,10182,4463],{"class":156},[136,10184,165],{"class":164},[136,10186,4468],{"class":164},[136,10188,4418],{"class":156},[136,10190,165],{"class":164},[136,10192,328],{"class":164},[136,10194,4477],{"class":207},[136,10196,328],{"class":164},[136,10198,4398],{"class":164},[136,10200,10201,10203,10205,10207,10209,10211,10213,10215,10217,10219,10221,10223],{"class":138,"line":297},[136,10202,4413],{"class":164},[136,10204,4488],{"class":191},[136,10206,4418],{"class":156},[136,10208,165],{"class":164},[136,10210,328],{"class":164},[136,10212,4497],{"class":207},[136,10214,328],{"class":164},[136,10216,4502],{"class":164},[136,10218,4505],{"class":160},[136,10220,4508],{"class":164},[136,10222,4488],{"class":191},[136,10224,4398],{"class":164},[136,10226,10227,10229,10231,10233,10235,10237,10239,10241,10243,10245],{"class":138,"line":314},[136,10228,4413],{"class":164},[136,10230,1249],{"class":191},[136,10232,4521],{"class":156},[136,10234,165],{"class":164},[136,10236,247],{"class":164},[136,10238,4528],{"class":207},[136,10240,247],{"class":164},[136,10242,4533],{"class":164},[136,10244,1249],{"class":191},[136,10246,4398],{"class":164},[136,10248,10249,10251,10253],{"class":138,"line":320},[136,10250,4564],{"class":164},[136,10252,4406],{"class":191},[136,10254,4398],{"class":164},[136,10256,10257,10259,10261],{"class":138,"line":338},[136,10258,4573],{"class":164},[136,10260,886],{"class":191},[136,10262,4398],{"class":164},[136,10264,10265,10267,10269,10271,10273,10275,10277,10279,10281,10283],{"class":138,"line":344},[136,10266,4393],{"class":164},[136,10268,8559],{"class":191},[136,10270,1291],{"class":156},[136,10272,165],{"class":164},[136,10274,247],{"class":164},[136,10276,8568],{"class":207},[136,10278,247],{"class":164},[136,10280,4533],{"class":164},[136,10282,8559],{"class":191},[136,10284,4398],{"class":164},[136,10286,10287,10289,10291],{"class":138,"line":354},[136,10288,4508],{"class":164},[136,10290,84],{"class":191},[136,10292,4398],{"class":164},[13,10294,10295,10296,10298],{},"そしてエントリーファイルであった",[52,10297,307],{},"に以下のようにscssをインポートします。",[71,10300,10303],{"className":129,"code":10301,"filename":10302,"language":132,"meta":79,"style":79},"import $ from 'jquery';\nimport funcs from '.\u002Ffunctions';\nimport '~\u002Fsass\u002Fstyle.scss';\n\n$('#submmit').on('click',()=>{\n    return funcs.addNewText('#app','#inputs');\n})\n\n","src\u002Fjs\u002Fmain.js",[52,10304,10305,10321,10337,10349,10353,10385,10415],{"__ignoreMap":79},[136,10306,10307,10309,10311,10313,10315,10317,10319],{"class":138,"line":139},[136,10308,5547],{"class":213},[136,10310,6151],{"class":160},[136,10312,5553],{"class":213},[136,10314,242],{"class":164},[136,10316,6158],{"class":207},[136,10318,247],{"class":164},[136,10320,420],{"class":164},[136,10322,10323,10325,10327,10329,10331,10333,10335],{"class":138,"line":146},[136,10324,5547],{"class":213},[136,10326,6169],{"class":160},[136,10328,5553],{"class":213},[136,10330,242],{"class":164},[136,10332,6176],{"class":207},[136,10334,247],{"class":164},[136,10336,420],{"class":164},[136,10338,10339,10341,10343,10345,10347],{"class":138,"line":153},[136,10340,5547],{"class":213},[136,10342,242],{"class":164},[136,10344,6189],{"class":207},[136,10346,247],{"class":164},[136,10348,420],{"class":164},[136,10350,10351],{"class":138,"line":4},[136,10352,143],{"emptyLinePlaceholder":142},[136,10354,10355,10357,10359,10361,10363,10365,10367,10369,10371,10373,10375,10377,10379,10381,10383],{"class":138,"line":176},[136,10356,214],{"class":452},[136,10358,204],{"class":160},[136,10360,247],{"class":164},[136,10362,6208],{"class":207},[136,10364,247],{"class":164},[136,10366,210],{"class":160},[136,10368,688],{"class":164},[136,10370,6217],{"class":452},[136,10372,204],{"class":160},[136,10374,247],{"class":164},[136,10376,6224],{"class":207},[136,10378,247],{"class":164},[136,10380,6229],{"class":164},[136,10382,6232],{"class":156},[136,10384,825],{"class":164},[136,10386,10387,10389,10391,10393,10395,10397,10399,10401,10403,10405,10407,10409,10411,10413],{"class":138,"line":182},[136,10388,6239],{"class":213},[136,10390,6242],{"class":160},[136,10392,688],{"class":164},[136,10394,6247],{"class":452},[136,10396,204],{"class":191},[136,10398,247],{"class":164},[136,10400,6254],{"class":207},[136,10402,247],{"class":164},[136,10404,849],{"class":164},[136,10406,247],{"class":164},[136,10408,6263],{"class":207},[136,10410,247],{"class":164},[136,10412,210],{"class":191},[136,10414,420],{"class":164},[136,10416,10417,10419],{"class":138,"line":188},[136,10418,860],{"class":164},[136,10420,923],{"class":160},[13,10422,10423,10424,10426],{},"こうするとwebpackが",[52,10425,6189],{},"のインポートを捉え、適切にバンドルしてくれます。",[98,10428,10429],{"id":10429},"それぞれのモジュールの説明",[71,10431,10433],{"className":129,"code":10432,"filename":131,"language":132,"meta":79,"style":79},"const MiniCssExtractPlugin = require('mini-css-extract-plugin');\n...\n...\nmodule: {\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: false }\n            },\n            'sass-loader'\n        ]\n        }\n    ]\n},\n...\nplugins: [\n    new MiniCssExtractPlugin({\n    　　filename: 'style.css'\n    })\n]\n",[52,10434,10435,10457,10462,10466,10474,10482,10486,10518,10532,10540,10550,10554,10568,10584,10588,10596,10600,10604,10608,10612,10616,10624,10634,10647,10653],{"__ignoreMap":79},[136,10436,10437,10439,10441,10443,10445,10447,10449,10451,10453,10455],{"class":138,"line":139},[136,10438,284],{"class":156},[136,10440,447],{"class":160},[136,10442,165],{"class":164},[136,10444,453],{"class":452},[136,10446,204],{"class":160},[136,10448,247],{"class":164},[136,10450,460],{"class":207},[136,10452,247],{"class":164},[136,10454,210],{"class":160},[136,10456,420],{"class":164},[136,10458,10459],{"class":138,"line":146},[136,10460,10461],{"class":164},"...\n",[136,10463,10464],{"class":138,"line":153},[136,10465,10461],{"class":164},[136,10467,10468,10470,10472],{"class":138,"line":4},[136,10469,6389],{"class":4321},[136,10471,195],{"class":164},[136,10473,231],{"class":164},[136,10475,10476,10478,10480],{"class":138,"line":176},[136,10477,378],{"class":4321},[136,10479,195],{"class":164},[136,10481,168],{"class":191},[136,10483,10484],{"class":138,"line":182},[136,10485,3370],{"class":164},[136,10487,10488,10490,10492,10494,10496,10498,10500,10502,10504,10506,10508,10510,10512,10514,10516],{"class":138,"line":188},[136,10489,192],{"class":191},[136,10491,195],{"class":164},[136,10493,198],{"class":164},[136,10495,201],{"class":160},[136,10497,204],{"class":164},[136,10499,2954],{"class":207},[136,10501,2957],{"class":164},[136,10503,2960],{"class":207},[136,10505,2957],{"class":164},[136,10507,2965],{"class":207},[136,10509,210],{"class":164},[136,10511,2970],{"class":207},[136,10513,214],{"class":213},[136,10515,217],{"class":164},[136,10517,220],{"class":164},[136,10519,10520,10522,10524,10526,10528,10530],{"class":138,"line":223},[136,10521,1973],{"class":191},[136,10523,195],{"class":164},[136,10525,198],{"class":164},[136,10527,1980],{"class":207},[136,10529,217],{"class":164},[136,10531,220],{"class":164},[136,10533,10534,10536,10538],{"class":138,"line":234},[136,10535,226],{"class":191},[136,10537,195],{"class":164},[136,10539,168],{"class":191},[136,10541,10542,10544,10546,10548],{"class":138,"line":252},[136,10543,3003],{"class":160},[136,10545,688],{"class":164},[136,10547,3008],{"class":160},[136,10549,220],{"class":164},[136,10551,10552],{"class":138,"line":258},[136,10553,3015],{"class":164},[136,10555,10556,10558,10560,10562,10564,10566],{"class":138,"line":264},[136,10557,237],{"class":191},[136,10559,195],{"class":164},[136,10561,242],{"class":164},[136,10563,3027],{"class":207},[136,10565,247],{"class":164},[136,10567,220],{"class":164},[136,10569,10570,10572,10574,10576,10578,10580,10582],{"class":138,"line":270},[136,10571,2017],{"class":191},[136,10573,195],{"class":164},[136,10575,3041],{"class":164},[136,10577,3044],{"class":191},[136,10579,195],{"class":164},[136,10581,9724],{"class":913},[136,10583,3051],{"class":164},[136,10585,10586],{"class":138,"line":276},[136,10587,3056],{"class":164},[136,10589,10590,10592,10594],{"class":138,"line":281},[136,10591,1468],{"class":164},[136,10593,3063],{"class":207},[136,10595,3147],{"class":164},[136,10597,10598],{"class":138,"line":297},[136,10599,2048],{"class":191},[136,10601,10602],{"class":138,"line":314},[136,10603,255],{"class":164},[136,10605,10606],{"class":138,"line":320},[136,10607,3869],{"class":191},[136,10609,10610],{"class":138,"line":338},[136,10611,5368],{"class":164},[136,10613,10614],{"class":138,"line":344},[136,10615,10461],{"class":164},[136,10617,10618,10620,10622],{"class":138,"line":354},[136,10619,803],{"class":4321},[136,10621,195],{"class":164},[136,10623,168],{"class":160},[136,10625,10626,10628,10630,10632],{"class":138,"line":365},[136,10627,7665],{"class":164},[136,10629,3835],{"class":452},[136,10631,204],{"class":160},[136,10633,825],{"class":164},[136,10635,10636,10639,10641,10643,10645],{"class":138,"line":370},[136,10637,10638],{"class":191},"    　　filename",[136,10640,195],{"class":164},[136,10642,242],{"class":164},[136,10644,5204],{"class":207},[136,10646,3147],{"class":164},[136,10648,10649,10651],{"class":138,"line":375},[136,10650,7688],{"class":164},[136,10652,923],{"class":160},[136,10654,10655],{"class":138,"line":387},[136,10656,273],{"class":160},[13,10658,10659,10661,10662,10664,10665,10667],{},[52,10660,131],{},"では特にこの箇所が重要になります。",[52,10663,6389],{},"の中身でsassや画像などのファイルを取り扱えるようになります。",[52,10666,125],{},"という箇所に取り扱うファイルの拡張子を正規表現で捉え、それに対するローダーの使用などを定義します。",[13,10669,10670,10673,10674,10676,10677,10680],{},[52,10671,10672],{},"MiniCssExtractPlugin","はcssをstyle.cssのような外部ファイルとして出力するために必要なプラグインです。",[52,10675,6142],{},"にて",[52,10678,10679],{},"import '~\u002Fsass\u002Fstyle.scss';","という記述があったと思います。このプラグインを使わない場合、webpackでのcssバンドルは外部ファイルでなく、HTMLに直接インライン記述をしようとします。（そうした方が処理と通信が早くなるらしい）",[13,10682,10683,10684,10686,10687,10689,10690,1380,10692,10694,10695,10697,10698,10700,10701,10704,10705,10707,10708,10710],{},"しかし外部ファイル",[52,10685,5204],{},"として今回は出力したいので、",[52,10688,10672],{},"を用いて",[52,10691,6142],{},[52,10693,10679],{},"のインポートを参考に、dist配下に",[52,10696,5204],{},"を出力します。ように外部ファイルとして出力します。",[52,10699,10672],{},"のローダーとプラグインに記述しておきます。プラグインの箇所では出力ファイル名を指定します。",[52,10702,10703],{},"filename: 'style.css'","としていますが、指定しない場合はエントリーファイルの",[52,10706,6142],{},"から",[52,10709,7314],{},"が出力されます。",[13,10712,10713],{},"以上でsassのバンドルができるようになりました。早速やってみます。",[71,10715,10718],{"className":10716,"code":10717,"language":76},[74],"npm run build\n",[52,10719,10717],{"__ignoreMap":79},[13,10721,10722],{},"するとdistにstyle.cssができました。中身をみてみるとsassで定義した依存性や変数が当てはまっています。",[39,10724,10725],{"id":10725},"基礎編終了",[13,10727,10728],{},"以上がwebpackを用いたjsファイルのバンドルとsassのコンパイルです。大切なのは5つの概念と必要なモジュールを読み込み、設定することです。次回は忌まわしきIEでjsが動くようにすること、画像の依存性解決、複数条件のバンドルを解説します。",[4171,10730,10731],{},"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 .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}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 .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 .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}",{"title":79,"searchDepth":153,"depth":153,"links":10733},[10734,10735,10736,10737,10740,10745],{"id":8306,"depth":146,"text":8306},{"id":8329,"depth":146,"text":8329},{"id":8360,"depth":146,"text":8361},{"id":8917,"depth":146,"text":8917,"children":10738},[10739],{"id":9371,"depth":153,"text":9371},{"id":9475,"depth":146,"text":9476,"children":10741},[10742,10743,10744],{"id":9482,"depth":153,"text":9483},{"id":9864,"depth":153,"text":9865},{"id":10429,"depth":153,"text":10429},{"id":10725,"depth":146,"text":10725},[4191],"webpack基礎とSass・jsのバンドル",{},"\u002Fseries\u002Fwell-study-webpack-1",{"title":4218,"description":10747},"series\u002Fwell-study-webpack-1",[3391,4202],"tvz3F4ALarSfdIbpPp8wmTnJpLE5NRMu4vTA4PHN1Dc",1780987145978]