[{"data":1,"prerenderedAt":10254},["ShallowReactive",2],{"series-well-study-webpack-2":3},{"doc":4,"prev":3796,"next":6310},{"id":5,"title":6,"body":7,"category":3780,"createdAt":3782,"description":3783,"extension":3784,"index":101,"meta":3785,"navigation":280,"path":3786,"publish":280,"seo":3787,"series":3788,"seriesTitle":3789,"stem":3790,"tag":3791,"thumbnail":3793,"updatedAt":3794,"__hash__":3795},"series\u002Fseries\u002Fwell-study-webpack-2.md","ちゃんと理解するWebpack5。２：Babel、画像の処理と複数バンドル",{"type":8,"value":9,"toc":3759},"minimark",[10,17,27,40,43,47,51,63,73,83,123,133,210,216,445,455,458,472,483,486,490,493,499,506,1198,1201,1204,1207,1348,1351,1358,1372,1375,1443,1452,1471,1477,1483,1489,1505,1508,1517,1556,1559,1571,1574,1577,1587,2080,2095,2098,2100,2103,2109,2112,2119,2122,2310,2313,2332,2336,2339,2345,2358,2657,2660,2666,2669,2672,2683,2782,2796,3280,3304,3306,3309,3317,3324,3327,3343,3349,3358,3362,3377,3538,3544,3615,3625,3726,3748,3752,3755],[11,12,16],"div",{"className":13},[14,15],"alert","alert-info","\n2021年10月30日：修正事項があっため追記しました。\n",[18,19,20,21,26],"p",{},"こんにちはjunです。前回の記事",[22,23,25],"a",{"href":24},"\u002Fseries\u002Fwell-study-webpack\u002F1","ちゃんと理解するWebpack5。１：webpack基礎とSass・jsのバンドル","の続きの記事です。前回はjsファイルのバンドル、scssのコンパイルを行いました。今回はそこから",[28,29,30,34,37],"ul",{},[31,32,33],"li",{},"画像パスの解決",[31,35,36],{},"babelを用いたトランスコンパイル",[31,38,39],{},"複数のバンドルファイルを出力",[18,41,42],{},"以上を解説したいと思います。これらができればひとまず意図通りのwebコンテンツが作れるようになります。コードは前回のものから発展させて使用します。それではまず画像パスの解決から行っていきます。",[44,45,46],"h2",{"id":46},"webpackで画像を取り扱う",[48,49,50],"h3",{"id":50},"画像が必要なシチュエーションを準備",[18,52,53,54,58,59,62],{},"sassでは背景画像などで画像のパスが必要となることがあります。",[55,56,57],"code",{},"\u002Fsrc","に",[55,60,61],{},"imgs","ディレクトリを作成します。",[64,65,70],"pre",{"className":66,"code":68,"language":69},[67],"language-text",".\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","text",[55,71,68],{"__ignoreMap":72},"",[18,74,75,78,79,82],{},[55,76,77],{},"img","ディレクトリにに画像を配置していきます。適当な画像sample.jpgをおいておき、sassにも適当な",[55,80,81],{},"background-image","を設定します。",[64,84,89],{"className":85,"code":86,"filename":87,"language":88,"meta":72,"style":72},"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",[55,90,91,99,105,111,117],{"__ignoreMap":72},[92,93,96],"span",{"class":94,"line":95},"line",1,[92,97,98],{},".image-box{\n",[92,100,102],{"class":94,"line":101},2,[92,103,104],{}," width: 100px;\n",[92,106,108],{"class":94,"line":107},3,[92,109,110],{}," height: 100px;\n",[92,112,114],{"class":94,"line":113},4,[92,115,116],{}," background-image: url('~\u002Fimgs\u002Fsample.jpg');\n",[92,118,120],{"class":94,"line":119},5,[92,121,122],{},"}\n",[18,124,125,128,129,132],{},[55,126,127],{},"url('..\u002Fimgs\u002Fsample.jpg');","のような相対パスでなく",[55,130,131],{},"url('~\u002Fimgs\u002Fsample.jpg');","としたのは運用上のテクニックです。後でこの説明をしますので、ひとまずこんなパスにしておきます。まだ設定していませんが、試しにビルドしてみます。",[64,134,139],{"className":135,"code":136,"filename":137,"language":138,"meta":72,"style":72},"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",[55,140,141,154,170,181],{"__ignoreMap":72},[92,142,143,147,151],{"class":94,"line":95},[92,144,146],{"class":145},"sAklC",".",[92,148,150],{"class":149},"s5Dmg","image-box",[92,152,153],{"class":145}," {\n",[92,155,156,160,163,167],{"class":94,"line":101},[92,157,159],{"class":158},"s6YsC"," width",[92,161,162],{"class":145},":",[92,164,166],{"class":165},"sx098"," 100px",[92,168,169],{"class":145},";\n",[92,171,172,175,177,179],{"class":94,"line":107},[92,173,174],{"class":158}," height",[92,176,162],{"class":145},[92,178,166],{"class":165},[92,180,169],{"class":145},[92,182,183,186,188,192,195,198,202,204,207],{"class":94,"line":113},[92,184,185],{"class":158}," background-image",[92,187,162],{"class":145},[92,189,191],{"class":190},"sdLwU"," url",[92,193,194],{"class":145},"(",[92,196,197],{"class":145},"\"",[92,199,201],{"class":200},"sfyAc","~\u002Fimgs\u002Fsample.jpg",[92,203,197],{"class":145},[92,205,206],{"class":145},");",[92,208,209],{"class":145}," }\n",[18,211,212,215],{},[55,213,214],{},"component.scss","で定義した通りのURLとなりましたが、もちろん不正なので404となります。",[64,217,222],{"className":218,"code":219,"filename":220,"language":221,"meta":72,"style":72},"language-html shiki shiki-themes material-theme-ocean"," ...\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","html",[55,223,224,230,242,252,276,282,292,332,364,390,413,423,433,438],{"__ignoreMap":72},[92,225,226],{"class":94,"line":95},[92,227,229],{"class":228},"s0W1g"," ...\n",[92,231,232,235,239],{"class":94,"line":101},[92,233,234],{"class":145}," \u003C",[92,236,238],{"class":237},"s-wAU","body",[92,240,241],{"class":145},">\n",[92,243,244,247,250],{"class":94,"line":107},[92,245,246],{"class":145}," \u003C",[92,248,249],{"class":237},"main",[92,251,241],{"class":145},[92,253,254,257,259,263,266,269,272,274],{"class":94,"line":113},[92,255,256],{"class":145}," \u003C",[92,258,11],{"class":237},[92,260,262],{"class":261},"sJ14y"," id",[92,264,265],{"class":145},"=",[92,267,268],{"class":145},"'",[92,270,271],{"class":200},"app",[92,273,268],{"class":145},[92,275,241],{"class":145},[92,277,278],{"class":94,"line":119},[92,279,281],{"emptyLinePlaceholder":280},true,"\n",[92,283,285,288,290],{"class":94,"line":284},6,[92,286,287],{"class":145}," \u003C\u002F",[92,289,11],{"class":237},[92,291,241],{"class":145},[92,293,295,297,300,303,305,307,309,311,314,316,319,321,323,325,328,330],{"class":94,"line":294},7,[92,296,256],{"class":145},[92,298,299],{"class":237},"input",[92,301,302],{"class":261}," type",[92,304,265],{"class":145},[92,306,197],{"class":145},[92,308,69],{"class":200},[92,310,197],{"class":145},[92,312,313],{"class":261}," value",[92,315,265],{"class":145},[92,317,318],{"class":145},"\"\"",[92,320,262],{"class":261},[92,322,265],{"class":145},[92,324,197],{"class":145},[92,326,327],{"class":200},"inputs",[92,329,197],{"class":145},[92,331,241],{"class":145},[92,333,335,337,340,342,344,346,349,351,354,357,360,362],{"class":94,"line":334},8,[92,336,256],{"class":145},[92,338,339],{"class":237},"button",[92,341,262],{"class":261},[92,343,265],{"class":145},[92,345,197],{"class":145},[92,347,348],{"class":200},"submmit",[92,350,197],{"class":145},[92,352,353],{"class":145}," >",[92,355,356],{"class":228},"追加する",[92,358,359],{"class":145},"\u003C\u002F",[92,361,339],{"class":237},[92,363,241],{"class":145},[92,365,367,369,371,374,376,378,381,383,386,388],{"class":94,"line":366},9,[92,368,256],{"class":145},[92,370,11],{"class":237},[92,372,373],{"class":261}," class",[92,375,265],{"class":145},[92,377,268],{"class":145},[92,379,380],{"class":200},"box",[92,382,268],{"class":145},[92,384,385],{"class":145},">\u003C\u002F",[92,387,11],{"class":237},[92,389,241],{"class":145},[92,391,393,395,397,399,401,403,405,407,409,411],{"class":94,"line":392},10,[92,394,256],{"class":145},[92,396,11],{"class":237},[92,398,373],{"class":261},[92,400,265],{"class":145},[92,402,268],{"class":145},[92,404,150],{"class":200},[92,406,268],{"class":145},[92,408,385],{"class":145},[92,410,11],{"class":237},[92,412,241],{"class":145},[92,414,416,419,421],{"class":94,"line":415},11,[92,417,418],{"class":145}," \u003C\u002F",[92,420,249],{"class":237},[92,422,241],{"class":145},[92,424,426,429,431],{"class":94,"line":425},12,[92,427,428],{"class":145}," \u003C\u002F",[92,430,238],{"class":237},[92,432,241],{"class":145},[92,434,436],{"class":94,"line":435},13,[92,437,229],{"class":228},[92,439,441],{"class":94,"line":440},14,[92,442,444],{"class":443},"sC9rS"," \u003C!-- Failed to load resource: net::ERR_FILE_NOT_FOUND \u002F~\u002Fimgs\u002Fsample.jpg-->\n",[18,446,447,448,451,452,454],{},"相対リンクでやってもdist配下ににimgsディレクトリと画像そのものがないので、404となります。そのためwebpackを用いて",[55,449,450],{},"\u002Fsrc\u002Fimgs","と配下の画像をdistに移動し、",[55,453,131],{},"のようなパスを変換させてあげる必要があります。",[48,456,457],{"id":457},"webpack4と5の違い",[18,459,460,461,464,465,464,468,471],{},"webpack4では画像の処理に",[55,462,463],{},"url-loader","、",[55,466,467],{},"raw-loader",[55,469,470],{},"file-loader","を使用していましたが、webpack5ではすでにwebpackに搭載されているAsset Modulesで行います。ただバージョン4の書き方もまだ主流なので、今回は4と5の方法を紹介し、最終的には5の方法で実装しようと思います。",[18,473,474,475,478,479,482],{},"なお、目指す形としては",[55,476,477],{},"\u002Fdist","配下に",[55,480,481],{},"\u002Fimgs","というディレクトリが作られ、そこに配下の画像が移動され、sassの画像パスが正しくなっているように設定します。",[48,484,485],{"id":485},"webpack4の設定でやってみる",[487,488,489],"h4",{"id":489},"loaderをインストールとconfigの記述を変更",[18,491,492],{},"それでは従来の方法での説明をまずは行います。最初に必要なloaderをインストールします。",[64,494,497],{"className":495,"code":496,"language":69},[67],"npm i -D url-loader file-loader\n",[55,498,496],{"__ignoreMap":72},[18,500,501,502,505],{},"この2つを用いてパスの解決とファイルの移動を行うことができます。そして",[55,503,504],{},"webpack.config.js","を以下のように変更します。",[64,507,511],{"className":508,"code":509,"filename":504,"language":510,"meta":72,"style":72},"language-javascript shiki shiki-themes material-theme-ocean","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","javascript",[55,512,513,540,568,578,583,615,620,634,639,648,658,663,705,721,730,743,749,767,792,798,811,817,823,832,869,878,884,900,910,923,939,945,951,959,977,982,990,996,1008,1018,1054,1060,1065,1071,1081,1087,1111,1117,1134,1139,1149,1163,1178,1186,1192],{"__ignoreMap":72},[92,514,515,518,521,523,526,528,530,533,535,538],{"class":94,"line":95},[92,516,517],{"class":261},"const",[92,519,520],{"class":228}," MiniCssExtractPlugin ",[92,522,265],{"class":145},[92,524,525],{"class":190}," require",[92,527,194],{"class":228},[92,529,268],{"class":145},[92,531,532],{"class":200},"mini-css-extract-plugin",[92,534,268],{"class":145},[92,536,537],{"class":228},")",[92,539,169],{"class":145},[92,541,542,544,547,549,551,553,555,558,560,562,565],{"class":94,"line":101},[92,543,517],{"class":261},[92,545,546],{"class":228}," path ",[92,548,265],{"class":145},[92,550,525],{"class":190},[92,552,194],{"class":228},[92,554,268],{"class":145},[92,556,557],{"class":200},"path",[92,559,268],{"class":145},[92,561,537],{"class":228},[92,563,564],{"class":145},";",[92,566,567],{"class":443}," \u002F\u002F 追加\n",[92,569,570,573,576],{"class":94,"line":107},[92,571,572],{"class":145},"module.exports",[92,574,575],{"class":145}," =",[92,577,153],{"class":145},[92,579,580],{"class":94,"line":113},[92,581,582],{"class":443}," \u002F\u002Fバンドル対象のファイル\n",[92,584,585,588,590,593,596,599,602,604,606,608,610,612],{"class":94,"line":119},[92,586,587],{"class":237}," entry",[92,589,162],{"class":145},[92,591,592],{"class":145}," .\u002F",[92,594,595],{"class":228},"src",[92,597,598],{"class":145},"\u002F",[92,600,601],{"class":228},"js",[92,603,598],{"class":145},[92,605,249],{"class":228},[92,607,146],{"class":145},[92,609,601],{"class":228},[92,611,268],{"class":145},[92,613,614],{"class":200},",\n",[92,616,617],{"class":94,"line":284},[92,618,619],{"class":228}," \n",[92,621,622,625,627,630,632],{"class":94,"line":294},[92,623,624],{"class":228}," mode:",[92,626,197],{"class":145},[92,628,629],{"class":200},"development",[92,631,197],{"class":145},[92,633,614],{"class":145},[92,635,636],{"class":94,"line":334},[92,637,638],{"class":228}," \n",[92,640,641,644,646],{"class":94,"line":366},[92,642,643],{"class":237}," module",[92,645,162],{"class":145},[92,647,153],{"class":145},[92,649,650,653,655],{"class":94,"line":392},[92,651,652],{"class":237}," rules",[92,654,162],{"class":145},[92,656,657],{"class":228}," [\n",[92,659,660],{"class":94,"line":415},[92,661,662],{"class":145}," {\n",[92,664,665,668,670,673,676,678,681,684,687,689,692,694,697,701,703],{"class":94,"line":425},[92,666,667],{"class":237}," test",[92,669,162],{"class":145},[92,671,672],{"class":145}," \u002F",[92,674,675],{"class":228},"\\.",[92,677,194],{"class":145},[92,679,680],{"class":200},"sa",[92,682,683],{"class":145},"|",[92,685,686],{"class":200},"sc",[92,688,683],{"class":145},[92,690,691],{"class":200},"c",[92,693,537],{"class":145},[92,695,696],{"class":200},"ss",[92,698,700],{"class":699},"s6cf3","$",[92,702,598],{"class":145},[92,704,614],{"class":145},[92,706,707,710,712,714,717,719],{"class":94,"line":435},[92,708,709],{"class":237}," exclude",[92,711,162],{"class":145},[92,713,672],{"class":145},[92,715,716],{"class":200},"node_modules",[92,718,598],{"class":145},[92,720,614],{"class":145},[92,722,723,726,728],{"class":94,"line":440},[92,724,725],{"class":237}," use",[92,727,162],{"class":145},[92,729,657],{"class":228},[92,731,733,736,738,741],{"class":94,"line":732},15,[92,734,735],{"class":228}," MiniCssExtractPlugin",[92,737,146],{"class":145},[92,739,740],{"class":228},"loader",[92,742,614],{"class":145},[92,744,746],{"class":94,"line":745},16,[92,747,748],{"class":145}," {\n",[92,750,752,755,757,760,763,765],{"class":94,"line":751},17,[92,753,754],{"class":237}," loader",[92,756,162],{"class":145},[92,758,759],{"class":145}," '",[92,761,762],{"class":200},"css-loader",[92,764,268],{"class":145},[92,766,614],{"class":145},[92,768,770,773,775,778,780,782,786,789],{"class":94,"line":769},18,[92,771,772],{"class":237}," options",[92,774,162],{"class":145},[92,776,777],{"class":145}," {",[92,779,191],{"class":237},[92,781,162],{"class":145},[92,783,785],{"class":784},"sbqyR"," true",[92,787,788],{"class":145}," }",[92,790,791],{"class":443},"　\u002F\u002F trueに変更\n",[92,793,795],{"class":94,"line":794},19,[92,796,797],{"class":145}," },\n",[92,799,801,804,807,809],{"class":94,"line":800},20,[92,802,803],{"class":145}," '",[92,805,806],{"class":200},"sass-loader",[92,808,268],{"class":145},[92,810,614],{"class":145},[92,812,814],{"class":94,"line":813},21,[92,815,816],{"class":228}," ]\n",[92,818,820],{"class":94,"line":819},22,[92,821,822],{"class":145}," },\n",[92,824,826,829],{"class":94,"line":825},23,[92,827,828],{"class":145}," {",[92,830,831],{"class":443}," \u002F\u002F追加\n",[92,833,835,837,839,841,843,845,848,850,853,855,858,860,862,864,867],{"class":94,"line":834},24,[92,836,667],{"class":237},[92,838,162],{"class":145},[92,840,672],{"class":145},[92,842,675],{"class":228},[92,844,194],{"class":145},[92,846,847],{"class":200},"png",[92,849,683],{"class":145},[92,851,852],{"class":200},"jpg",[92,854,683],{"class":145},[92,856,857],{"class":200},"gif",[92,859,537],{"class":145},[92,861,700],{"class":699},[92,863,598],{"class":145},[92,865,866],{"class":165},"i",[92,868,614],{"class":145},[92,870,872,874,876],{"class":94,"line":871},25,[92,873,725],{"class":237},[92,875,162],{"class":145},[92,877,657],{"class":228},[92,879,881],{"class":94,"line":880},26,[92,882,883],{"class":145}," {\n",[92,885,887,890,892,894,896,898],{"class":94,"line":886},27,[92,888,889],{"class":237}," loader",[92,891,162],{"class":145},[92,893,759],{"class":145},[92,895,463],{"class":200},[92,897,268],{"class":145},[92,899,614],{"class":145},[92,901,903,906,908],{"class":94,"line":902},28,[92,904,905],{"class":237}," options",[92,907,162],{"class":145},[92,909,153],{"class":145},[92,911,913,916,918,921],{"class":94,"line":912},29,[92,914,915],{"class":237}," limit",[92,917,162],{"class":145},[92,919,920],{"class":165}," 8192",[92,922,614],{"class":145},[92,924,926,929,931,933,936],{"class":94,"line":925},30,[92,927,928],{"class":237}," name",[92,930,162],{"class":145},[92,932,268],{"class":145},[92,934,935],{"class":200},".\u002Fimgs\u002F[name].[ext]",[92,937,938],{"class":145},"'\n",[92,940,942],{"class":94,"line":941},31,[92,943,944],{"class":145}," }\n",[92,946,948],{"class":94,"line":947},32,[92,949,950],{"class":145}," },\n",[92,952,954,957],{"class":94,"line":953},33,[92,955,956],{"class":228}," ]",[92,958,614],{"class":145},[92,960,962,965,967,969,972,974],{"class":94,"line":961},34,[92,963,964],{"class":237}," type",[92,966,162],{"class":145},[92,968,759],{"class":145},[92,970,971],{"class":200},"javascript\u002Fauto",[92,973,268],{"class":145},[92,975,976],{"class":443}," \u002F\u002F 大切\n",[92,978,980],{"class":94,"line":979},35,[92,981,822],{"class":145},[92,983,985,988],{"class":94,"line":984},36,[92,986,987],{"class":228}," ]",[92,989,614],{"class":145},[92,991,993],{"class":94,"line":992},37,[92,994,995],{"class":145}," },\n",[92,997,999,1002,1005],{"class":94,"line":998},38,[92,1000,1001],{"class":237}," resolve",[92,1003,1004],{"class":145},":{",[92,1006,1007],{"class":443},"　\u002F\u002F追加\n",[92,1009,1011,1014,1016],{"class":94,"line":1010},39,[92,1012,1013],{"class":237}," alias",[92,1015,162],{"class":145},[92,1017,153],{"class":145},[92,1019,1021,1024,1027,1029,1031,1034,1036,1039,1042,1045,1047,1049,1051],{"class":94,"line":1020},40,[92,1022,1023],{"class":145}," '",[92,1025,1026],{"class":237},"~",[92,1028,268],{"class":145},[92,1030,162],{"class":145},[92,1032,1033],{"class":228}," path",[92,1035,146],{"class":145},[92,1037,1038],{"class":190},"resolve",[92,1040,1041],{"class":228},"(__dirname",[92,1043,1044],{"class":145},",",[92,1046,759],{"class":145},[92,1048,595],{"class":200},[92,1050,268],{"class":145},[92,1052,1053],{"class":228},")\n",[92,1055,1057],{"class":94,"line":1056},41,[92,1058,1059],{"class":145}," }\n",[92,1061,1063],{"class":94,"line":1062},42,[92,1064,995],{"class":145},[92,1066,1068],{"class":94,"line":1067},43,[92,1069,1070],{"class":443}," \u002F\u002F ファイルの出力設定\n",[92,1072,1074,1077,1079],{"class":94,"line":1073},44,[92,1075,1076],{"class":237}," output",[92,1078,162],{"class":145},[92,1080,153],{"class":145},[92,1082,1084],{"class":94,"line":1083},45,[92,1085,1086],{"class":443}," \u002F\u002F 出力ファイルのディレクトリ名\n",[92,1088,1090,1093,1095,1098,1101,1104,1106,1109],{"class":94,"line":1089},46,[92,1091,1092],{"class":237}," path",[92,1094,162],{"class":145},[92,1096,1097],{"class":145}," `${",[92,1099,1100],{"class":228},"__dirname",[92,1102,1103],{"class":145},"}",[92,1105,477],{"class":200},[92,1107,1108],{"class":145},"`",[92,1110,614],{"class":145},[92,1112,1114],{"class":94,"line":1113},47,[92,1115,1116],{"class":443}," \u002F\u002F 出力ファイル名\n",[92,1118,1120,1123,1125,1128,1131],{"class":94,"line":1119},48,[92,1121,1122],{"class":237}," filename",[92,1124,162],{"class":145},[92,1126,1127],{"class":145}," \"",[92,1129,1130],{"class":200},"bundle.js",[92,1132,1133],{"class":145},"\"\n",[92,1135,1137],{"class":94,"line":1136},49,[92,1138,995],{"class":145},[92,1140,1142,1145,1147],{"class":94,"line":1141},50,[92,1143,1144],{"class":237}," plugins",[92,1146,162],{"class":145},[92,1148,657],{"class":228},[92,1150,1152,1155,1158,1160],{"class":94,"line":1151},51,[92,1153,1154],{"class":145}," new",[92,1156,1157],{"class":190}," MiniCssExtractPlugin",[92,1159,194],{"class":228},[92,1161,1162],{"class":145},"{\n",[92,1164,1166,1169,1171,1173,1176],{"class":94,"line":1165},52,[92,1167,1168],{"class":237}," filename",[92,1170,162],{"class":145},[92,1172,759],{"class":145},[92,1174,1175],{"class":200},"style.css",[92,1177,938],{"class":145},[92,1179,1181,1184],{"class":94,"line":1180},53,[92,1182,1183],{"class":145}," }",[92,1185,1053],{"class":228},[92,1187,1189],{"class":94,"line":1188},54,[92,1190,1191],{"class":228}," ]\n",[92,1193,1195],{"class":94,"line":1194},55,[92,1196,1197],{"class":145},"};\n",[18,1199,1200],{},"それでは細かい説明をします。",[487,1202,1203],{"id":1203},"file-loaderの設定",[18,1205,1206],{},"file-loaderではjpg,png,gifの拡張子を見つけた時の処理を記述します。",[64,1208,1210],{"className":508,"code":1209,"filename":504,"language":510,"meta":72,"style":72},"{\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",[55,1211,1212,1216,1249,1258,1263,1278,1287,1298,1311,1315,1320,1327,1343],{"__ignoreMap":72},[92,1213,1214],{"class":94,"line":95},[92,1215,1162],{"class":145},[92,1217,1218,1221,1223,1225,1227,1229,1231,1233,1235,1237,1239,1241,1243,1245,1247],{"class":94,"line":101},[92,1219,1220],{"class":149}," test",[92,1222,162],{"class":145},[92,1224,672],{"class":145},[92,1226,675],{"class":228},[92,1228,194],{"class":145},[92,1230,847],{"class":200},[92,1232,683],{"class":145},[92,1234,852],{"class":200},[92,1236,683],{"class":145},[92,1238,857],{"class":200},[92,1240,537],{"class":145},[92,1242,700],{"class":699},[92,1244,598],{"class":145},[92,1246,866],{"class":165},[92,1248,614],{"class":145},[92,1250,1251,1254,1256],{"class":94,"line":107},[92,1252,1253],{"class":149}," use",[92,1255,162],{"class":145},[92,1257,657],{"class":237},[92,1259,1260],{"class":94,"line":113},[92,1261,1262],{"class":145}," {\n",[92,1264,1265,1268,1270,1272,1274,1276],{"class":94,"line":119},[92,1266,1267],{"class":237}," loader",[92,1269,162],{"class":145},[92,1271,759],{"class":145},[92,1273,463],{"class":200},[92,1275,268],{"class":145},[92,1277,614],{"class":145},[92,1279,1280,1283,1285],{"class":94,"line":284},[92,1281,1282],{"class":237}," options",[92,1284,162],{"class":145},[92,1286,153],{"class":145},[92,1288,1289,1292,1294,1296],{"class":94,"line":294},[92,1290,1291],{"class":237}," limit",[92,1293,162],{"class":145},[92,1295,920],{"class":165},[92,1297,614],{"class":145},[92,1299,1300,1303,1305,1307,1309],{"class":94,"line":334},[92,1301,1302],{"class":237}," name",[92,1304,162],{"class":145},[92,1306,268],{"class":145},[92,1308,935],{"class":200},[92,1310,938],{"class":145},[92,1312,1313],{"class":94,"line":366},[92,1314,1059],{"class":145},[92,1316,1317],{"class":94,"line":392},[92,1318,1319],{"class":145}," },\n",[92,1321,1322,1325],{"class":94,"line":415},[92,1323,1324],{"class":237}," ]",[92,1326,614],{"class":145},[92,1328,1329,1332,1334,1336,1338,1340],{"class":94,"line":425},[92,1330,1331],{"class":149}," type",[92,1333,162],{"class":145},[92,1335,759],{"class":145},[92,1337,971],{"class":200},[92,1339,268],{"class":145},[92,1341,1342],{"class":443}," \u002F\u002F大切\n",[92,1344,1345],{"class":94,"line":435},[92,1346,1347],{"class":145},"},\n",[18,1349,1350],{},"loaderにはurl-loaderを指定してファイルをURIに変換できるようにします。",[18,1352,1353,1354,1357],{},"distでは画像はimgsディレクトリ配下に格納させますので、",[55,1355,1356],{},"name:'.\u002Fimgs\u002F[name].[ext]'","としておきます。sass,jsの画像ファイルの参照もこのディレクトリ構成にあったパスに変更してくれます。",[18,1359,1360,1361,1364,1365,1371],{},"webpack5で従来の方法を使う場合、",[55,1362,1363],{},"type: 'javascript\u002Fauto'","を忘れないようにしてください。",[22,1366,1370],{"href":1367,"rel":1368},"https:\u002F\u002Fwebpack.js.org\u002Fguides\u002Fasset-modules\u002F",[1369],"nofollow","公式ドキュメントの記述はこちら。"," webpack5にはAsset Moduleというものがすでにあり、それがfile-loader達と似たような働きを行います。もし先ほどの記述がないと二重で処理が入るなどがしておかしくなります。",[487,1373,1374],{"id":1374},"エイリアスの設定",[64,1376,1378],{"className":508,"code":1377,"filename":504,"language":510,"meta":72,"style":72},"{\n resolve:{　\u002F\u002F追加\n alias: {\n '~': path.resolve(__dirname, 'src')\n }\n },\n},\n",[55,1379,1380,1384,1392,1400,1431,1435,1439],{"__ignoreMap":72},[92,1381,1382],{"class":94,"line":95},[92,1383,1162],{"class":145},[92,1385,1386,1388,1390],{"class":94,"line":101},[92,1387,1001],{"class":149},[92,1389,1004],{"class":145},[92,1391,1007],{"class":443},[92,1393,1394,1396,1398],{"class":94,"line":107},[92,1395,1013],{"class":149},[92,1397,162],{"class":145},[92,1399,153],{"class":145},[92,1401,1402,1404,1406,1408,1411,1413,1415,1417,1419,1421,1423,1425,1427,1429],{"class":94,"line":113},[92,1403,1023],{"class":145},[92,1405,1026],{"class":200},[92,1407,268],{"class":145},[92,1409,1410],{"class":237},": ",[92,1412,557],{"class":228},[92,1414,146],{"class":145},[92,1416,1038],{"class":190},[92,1418,194],{"class":237},[92,1420,1100],{"class":228},[92,1422,1044],{"class":145},[92,1424,759],{"class":145},[92,1426,595],{"class":200},[92,1428,268],{"class":145},[92,1430,1053],{"class":237},[92,1432,1433],{"class":94,"line":119},[92,1434,1059],{"class":145},[92,1436,1437],{"class":94,"line":284},[92,1438,995],{"class":145},[92,1440,1441],{"class":94,"line":294},[92,1442,1347],{"class":145},[18,1444,1445,1447,1448,1451],{},[55,1446,1038],{},"ではwebpackがデフォルトで持っている、名前解決に新しい設定を追加したり、変更することができます。ここでは先ほど",[55,1449,1450],{},"~\u002Fimg\u002Ftest.png","みたいな書き方をしたパスを正しいパスに変換する処理を書いています。",[18,1453,1454,1456,1457,1460,1461,1463,1464,1467,1468,1470],{},[55,1455,1026],{},"はエイリアスとして設定しました。",[55,1458,1459],{},"'~': path.resolve(__dirname, 'src')","とすることで、",[55,1462,1026],{},"を見つけたら",[55,1465,1466],{},"path.resolve(__dirname, 'src')","というに変換するんだなとwebpackが読み取ります。ちなみに",[55,1469,1466],{},"というのはこのファイル（今回のwebpack.config.js）が置かれているOS上のパスのことです。macのあるディレクトリで構築していると以下の様に変換されます。",[64,1472,1475],{"className":1473,"code":1474,"language":69},[67],"\u002FUsers\u002Fjun\u002FDesktop\u002Fmy_apps\u002Fwebpack_practice\u002Fsrc\n",[55,1476,1474],{"__ignoreMap":72},[18,1478,1479,1480,1482],{},"もう少しざっくり説明するとこの",[55,1481,595],{},"ディレクトリを指しています。",[64,1484,1487],{"className":1485,"code":1486,"language":69},[67],".\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",[55,1488,1486],{"__ignoreMap":72},[18,1490,1491,1492,1495,1496,1498,1499,1501,1502,1504],{},"つまり、sassで",[55,1493,1494],{},"~\u002Fimgs\u002Ftest.png","とすれば",[55,1497,1026],{},"を自動に変換して",[55,1500,595],{},"配下の",[55,1503,61],{},"の画像にバインドされます。このように特定ディレクトリやそのパスを別名で呼ぶことをエイリアス（alias）といいます。",[18,1506,1507],{},"ではなぜエイリアスで呼ぶことがいいのでしょうか？それは階層が深くなるほど、相対パスの指定では苦労するからです。他にも相対パスで指定すると、imgsディレクトリの位置を変えたいとなった時に全ての相対パスを変更する必要があります。srcディレクトリをエイリアスにすることで、相対パスでしていなくても良くなります。画像を使いたい場合は",[64,1509,1511],{"className":85,"code":1510,"language":88,"meta":72,"style":72},"background-image('~\u002Fimgs\u002Ftest.png')\n",[55,1512,1513],{"__ignoreMap":72},[92,1514,1515],{"class":94,"line":95},[92,1516,1510],{},[64,1518,1520],{"className":508,"code":1519,"language":510,"meta":72,"style":72},"import img from '~\u002Fimgs\u002Ftest.png';\nconsole.log(img);\n",[55,1521,1522,1541],{"__ignoreMap":72},[92,1523,1524,1527,1530,1533,1535,1537,1539],{"class":94,"line":95},[92,1525,1526],{"class":699},"import",[92,1528,1529],{"class":228}," img ",[92,1531,1532],{"class":699},"from",[92,1534,759],{"class":145},[92,1536,1494],{"class":200},[92,1538,268],{"class":145},[92,1540,169],{"class":145},[92,1542,1543,1546,1548,1551,1554],{"class":94,"line":101},[92,1544,1545],{"class":228},"console",[92,1547,146],{"class":145},[92,1549,1550],{"class":190},"log",[92,1552,1553],{"class":228},"(img)",[92,1555,169],{"class":145},[18,1557,1558],{},"と指定すればよくなります。ディレクトリ構成の変更にも柔軟に対応できます。",[11,1560,1563,1564,1566,1567,1570],{"className":1561},[14,1562],"alert-success","\nエイリアスは干渉しなければいろいろ設定できます。今回は",[55,1565,595],{},"直下ですが、",[55,1568,1569],{},"src\u002Fimgs","を指す画像用エイリアスなんかも作成できます。プロジェクトに合わせて設定しましょう。\n",[18,1572,1573],{},"これで画像ファイルが利用できる様になります。次はwebpack5の方法でやってみましょう。",[48,1575,1576],{"id":1576},"webpack5でのやり方",[18,1578,1579,1580,1044,1582,1044,1584,1586],{},"webpack5の方法では結構簡単になりました。webpack4でインストールした",[55,1581,467],{},[55,1583,463],{},[55,1585,470],{},"は必要ありません。",[64,1588,1590],{"className":508,"code":1589,"filename":504,"language":510,"meta":72,"style":72},"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",[55,1591,1592,1614,1636,1644,1648,1674,1678,1690,1694,1702,1710,1714,1746,1760,1768,1778,1782,1796,1812,1816,1826,1830,1834,1838,1870,1875,1884,1898,1903,1917,1921,1927,1931,1938,1946,1974,1978,1982,1986,1994,1998,2016,2020,2032,2036,2044,2054,2066,2072,2076],{"__ignoreMap":72},[92,1593,1594,1596,1598,1600,1602,1604,1606,1608,1610,1612],{"class":94,"line":95},[92,1595,517],{"class":261},[92,1597,520],{"class":228},[92,1599,265],{"class":145},[92,1601,525],{"class":190},[92,1603,194],{"class":228},[92,1605,268],{"class":145},[92,1607,532],{"class":200},[92,1609,268],{"class":145},[92,1611,537],{"class":228},[92,1613,169],{"class":145},[92,1615,1616,1618,1620,1622,1624,1626,1628,1630,1632,1634],{"class":94,"line":101},[92,1617,517],{"class":261},[92,1619,546],{"class":228},[92,1621,265],{"class":145},[92,1623,525],{"class":190},[92,1625,194],{"class":228},[92,1627,268],{"class":145},[92,1629,557],{"class":200},[92,1631,268],{"class":145},[92,1633,537],{"class":228},[92,1635,169],{"class":145},[92,1637,1638,1640,1642],{"class":94,"line":107},[92,1639,572],{"class":145},[92,1641,575],{"class":145},[92,1643,153],{"class":145},[92,1645,1646],{"class":94,"line":113},[92,1647,582],{"class":443},[92,1649,1650,1652,1654,1656,1658,1660,1662,1664,1666,1668,1670,1672],{"class":94,"line":119},[92,1651,587],{"class":237},[92,1653,162],{"class":145},[92,1655,592],{"class":145},[92,1657,595],{"class":228},[92,1659,598],{"class":145},[92,1661,601],{"class":228},[92,1663,598],{"class":145},[92,1665,249],{"class":228},[92,1667,146],{"class":145},[92,1669,601],{"class":228},[92,1671,268],{"class":145},[92,1673,614],{"class":200},[92,1675,1676],{"class":94,"line":284},[92,1677,619],{"class":228},[92,1679,1680,1682,1684,1686,1688],{"class":94,"line":294},[92,1681,624],{"class":228},[92,1683,197],{"class":145},[92,1685,629],{"class":200},[92,1687,197],{"class":145},[92,1689,614],{"class":145},[92,1691,1692],{"class":94,"line":334},[92,1693,638],{"class":228},[92,1695,1696,1698,1700],{"class":94,"line":366},[92,1697,643],{"class":237},[92,1699,162],{"class":145},[92,1701,153],{"class":145},[92,1703,1704,1706,1708],{"class":94,"line":392},[92,1705,652],{"class":237},[92,1707,162],{"class":145},[92,1709,657],{"class":228},[92,1711,1712],{"class":94,"line":415},[92,1713,662],{"class":145},[92,1715,1716,1718,1720,1722,1724,1726,1728,1730,1732,1734,1736,1738,1740,1742,1744],{"class":94,"line":425},[92,1717,667],{"class":237},[92,1719,162],{"class":145},[92,1721,672],{"class":145},[92,1723,675],{"class":228},[92,1725,194],{"class":145},[92,1727,680],{"class":200},[92,1729,683],{"class":145},[92,1731,686],{"class":200},[92,1733,683],{"class":145},[92,1735,691],{"class":200},[92,1737,537],{"class":145},[92,1739,696],{"class":200},[92,1741,700],{"class":699},[92,1743,598],{"class":145},[92,1745,614],{"class":145},[92,1747,1748,1750,1752,1754,1756,1758],{"class":94,"line":435},[92,1749,709],{"class":237},[92,1751,162],{"class":145},[92,1753,672],{"class":145},[92,1755,716],{"class":200},[92,1757,598],{"class":145},[92,1759,614],{"class":145},[92,1761,1762,1764,1766],{"class":94,"line":440},[92,1763,725],{"class":237},[92,1765,162],{"class":145},[92,1767,657],{"class":228},[92,1769,1770,1772,1774,1776],{"class":94,"line":732},[92,1771,735],{"class":228},[92,1773,146],{"class":145},[92,1775,740],{"class":228},[92,1777,614],{"class":145},[92,1779,1780],{"class":94,"line":745},[92,1781,748],{"class":145},[92,1783,1784,1786,1788,1790,1792,1794],{"class":94,"line":751},[92,1785,754],{"class":237},[92,1787,162],{"class":145},[92,1789,759],{"class":145},[92,1791,762],{"class":200},[92,1793,268],{"class":145},[92,1795,614],{"class":145},[92,1797,1798,1800,1802,1804,1806,1808,1810],{"class":94,"line":769},[92,1799,772],{"class":237},[92,1801,162],{"class":145},[92,1803,777],{"class":145},[92,1805,191],{"class":237},[92,1807,162],{"class":145},[92,1809,785],{"class":784},[92,1811,209],{"class":145},[92,1813,1814],{"class":94,"line":794},[92,1815,797],{"class":145},[92,1817,1818,1820,1822,1824],{"class":94,"line":800},[92,1819,803],{"class":145},[92,1821,806],{"class":200},[92,1823,268],{"class":145},[92,1825,614],{"class":145},[92,1827,1828],{"class":94,"line":813},[92,1829,816],{"class":228},[92,1831,1832],{"class":94,"line":819},[92,1833,822],{"class":145},[92,1835,1836],{"class":94,"line":825},[92,1837,662],{"class":145},[92,1839,1840,1842,1844,1846,1848,1850,1852,1854,1856,1858,1860,1862,1864,1866,1868],{"class":94,"line":834},[92,1841,667],{"class":237},[92,1843,162],{"class":145},[92,1845,672],{"class":145},[92,1847,675],{"class":228},[92,1849,194],{"class":145},[92,1851,847],{"class":200},[92,1853,683],{"class":145},[92,1855,852],{"class":200},[92,1857,683],{"class":145},[92,1859,857],{"class":200},[92,1861,537],{"class":145},[92,1863,700],{"class":699},[92,1865,598],{"class":145},[92,1867,866],{"class":165},[92,1869,614],{"class":145},[92,1871,1872],{"class":94,"line":871},[92,1873,1874],{"class":443}," \u002F\u002F ここから変更。useがなくなり。typeが変更されている。\n",[92,1876,1877,1880,1882],{"class":94,"line":880},[92,1878,1879],{"class":237}," generator",[92,1881,162],{"class":145},[92,1883,153],{"class":145},[92,1885,1886,1889,1891,1893,1896],{"class":94,"line":886},[92,1887,1888],{"class":237}," filename",[92,1890,162],{"class":145},[92,1892,759],{"class":145},[92,1894,1895],{"class":200},"imgs\u002F[name][ext][query]",[92,1897,938],{"class":145},[92,1899,1900],{"class":94,"line":902},[92,1901,1902],{"class":145}," },\n",[92,1904,1905,1908,1910,1912,1915],{"class":94,"line":912},[92,1906,1907],{"class":237}," type",[92,1909,162],{"class":145},[92,1911,759],{"class":145},[92,1913,1914],{"class":200},"asset\u002Fresource",[92,1916,938],{"class":145},[92,1918,1919],{"class":94,"line":925},[92,1920,822],{"class":145},[92,1922,1923,1925],{"class":94,"line":941},[92,1924,987],{"class":228},[92,1926,614],{"class":145},[92,1928,1929],{"class":94,"line":947},[92,1930,995],{"class":145},[92,1932,1933,1935],{"class":94,"line":953},[92,1934,1001],{"class":237},[92,1936,1937],{"class":145},":{\n",[92,1939,1940,1942,1944],{"class":94,"line":961},[92,1941,1013],{"class":237},[92,1943,162],{"class":145},[92,1945,153],{"class":145},[92,1947,1948,1950,1952,1954,1956,1958,1960,1962,1964,1966,1968,1970,1972],{"class":94,"line":979},[92,1949,1023],{"class":145},[92,1951,1026],{"class":237},[92,1953,268],{"class":145},[92,1955,162],{"class":145},[92,1957,1033],{"class":228},[92,1959,146],{"class":145},[92,1961,1038],{"class":190},[92,1963,1041],{"class":228},[92,1965,1044],{"class":145},[92,1967,759],{"class":145},[92,1969,595],{"class":200},[92,1971,268],{"class":145},[92,1973,1053],{"class":228},[92,1975,1976],{"class":94,"line":984},[92,1977,1059],{"class":145},[92,1979,1980],{"class":94,"line":992},[92,1981,995],{"class":145},[92,1983,1984],{"class":94,"line":998},[92,1985,1070],{"class":443},[92,1987,1988,1990,1992],{"class":94,"line":1010},[92,1989,1076],{"class":237},[92,1991,162],{"class":145},[92,1993,153],{"class":145},[92,1995,1996],{"class":94,"line":1020},[92,1997,1086],{"class":443},[92,1999,2000,2002,2004,2006,2008,2010,2012,2014],{"class":94,"line":1056},[92,2001,1092],{"class":237},[92,2003,162],{"class":145},[92,2005,1097],{"class":145},[92,2007,1100],{"class":228},[92,2009,1103],{"class":145},[92,2011,477],{"class":200},[92,2013,1108],{"class":145},[92,2015,614],{"class":145},[92,2017,2018],{"class":94,"line":1062},[92,2019,1116],{"class":443},[92,2021,2022,2024,2026,2028,2030],{"class":94,"line":1067},[92,2023,1122],{"class":237},[92,2025,162],{"class":145},[92,2027,1127],{"class":145},[92,2029,1130],{"class":200},[92,2031,1133],{"class":145},[92,2033,2034],{"class":94,"line":1073},[92,2035,995],{"class":145},[92,2037,2038,2040,2042],{"class":94,"line":1083},[92,2039,1144],{"class":237},[92,2041,162],{"class":145},[92,2043,657],{"class":228},[92,2045,2046,2048,2050,2052],{"class":94,"line":1089},[92,2047,1154],{"class":145},[92,2049,1157],{"class":190},[92,2051,194],{"class":228},[92,2053,1162],{"class":145},[92,2055,2056,2058,2060,2062,2064],{"class":94,"line":1113},[92,2057,1168],{"class":237},[92,2059,162],{"class":145},[92,2061,759],{"class":145},[92,2063,1175],{"class":200},[92,2065,938],{"class":145},[92,2067,2068,2070],{"class":94,"line":1119},[92,2069,1183],{"class":145},[92,2071,1053],{"class":228},[92,2073,2074],{"class":94,"line":1136},[92,2075,1191],{"class":228},[92,2077,2078],{"class":94,"line":1141},[92,2079,1197],{"class":145},[18,2081,2082,2083,2086,2087,2090,2091,2094],{},"変わった箇所はpng,jpg,gifの",[55,2084,2085],{},"rules","の設定です。4の設定ではloaderを使用するために",[55,2088,2089],{},"use","で設定しました。しかし5では",[55,2092,2093],{},"type: 'asset\u002Fresource'","を使用すること4で実装していた動きを実装できます。",[18,2096,2097],{},"エイリアスなどの設定は変わりません。webpackにおける画像ファイルの設定以上となります。",[44,2099,36],{"id":36},[18,2101,2102],{},"これらの設定があればひとまずsassとjsを用いた作成ができそうです。ですがwebエンジニアを悩ませるこれの対策をしなくてはいけません。",[2104,2105],"image-render",{":src":2106,":width":2107,":center":2108},"'_mix\u002FInternet-Explorer-Logo.png'","'300px'","true",[18,2110,2111],{},"Interner Explorer（以後IE）です。特にJSが影響を受けます。JSにはES5、ES6という2種類の記述方法があります。今回はその違いの説明は省きますが、ES6はES5より効率的な書き方ができます。しかしIEはES5の書き方しか受け付けず、ES6の書き方は構文エラーを起こして実行できないというクソ仕様です。",[18,2113,2114,2115,2118],{},"そのためES6のJSを使用するにはES5の記述に変換する必要があります。その変換をしてくれるのがBabelです。webpackには",[55,2116,2117],{},"babel-loader","というものがあるので、それを利用してバンドルと同時に変換（トランスコンパイル）を行いましょう。",[18,2120,2121],{},"試しにIEでは使用できないアロー関数と定数宣言を書いておきます。",[64,2123,2126],{"className":508,"code":2124,"filename":2125,"language":510,"meta":72,"style":72},"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",[55,2127,2128,2146,2164,2177,2181,2218,2253,2259,2263,2281,2290,2306],{"__ignoreMap":72},[92,2129,2130,2132,2135,2137,2139,2142,2144],{"class":94,"line":95},[92,2131,1526],{"class":699},[92,2133,2134],{"class":228}," $ ",[92,2136,1532],{"class":699},[92,2138,759],{"class":145},[92,2140,2141],{"class":200},"jquery",[92,2143,268],{"class":145},[92,2145,169],{"class":145},[92,2147,2148,2150,2153,2155,2157,2160,2162],{"class":94,"line":101},[92,2149,1526],{"class":699},[92,2151,2152],{"class":228}," funcs ",[92,2154,1532],{"class":699},[92,2156,759],{"class":145},[92,2158,2159],{"class":200},".\u002Ffunctions",[92,2161,268],{"class":145},[92,2163,169],{"class":145},[92,2165,2166,2168,2170,2173,2175],{"class":94,"line":107},[92,2167,1526],{"class":699},[92,2169,759],{"class":145},[92,2171,2172],{"class":200},"~\u002Fsass\u002Fstyle.scss",[92,2174,268],{"class":145},[92,2176,169],{"class":145},[92,2178,2179],{"class":94,"line":113},[92,2180,281],{"emptyLinePlaceholder":280},[92,2182,2183,2185,2187,2189,2192,2194,2196,2198,2201,2203,2205,2208,2210,2213,2216],{"class":94,"line":119},[92,2184,700],{"class":190},[92,2186,194],{"class":228},[92,2188,268],{"class":145},[92,2190,2191],{"class":200},"#submmit",[92,2193,268],{"class":145},[92,2195,537],{"class":228},[92,2197,146],{"class":145},[92,2199,2200],{"class":190},"on",[92,2202,194],{"class":228},[92,2204,268],{"class":145},[92,2206,2207],{"class":200},"click",[92,2209,268],{"class":145},[92,2211,2212],{"class":145},",()",[92,2214,2215],{"class":261},"=>",[92,2217,1162],{"class":145},[92,2219,2220,2223,2226,2228,2231,2233,2235,2238,2240,2242,2244,2247,2249,2251],{"class":94,"line":284},[92,2221,2222],{"class":699}," return",[92,2224,2225],{"class":228}," funcs",[92,2227,146],{"class":145},[92,2229,2230],{"class":190},"addNewText",[92,2232,194],{"class":237},[92,2234,268],{"class":145},[92,2236,2237],{"class":200},"#app",[92,2239,268],{"class":145},[92,2241,1044],{"class":145},[92,2243,268],{"class":145},[92,2245,2246],{"class":200},"#inputs",[92,2248,268],{"class":145},[92,2250,537],{"class":237},[92,2252,169],{"class":145},[92,2254,2255,2257],{"class":94,"line":294},[92,2256,1103],{"class":145},[92,2258,1053],{"class":228},[92,2260,2261],{"class":94,"line":334},[92,2262,281],{"emptyLinePlaceholder":280},[92,2264,2265,2267,2270,2272,2274,2277,2279],{"class":94,"line":366},[92,2266,517],{"class":261},[92,2268,2269],{"class":228}," message ",[92,2271,265],{"class":145},[92,2273,1127],{"class":145},[92,2275,2276],{"class":200},"use in IE",[92,2278,197],{"class":145},[92,2280,169],{"class":145},[92,2282,2283,2286,2288],{"class":94,"line":392},[92,2284,2285],{"class":145},"()",[92,2287,2215],{"class":261},[92,2289,1162],{"class":145},[92,2291,2292,2295,2297,2299,2301,2304],{"class":94,"line":415},[92,2293,2294],{"class":228}," console",[92,2296,146],{"class":145},[92,2298,1550],{"class":190},[92,2300,194],{"class":237},[92,2302,2303],{"class":228},"message",[92,2305,1053],{"class":237},[92,2307,2308],{"class":94,"line":425},[92,2309,122],{"class":145},[18,2311,2312],{},"ちなみにbundle.jsは以下の通りに書かれていました。ES6の書き方がで出力されています。",[64,2314,2316],{"className":508,"code":2315,"filename":1130,"language":510,"meta":72,"style":72},"\u002F\u002F...\n\u002F\u002F const message = \\\"use in IE\\\";\\n()=>{\\n console.log(message)\n\u002F\u002F...\n",[55,2317,2318,2323,2328],{"__ignoreMap":72},[92,2319,2320],{"class":94,"line":95},[92,2321,2322],{"class":443},"\u002F\u002F...\n",[92,2324,2325],{"class":94,"line":101},[92,2326,2327],{"class":443},"\u002F\u002F const message = \\\"use in IE\\\";\\n()=>{\\n console.log(message)\n",[92,2329,2330],{"class":94,"line":107},[92,2331,2322],{"class":443},[48,2333,2335],{"id":2334},"モジュールをインストールしjsのruleを設定","モジュールをインストールし、JSのruleを設定",[18,2337,2338],{},"まずはloaderをインストールします。",[64,2340,2343],{"className":2341,"code":2342,"language":69},[67],"npm install -D babel-loader @babel\u002Fcore @babel\u002Fpreset-env\n",[55,2344,2342],{"__ignoreMap":72},[18,2346,2347,2348,2353,2354,2357],{},"そして",[22,2349,2352],{"href":2350,"rel":2351},"https:\u002F\u002Fwebpack.js.org\u002Floaders\u002Fbabel-loader\u002F",[1369],"ドキュメントのまま","ですがJSファイルに対しての",[55,2355,2356],{},"rule","を追加し、babel-loaderを適用させる様にします。",[64,2359,2362],{"className":508,"code":2360,"filename":2361,"language":510,"meta":72,"style":72},"\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",[55,2363,2364,2369,2378,2387,2392,2396,2421,2443,2452,2467,2476,2496,2501,2506,2510,2514,2546,2560,2568,2579,2584,2598,2614,2618,2629,2634,2638,2643,2649,2653],{"__ignoreMap":72},[92,2365,2366],{"class":94,"line":95},[92,2367,2368],{"class":443},"\u002F\u002F ...\n",[92,2370,2371,2374,2376],{"class":94,"line":101},[92,2372,2373],{"class":149},"module",[92,2375,162],{"class":145},[92,2377,153],{"class":145},[92,2379,2380,2383,2385],{"class":94,"line":107},[92,2381,2382],{"class":149}," rules",[92,2384,162],{"class":145},[92,2386,657],{"class":237},[92,2388,2389],{"class":94,"line":113},[92,2390,2391],{"class":443}," \u002F\u002F 追加\n",[92,2393,2394],{"class":94,"line":119},[92,2395,1262],{"class":145},[92,2397,2398,2401,2403,2405,2407,2410,2413,2415,2417,2419],{"class":94,"line":284},[92,2399,2400],{"class":237}," test",[92,2402,162],{"class":145},[92,2404,672],{"class":145},[92,2406,675],{"class":228},[92,2408,2409],{"class":200},"m",[92,2411,2412],{"class":145},"?",[92,2414,601],{"class":200},[92,2416,700],{"class":699},[92,2418,598],{"class":145},[92,2420,614],{"class":145},[92,2422,2423,2426,2428,2431,2433,2435,2438,2441],{"class":94,"line":294},[92,2424,2425],{"class":237}," exclude",[92,2427,162],{"class":145},[92,2429,2430],{"class":145}," \u002F(",[92,2432,716],{"class":200},[92,2434,683],{"class":145},[92,2436,2437],{"class":200},"bower_components",[92,2439,2440],{"class":145},")\u002F",[92,2442,614],{"class":145},[92,2444,2445,2448,2450],{"class":94,"line":334},[92,2446,2447],{"class":237}," use",[92,2449,162],{"class":145},[92,2451,153],{"class":145},[92,2453,2454,2457,2459,2461,2463,2465],{"class":94,"line":366},[92,2455,2456],{"class":237}," loader",[92,2458,162],{"class":145},[92,2460,759],{"class":145},[92,2462,2117],{"class":200},[92,2464,268],{"class":145},[92,2466,614],{"class":145},[92,2468,2469,2472,2474],{"class":94,"line":392},[92,2470,2471],{"class":237}," options",[92,2473,162],{"class":145},[92,2475,153],{"class":145},[92,2477,2478,2481,2483,2486,2488,2491,2493],{"class":94,"line":415},[92,2479,2480],{"class":237}," presets",[92,2482,162],{"class":145},[92,2484,2485],{"class":237}," [",[92,2487,268],{"class":145},[92,2489,2490],{"class":200},"@babel\u002Fpreset-env",[92,2492,268],{"class":145},[92,2494,2495],{"class":237},"]\n",[92,2497,2498],{"class":94,"line":425},[92,2499,2500],{"class":145}," }\n",[92,2502,2503],{"class":94,"line":435},[92,2504,2505],{"class":145}," }\n",[92,2507,2508],{"class":94,"line":440},[92,2509,1319],{"class":145},[92,2511,2512],{"class":94,"line":732},[92,2513,1262],{"class":145},[92,2515,2516,2518,2520,2522,2524,2526,2528,2530,2532,2534,2536,2538,2540,2542,2544],{"class":94,"line":745},[92,2517,2400],{"class":237},[92,2519,162],{"class":145},[92,2521,672],{"class":145},[92,2523,675],{"class":228},[92,2525,194],{"class":145},[92,2527,680],{"class":200},[92,2529,683],{"class":145},[92,2531,686],{"class":200},[92,2533,683],{"class":145},[92,2535,691],{"class":200},[92,2537,537],{"class":145},[92,2539,696],{"class":200},[92,2541,700],{"class":699},[92,2543,598],{"class":145},[92,2545,614],{"class":145},[92,2547,2548,2550,2552,2554,2556,2558],{"class":94,"line":751},[92,2549,2425],{"class":237},[92,2551,162],{"class":145},[92,2553,672],{"class":145},[92,2555,716],{"class":200},[92,2557,598],{"class":145},[92,2559,614],{"class":145},[92,2561,2562,2564,2566],{"class":94,"line":769},[92,2563,2447],{"class":237},[92,2565,162],{"class":145},[92,2567,657],{"class":237},[92,2569,2570,2573,2575,2577],{"class":94,"line":794},[92,2571,2572],{"class":228}," MiniCssExtractPlugin",[92,2574,146],{"class":145},[92,2576,740],{"class":228},[92,2578,614],{"class":145},[92,2580,2581],{"class":94,"line":800},[92,2582,2583],{"class":145}," {\n",[92,2585,2586,2588,2590,2592,2594,2596],{"class":94,"line":813},[92,2587,889],{"class":237},[92,2589,162],{"class":145},[92,2591,759],{"class":145},[92,2593,762],{"class":200},[92,2595,268],{"class":145},[92,2597,614],{"class":145},[92,2599,2600,2602,2604,2606,2608,2610,2612],{"class":94,"line":819},[92,2601,905],{"class":237},[92,2603,162],{"class":145},[92,2605,777],{"class":145},[92,2607,191],{"class":237},[92,2609,162],{"class":145},[92,2611,785],{"class":784},[92,2613,209],{"class":145},[92,2615,2616],{"class":94,"line":825},[92,2617,1902],{"class":145},[92,2619,2620,2623,2625,2627],{"class":94,"line":834},[92,2621,2622],{"class":145}," '",[92,2624,806],{"class":200},[92,2626,268],{"class":145},[92,2628,614],{"class":145},[92,2630,2631],{"class":94,"line":871},[92,2632,2633],{"class":237}," ]\n",[92,2635,2636],{"class":94,"line":880},[92,2637,1319],{"class":145},[92,2639,2640],{"class":94,"line":886},[92,2641,2642],{"class":443}," \u002F\u002F ...\n",[92,2644,2645,2647],{"class":94,"line":902},[92,2646,1324],{"class":237},[92,2648,614],{"class":145},[92,2650,2651],{"class":94,"line":912},[92,2652,1347],{"class":145},[92,2654,2655],{"class":94,"line":925},[92,2656,2368],{"class":443},[18,2658,2659],{},"これでbabelが有効になり、トランスコンパイルされます。実際に動かしてみてbundle.jsをみてみると",[64,2661,2664],{"className":2662,"code":2663,"filename":1130,"language":69,"meta":72},[67],"var message = \\\"use in IE\\\";\\n\\n(function () {\\n console.log(message);\\n})\n",[55,2665,2663],{"__ignoreMap":72},[18,2667,2668],{},"このようにES5の書き方に直してくれました。",[48,2670,2671],{"id":2671},"特定のビルドだけでトランスコンパイルしたい時",[18,2673,2674,2675,2678,2679,2682],{},"ちなみに今回は数行のコードなので十分ですが、本番では大量のファイルと記述を変換するので時間がかかったりメモリを食います。",[55,2676,2677],{},"npm run watch","でもそこそこメモリを食う様になります。対策としては環境変数を用いて本番ビルドの時だけトランスコンパイルさせる様にします。簡単な例としてまず",[55,2680,2681],{},"packge.json","でnode.jsの変数をコマンド上で定義します。",[64,2684,2689],{"className":2685,"code":2686,"filename":2687,"language":2688,"meta":72,"style":72},"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",[55,2690,2691,2705,2726,2746,2775],{"__ignoreMap":72},[92,2692,2693,2696,2699,2701,2703],{"class":94,"line":95},[92,2694,2695],{"class":145}," \"",[92,2697,2698],{"class":200},"scripts",[92,2700,197],{"class":145},[92,2702,1410],{"class":228},[92,2704,1162],{"class":145},[92,2706,2707,2710,2713,2715,2717,2719,2722,2724],{"class":94,"line":101},[92,2708,2709],{"class":145}," \"",[92,2711,2712],{"class":261},"build",[92,2714,197],{"class":145},[92,2716,162],{"class":145},[92,2718,1127],{"class":145},[92,2720,2721],{"class":200},"es5=true npx webpack-cli build",[92,2723,197],{"class":145},[92,2725,614],{"class":145},[92,2727,2728,2730,2733,2735,2737,2739,2742,2744],{"class":94,"line":107},[92,2729,2709],{"class":145},[92,2731,2732],{"class":261},"watch",[92,2734,197],{"class":145},[92,2736,162],{"class":145},[92,2738,1127],{"class":145},[92,2740,2741],{"class":200},"npx webpack-cli watch",[92,2743,197],{"class":145},[92,2745,614],{"class":145},[92,2747,2748,2750,2753,2755,2757,2759,2762,2765,2768,2770,2773],{"class":94,"line":113},[92,2749,2709],{"class":145},[92,2751,2752],{"class":261},"test",[92,2754,197],{"class":145},[92,2756,162],{"class":145},[92,2758,1127],{"class":145},[92,2760,2761],{"class":200},"echo ",[92,2763,2764],{"class":228},"\\\"",[92,2766,2767],{"class":200},"Error: no test specified",[92,2769,2764],{"class":228},[92,2771,2772],{"class":200}," && exit 1",[92,2774,1133],{"class":145},[92,2776,2777,2780],{"class":94,"line":119},[92,2778,2779],{"class":145}," }",[92,2781,614],{"class":228},[18,2783,2784,2785,2788,2789,2792,2793,2795],{},"今回の場合、",[55,2786,2787],{},"npm run build","した時に",[55,2790,2791],{},"es5=true","という変数が定義されます。そして",[55,2794,504],{},"のrulesをこんな風に変更してみます。",[64,2797,2799],{"className":508,"code":2798,"filename":2361,"language":510,"meta":72,"style":72},"\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",[55,2800,2801,2805,2810,2822,2827,2860,2875,2884,2895,2899,2913,2929,2933,2944,2949,2953,2957,2989,2998,3010,3014,3027,3032,3036,3040,3045,3065,3077,3081,3103,3121,3129,3144,3153,3170,3175,3179,3183,3188,3192,3196,3204,3208,3223,3227,3242,3246,3254,3263,3267,3271,3276],{"__ignoreMap":72},[92,2802,2803],{"class":94,"line":95},[92,2804,2368],{"class":443},[92,2806,2807],{"class":94,"line":101},[92,2808,2809],{"class":443},"\u002F\u002F rulesを外で定義しておく。\n",[92,2811,2812,2815,2818,2820],{"class":94,"line":107},[92,2813,2814],{"class":261},"let",[92,2816,2817],{"class":228}," rules ",[92,2819,265],{"class":145},[92,2821,657],{"class":228},[92,2823,2824],{"class":94,"line":113},[92,2825,2826],{"class":145}," {\n",[92,2828,2829,2832,2834,2836,2838,2840,2842,2844,2846,2848,2850,2852,2854,2856,2858],{"class":94,"line":119},[92,2830,2831],{"class":237}," test",[92,2833,162],{"class":145},[92,2835,672],{"class":145},[92,2837,675],{"class":228},[92,2839,194],{"class":145},[92,2841,680],{"class":200},[92,2843,683],{"class":145},[92,2845,686],{"class":200},[92,2847,683],{"class":145},[92,2849,691],{"class":200},[92,2851,537],{"class":145},[92,2853,696],{"class":200},[92,2855,700],{"class":699},[92,2857,598],{"class":145},[92,2859,614],{"class":145},[92,2861,2862,2865,2867,2869,2871,2873],{"class":94,"line":284},[92,2863,2864],{"class":237}," exclude",[92,2866,162],{"class":145},[92,2868,672],{"class":145},[92,2870,716],{"class":200},[92,2872,598],{"class":145},[92,2874,614],{"class":145},[92,2876,2877,2880,2882],{"class":94,"line":294},[92,2878,2879],{"class":237}," use",[92,2881,162],{"class":145},[92,2883,657],{"class":228},[92,2885,2886,2889,2891,2893],{"class":94,"line":334},[92,2887,2888],{"class":228}," MiniCssExtractPlugin",[92,2890,146],{"class":145},[92,2892,740],{"class":228},[92,2894,614],{"class":145},[92,2896,2897],{"class":94,"line":366},[92,2898,662],{"class":145},[92,2900,2901,2903,2905,2907,2909,2911],{"class":94,"line":392},[92,2902,2456],{"class":237},[92,2904,162],{"class":145},[92,2906,759],{"class":145},[92,2908,762],{"class":200},[92,2910,268],{"class":145},[92,2912,614],{"class":145},[92,2914,2915,2917,2919,2921,2923,2925,2927],{"class":94,"line":415},[92,2916,2471],{"class":237},[92,2918,162],{"class":145},[92,2920,777],{"class":145},[92,2922,191],{"class":237},[92,2924,162],{"class":145},[92,2926,785],{"class":784},[92,2928,209],{"class":145},[92,2930,2931],{"class":94,"line":425},[92,2932,822],{"class":145},[92,2934,2935,2938,2940,2942],{"class":94,"line":435},[92,2936,2937],{"class":145}," '",[92,2939,806],{"class":200},[92,2941,268],{"class":145},[92,2943,614],{"class":145},[92,2945,2946],{"class":94,"line":440},[92,2947,2948],{"class":228}," ]\n",[92,2950,2951],{"class":94,"line":732},[92,2952,995],{"class":145},[92,2954,2955],{"class":94,"line":745},[92,2956,2826],{"class":145},[92,2958,2959,2961,2963,2965,2967,2969,2971,2973,2975,2977,2979,2981,2983,2985,2987],{"class":94,"line":751},[92,2960,2831],{"class":237},[92,2962,162],{"class":145},[92,2964,672],{"class":145},[92,2966,675],{"class":228},[92,2968,194],{"class":145},[92,2970,847],{"class":200},[92,2972,683],{"class":145},[92,2974,852],{"class":200},[92,2976,683],{"class":145},[92,2978,857],{"class":200},[92,2980,537],{"class":145},[92,2982,700],{"class":699},[92,2984,598],{"class":145},[92,2986,866],{"class":165},[92,2988,614],{"class":145},[92,2990,2991,2994,2996],{"class":94,"line":769},[92,2992,2993],{"class":237}," generator",[92,2995,162],{"class":145},[92,2997,153],{"class":145},[92,2999,3000,3002,3004,3006,3008],{"class":94,"line":794},[92,3001,1168],{"class":237},[92,3003,162],{"class":145},[92,3005,759],{"class":145},[92,3007,1895],{"class":200},[92,3009,938],{"class":145},[92,3011,3012],{"class":94,"line":800},[92,3013,1319],{"class":145},[92,3015,3016,3019,3021,3023,3025],{"class":94,"line":813},[92,3017,3018],{"class":237}," type",[92,3020,162],{"class":145},[92,3022,759],{"class":145},[92,3024,1914],{"class":200},[92,3026,938],{"class":145},[92,3028,3029],{"class":94,"line":819},[92,3030,3031],{"class":145}," }\n",[92,3033,3034],{"class":94,"line":825},[92,3035,2495],{"class":228},[92,3037,3038],{"class":94,"line":834},[92,3039,281],{"emptyLinePlaceholder":280},[92,3041,3042],{"class":94,"line":871},[92,3043,3044],{"class":443},"\u002F\u002F es5がtrueならばバベルを適用\n",[92,3046,3047,3050,3053,3055,3058,3060,3063],{"class":94,"line":880},[92,3048,3049],{"class":699},"if",[92,3051,3052],{"class":228},"(process",[92,3054,146],{"class":145},[92,3056,3057],{"class":228},"env",[92,3059,146],{"class":145},[92,3061,3062],{"class":228},"es5)",[92,3064,1162],{"class":145},[92,3066,3067,3069,3071,3074],{"class":94,"line":886},[92,3068,2382],{"class":228},[92,3070,146],{"class":145},[92,3072,3073],{"class":190},"push",[92,3075,3076],{"class":237},"(\n",[92,3078,3079],{"class":94,"line":902},[92,3080,1262],{"class":145},[92,3082,3083,3085,3087,3089,3091,3093,3095,3097,3099,3101],{"class":94,"line":912},[92,3084,2400],{"class":237},[92,3086,162],{"class":145},[92,3088,672],{"class":145},[92,3090,675],{"class":228},[92,3092,2409],{"class":200},[92,3094,2412],{"class":145},[92,3096,601],{"class":200},[92,3098,700],{"class":699},[92,3100,598],{"class":145},[92,3102,614],{"class":145},[92,3104,3105,3107,3109,3111,3113,3115,3117,3119],{"class":94,"line":925},[92,3106,2425],{"class":237},[92,3108,162],{"class":145},[92,3110,2430],{"class":145},[92,3112,716],{"class":200},[92,3114,683],{"class":145},[92,3116,2437],{"class":200},[92,3118,2440],{"class":145},[92,3120,614],{"class":145},[92,3122,3123,3125,3127],{"class":94,"line":941},[92,3124,2447],{"class":237},[92,3126,162],{"class":145},[92,3128,153],{"class":145},[92,3130,3131,3134,3136,3138,3140,3142],{"class":94,"line":947},[92,3132,3133],{"class":237}," loader",[92,3135,162],{"class":145},[92,3137,759],{"class":145},[92,3139,2117],{"class":200},[92,3141,268],{"class":145},[92,3143,614],{"class":145},[92,3145,3146,3149,3151],{"class":94,"line":953},[92,3147,3148],{"class":237}," options",[92,3150,162],{"class":145},[92,3152,153],{"class":145},[92,3154,3155,3158,3160,3162,3164,3166,3168],{"class":94,"line":961},[92,3156,3157],{"class":237}," presets",[92,3159,162],{"class":145},[92,3161,2485],{"class":237},[92,3163,268],{"class":145},[92,3165,2490],{"class":200},[92,3167,268],{"class":145},[92,3169,2495],{"class":237},[92,3171,3172],{"class":94,"line":979},[92,3173,3174],{"class":145}," }\n",[92,3176,3177],{"class":94,"line":984},[92,3178,2505],{"class":145},[92,3180,3181],{"class":94,"line":992},[92,3182,1059],{"class":145},[92,3184,3185],{"class":94,"line":998},[92,3186,3187],{"class":237}," )\n",[92,3189,3190],{"class":94,"line":1010},[92,3191,122],{"class":145},[92,3193,3194],{"class":94,"line":1020},[92,3195,281],{"emptyLinePlaceholder":280},[92,3197,3198,3200,3202],{"class":94,"line":1056},[92,3199,572],{"class":145},[92,3201,575],{"class":145},[92,3203,153],{"class":145},[92,3205,3206],{"class":94,"line":1062},[92,3207,582],{"class":443},[92,3209,3210,3212,3214,3216,3219,3221],{"class":94,"line":1067},[92,3211,587],{"class":237},[92,3213,162],{"class":145},[92,3215,759],{"class":145},[92,3217,3218],{"class":200},".\u002Fsrc\u002Fjs\u002Fmain.js",[92,3220,268],{"class":145},[92,3222,614],{"class":145},[92,3224,3225],{"class":94,"line":1073},[92,3226,619],{"class":228},[92,3228,3229,3232,3234,3236,3238,3240],{"class":94,"line":1083},[92,3230,3231],{"class":237}," mode",[92,3233,162],{"class":145},[92,3235,197],{"class":145},[92,3237,629],{"class":200},[92,3239,197],{"class":145},[92,3241,614],{"class":145},[92,3243,3244],{"class":94,"line":1089},[92,3245,638],{"class":228},[92,3247,3248,3250,3252],{"class":94,"line":1113},[92,3249,643],{"class":237},[92,3251,162],{"class":145},[92,3253,153],{"class":145},[92,3255,3256,3258,3260],{"class":94,"line":1119},[92,3257,652],{"class":237},[92,3259,162],{"class":145},[92,3261,3262],{"class":228}," rules\n",[92,3264,3265],{"class":94,"line":1136},[92,3266,995],{"class":145},[92,3268,3269],{"class":94,"line":1141},[92,3270,281],{"emptyLinePlaceholder":280},[92,3272,3273],{"class":94,"line":1151},[92,3274,3275],{"class":443}," \u002F\u002F ...\n",[92,3277,3278],{"class":94,"line":1165},[92,3279,122],{"class":145},[18,3281,3282,3284,3285,3287,3288,3291,3292,3294,3295,3297,3298,3300,3301,3303],{},[55,3283,2085],{},"を",[55,3286,572],{},"の外に出しておいて、",[55,3289,3290],{},"process.env.es5","の値によって",[55,3293,2085],{},"を変更できる様にします。これで",[55,3296,2085],{},"の分岐ができました。",[55,3299,2712],{},"の時だけBabelが使用され、",[55,3302,2732],{},"の時はBabelが無しになります。この辺はプロジェクトごとに好きに設定してみてください。",[44,3305,39],{"id":39},[18,3307,3308],{},"最後に複数のバンドルファイルを出力する方法を解説します。今は参照されているアセットファイルを全てbundle.js、bundle.cssにしています。しかしプロジェクトによっては",[28,3310,3311,3314],{},[31,3312,3313],{},"一般ユーザーが閲覧するページのjs\u002Fcss",[31,3315,3316],{},"管理画面など特定のユーザーのみが使用するページのjs\u002Fcss",[18,3318,3319,3320,3323],{},"など複数パターンのファイルを出力したい時があります。例えば私はよく管理画面のUIはbootstrapとvueを使って構築してしまいます。そして一般画面はせいぜいjqueryを使用して200行にも満たないこともあります。管理画面はbootstrap合わせていろんなライブラリを使うため本番ビルドしてもかなりファイル容量を食います。一方、一般画面はそれほど大きくなりません。そんな時に全て一つの",[55,3321,3322],{},"bundle.js\u002Fcss","にまとめては一般画面に重いファイルを配ってしまいますし、場合によっては管理画面の構築コードが漏れてしまうのでよろしくありません。",[48,3325,3326],{"id":3326},"作成目標とsrcを作成",[18,3328,3329,3330,1044,3333,3336,3337,1044,3339,3342],{},"このような状況もよくあるので複数のバンドルファイルを出力できる様にしましょう。上記の様な状況として管理画面の",[55,3331,3332],{},"admin.js",[55,3334,3335],{},"admin.css","と",[55,3338,2125],{},[55,3340,3341],{},"main.css","が必要になったとしましょう。",[64,3344,3347],{"className":3345,"code":3346,"language":69},[67],".\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",[55,3348,3346],{"__ignoreMap":72},[18,3350,3351,3352,1044,3354,3357],{},"srcにエントリーとなる",[55,3353,3332],{},[55,3355,3356],{},"admin.scss","を作成します。中身は適当にadminのみで使われている記述にしてみてください。ここでは省きます。",[48,3359,3361],{"id":3360},"webpackconfigjsを設定","webpack.config.jsを設定",[18,3363,2347,3364,3366,3367,1044,3370,1044,3373,3376],{},[55,3365,504],{},"の",[55,3368,3369],{},"entry",[55,3371,3372],{},"output",[55,3374,3375],{},"plugins","を以下の様に変更します。",[64,3378,3380],{"className":508,"code":3379,"filename":504,"language":510,"meta":72,"style":72},"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",[55,3381,3382,3390,3396,3411,3425,3429,3433,3438,3442,3450,3454,3472,3476,3489,3493,3501,3511,3524,3530,3534],{"__ignoreMap":72},[92,3383,3384,3386,3388],{"class":94,"line":95},[92,3385,572],{"class":145},[92,3387,575],{"class":145},[92,3389,153],{"class":145},[92,3391,3392,3394],{"class":94,"line":101},[92,3393,587],{"class":237},[92,3395,1937],{"class":145},[92,3397,3398,3401,3403,3405,3407,3409],{"class":94,"line":107},[92,3399,3400],{"class":237}," main",[92,3402,162],{"class":145},[92,3404,268],{"class":145},[92,3406,3218],{"class":200},[92,3408,268],{"class":145},[92,3410,614],{"class":145},[92,3412,3413,3416,3418,3420,3423],{"class":94,"line":113},[92,3414,3415],{"class":237}," admin",[92,3417,162],{"class":145},[92,3419,268],{"class":145},[92,3421,3422],{"class":200},".\u002Fsrc\u002Fjs\u002Fadmin.js",[92,3424,938],{"class":145},[92,3426,3427],{"class":94,"line":119},[92,3428,995],{"class":145},[92,3430,3431],{"class":94,"line":284},[92,3432,281],{"emptyLinePlaceholder":280},[92,3434,3435],{"class":94,"line":294},[92,3436,3437],{"class":443}," \u002F\u002F 省略\n",[92,3439,3440],{"class":94,"line":334},[92,3441,281],{"emptyLinePlaceholder":280},[92,3443,3444,3446,3448],{"class":94,"line":366},[92,3445,1076],{"class":237},[92,3447,162],{"class":145},[92,3449,153],{"class":145},[92,3451,3452],{"class":94,"line":392},[92,3453,1086],{"class":443},[92,3455,3456,3458,3460,3462,3464,3466,3468,3470],{"class":94,"line":415},[92,3457,1092],{"class":237},[92,3459,162],{"class":145},[92,3461,1097],{"class":145},[92,3463,1100],{"class":228},[92,3465,1103],{"class":145},[92,3467,477],{"class":200},[92,3469,1108],{"class":145},[92,3471,614],{"class":145},[92,3473,3474],{"class":94,"line":425},[92,3475,1116],{"class":443},[92,3477,3478,3480,3482,3484,3487],{"class":94,"line":435},[92,3479,1122],{"class":237},[92,3481,162],{"class":145},[92,3483,1127],{"class":145},[92,3485,3486],{"class":200},"[name].js",[92,3488,1133],{"class":145},[92,3490,3491],{"class":94,"line":440},[92,3492,995],{"class":145},[92,3494,3495,3497,3499],{"class":94,"line":732},[92,3496,1144],{"class":237},[92,3498,162],{"class":145},[92,3500,657],{"class":228},[92,3502,3503,3505,3507,3509],{"class":94,"line":745},[92,3504,1154],{"class":145},[92,3506,1157],{"class":190},[92,3508,194],{"class":228},[92,3510,1162],{"class":145},[92,3512,3513,3515,3517,3519,3522],{"class":94,"line":751},[92,3514,1168],{"class":237},[92,3516,162],{"class":145},[92,3518,759],{"class":145},[92,3520,3521],{"class":200},"[name].css",[92,3523,938],{"class":145},[92,3525,3526,3528],{"class":94,"line":769},[92,3527,1183],{"class":145},[92,3529,1053],{"class":228},[92,3531,3532],{"class":94,"line":794},[92,3533,1191],{"class":228},[92,3535,3536],{"class":94,"line":800},[92,3537,1197],{"class":145},[18,3539,3540,3541,3543],{},"注目して欲しいのは",[55,3542,3369],{},"です。",[64,3545,3547],{"className":508,"code":3546,"language":510,"meta":72,"style":72},"\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",[55,3548,3549,3554,3568,3572,3577,3583,3598,3611],{"__ignoreMap":72},[92,3550,3551],{"class":94,"line":95},[92,3552,3553],{"class":443},"\u002F\u002F 変更前\n",[92,3555,3556,3558,3560,3562,3564,3566],{"class":94,"line":101},[92,3557,3369],{"class":149},[92,3559,162],{"class":145},[92,3561,759],{"class":145},[92,3563,3218],{"class":200},[92,3565,268],{"class":145},[92,3567,614],{"class":145},[92,3569,3570],{"class":94,"line":107},[92,3571,281],{"emptyLinePlaceholder":280},[92,3573,3574],{"class":94,"line":113},[92,3575,3576],{"class":443},"\u002F\u002F 変更後\n",[92,3578,3579,3581],{"class":94,"line":119},[92,3580,3369],{"class":149},[92,3582,1937],{"class":145},[92,3584,3585,3588,3590,3592,3594,3596],{"class":94,"line":284},[92,3586,3587],{"class":149}," main",[92,3589,162],{"class":145},[92,3591,268],{"class":145},[92,3593,3218],{"class":200},[92,3595,268],{"class":145},[92,3597,614],{"class":145},[92,3599,3600,3603,3605,3607,3609],{"class":94,"line":294},[92,3601,3602],{"class":149}," admin",[92,3604,162],{"class":145},[92,3606,268],{"class":145},[92,3608,3422],{"class":200},[92,3610,938],{"class":145},[92,3612,3613],{"class":94,"line":334},[92,3614,1347],{"class":145},[18,3616,3617,3618,3621,3622,3624],{},"今まではそれぞれのファイルを直接配列で指定してましたが、変更後ではオブジェクトにしています。オブジェクトのキーは",[55,3619,3620],{},"[name]","として利用できます。例えば、",[55,3623,3372],{},"でこの様に利用します。",[64,3626,3628],{"className":508,"code":3627,"language":510,"meta":72,"style":72},"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",[55,3629,3630,3638,3643,3662,3667,3680,3684,3692,3703,3715,3722],{"__ignoreMap":72},[92,3631,3632,3634,3636],{"class":94,"line":95},[92,3633,3372],{"class":149},[92,3635,162],{"class":145},[92,3637,153],{"class":145},[92,3639,3640],{"class":94,"line":101},[92,3641,3642],{"class":443}," \u002F\u002F 出力ファイルのディレクトリ名\n",[92,3644,3645,3648,3650,3652,3654,3656,3658,3660],{"class":94,"line":107},[92,3646,3647],{"class":149}," path",[92,3649,162],{"class":145},[92,3651,1097],{"class":145},[92,3653,1100],{"class":228},[92,3655,1103],{"class":145},[92,3657,477],{"class":200},[92,3659,1108],{"class":145},[92,3661,614],{"class":145},[92,3663,3664],{"class":94,"line":113},[92,3665,3666],{"class":443}," \u002F\u002F 出力ファイル名\n",[92,3668,3669,3672,3674,3676,3678],{"class":94,"line":119},[92,3670,3671],{"class":149}," filename",[92,3673,162],{"class":145},[92,3675,1127],{"class":145},[92,3677,3486],{"class":200},[92,3679,1133],{"class":145},[92,3681,3682],{"class":94,"line":284},[92,3683,1347],{"class":145},[92,3685,3686,3688,3690],{"class":94,"line":294},[92,3687,3375],{"class":149},[92,3689,162],{"class":145},[92,3691,657],{"class":228},[92,3693,3694,3697,3699,3701],{"class":94,"line":334},[92,3695,3696],{"class":145}," new",[92,3698,1157],{"class":190},[92,3700,194],{"class":228},[92,3702,1162],{"class":145},[92,3704,3705,3707,3709,3711,3713],{"class":94,"line":366},[92,3706,1122],{"class":237},[92,3708,162],{"class":145},[92,3710,759],{"class":145},[92,3712,3521],{"class":200},[92,3714,938],{"class":145},[92,3716,3717,3720],{"class":94,"line":392},[92,3718,3719],{"class":145}," }",[92,3721,1053],{"class":228},[92,3723,3724],{"class":94,"line":415},[92,3725,2495],{"class":228},[18,3727,3728,3729,1044,3731,3733,3734,464,3736,3738,3739,464,3741,464,3743,464,3745,3747],{},"変更前は全て",[55,3730,1130],{},[55,3732,1175],{},"と一定の名前でしたが、こうするとオブジェクトのキー名に応じて、",[55,3735,2125],{},[55,3737,3332],{},"など作成されます。実際にビルドをしてみると、",[55,3740,2125],{},[55,3742,3332],{},[55,3744,3341],{},[55,3746,3335],{},"が作成されました。",[44,3749,3751],{"id":3750},"以上","以上！",[18,3753,3754],{},"以上が今回の内容です。画像・Babelそして複数ファイルパターンができればもうプロジェクトで十分利用可能です。次回はhtmlをsrc配下で利用できるようにします。src配下のみで作業してコマンド打って完成したファイルがdistに出せる様にします。そしてまとめとしてこれらの構成とpugを使用したプロトタイプページの作成をしてみます。",[3756,3757,3758],"style",{},"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":72,"searchDepth":107,"depth":107,"links":3760},[3761,3771,3775,3779],{"id":46,"depth":101,"text":46,"children":3762},[3763,3764,3765,3770],{"id":50,"depth":107,"text":50},{"id":457,"depth":107,"text":457},{"id":485,"depth":107,"text":485,"children":3766},[3767,3768,3769],{"id":489,"depth":113,"text":489},{"id":1203,"depth":113,"text":1203},{"id":1374,"depth":113,"text":1374},{"id":1576,"depth":107,"text":1576},{"id":36,"depth":101,"text":36,"children":3772},[3773,3774],{"id":2334,"depth":107,"text":2335},{"id":2671,"depth":107,"text":2671},{"id":39,"depth":101,"text":39,"children":3776},[3777,3778],{"id":3326,"depth":107,"text":3326},{"id":3360,"depth":107,"text":3361},{"id":3750,"depth":101,"text":3751},[3781],"devstack","2021-06-06","Babel、画像の処理と複数バンドル","md",{},"\u002Fseries\u002Fwell-study-webpack-2",{"title":6,"description":3783},"well-study-webpack","ちゃんと理解するWebpack5。","series\u002Fwell-study-webpack-2",[601,3792],"webpack","_mix\u002Flogo-on-white-bg-768x299.png",null,"HmfkSL8RL8-q0C9UnXt7ExxZBfF5TgF206dj6ahXmq8",{"id":3797,"title":25,"body":3798,"category":6301,"createdAt":6302,"description":6303,"extension":3784,"index":95,"meta":6304,"navigation":280,"path":6305,"publish":280,"seo":6306,"series":3788,"seriesTitle":3789,"stem":6307,"tag":6308,"thumbnail":3793,"updatedAt":3794,"__hash__":6309},"series\u002Fseries\u002Fwell-study-webpack-1.md",{"type":8,"value":3799,"toc":6287},[3800,3803,3811,3814,3825,3828,3831,3842,3845,3848,3851,3862,3865,3868,3871,3879,3896,3899,3903,3906,3912,3915,3921,3936,3942,3945,4129,4132,4187,4202,4207,4320,4335,4344,4350,4419,4427,4433,4442,4446,4449,4451,4462,4465,4482,4606,4770,4879,4886,4903,4909,4912,4915,4918,4921,4927,5013,5022,5026,5029,5033,5036,5047,5050,5062,5068,5071,5415,5419,5422,5428,5431,5463,5515,5548,5556,5846,5852,5974,5980,5983,6212,6223,6236,6266,6269,6275,6278,6281,6284],[11,3801,16],{"className":3802},[14,15],[18,3804,3805,3806,3810],{},"こんにちはjunです。最近の自社開発では息を吸うようにNuxt.jsやVue.js、React.jsなどを使用しています。私もそれらのJSライブラリをよく使用するのですが、使いは初めて１年ほどにして「もっと",[3807,3808,3809],"strong",{},"JSライブラリやNode.jsの開発をしっかり理解しないと」"," という場面が増えてきました。",[18,3812,3813],{},"VueやNuxt、Reactなどは特に、ライブラリ自身のチュートリアルやインストール時のセットアップが充実しすぎてwebpack.config.jsさえ見ることもなくなりました。すぐに開発できるのが強みですが、弊害として",[28,3815,3816,3819,3822],{},[31,3817,3818],{},"実際の細かい原理や仕組みを把握できない",[31,3820,3821],{},"なにか個別にカスタマイズしようとしてもわからない",[31,3823,3824],{},"応用がわからない",[18,3826,3827],{},"といったことが生じています。フレームワークやライブラリは便利ですが、簡単でもいいので構成の概念を知っておくと細かいカスタマイズや環境構築ができるようになります。",[18,3829,3830],{},"VueやReactを使わないプロジェクトなんてざらにありますし、webpackの設定ができるだけでもフロントエンドの開発でできることが違ってきます。数回に分けてwebpackを使用した以下のパターンに分けて環境構築解説をしていきたいと思います。",[28,3832,3833,3836,3839],{},[31,3834,3835],{},"webpack基礎とSass・js",[31,3837,3838],{},"babelの導入、画像のバンドル、複数ファイル出力",[31,3840,3841],{},"htmlの取り扱いとまとめ",[18,3843,3844],{},"それではまず基礎編から初めていきます。",[44,3846,3847],{"id":3847},"webpackとは",[18,3849,3850],{},"まずwebpackとはについて解説します。webpackは静的モジュールバンドラーというもので、複数のJSファイルなどを１つのファイルにまとめることができます。1つにまとめることで",[28,3852,3853,3856,3859],{},[31,3854,3855],{},"依存性の解決（JSの読み込む順番などを気にしなくて済む）",[31,3857,3858],{},"モジュール化による保守性と安全性の向上",[31,3860,3861],{},"圧縮による軽量化",[18,3863,3864],{},"などが見込まれます。Browserifyというものなど、他にもバンドラーはありますが今は性能的、機能的にもwebpackがかなり主流になっています。",[18,3866,3867],{},"タスクランナー的な使い方も可能であり、watchして差分だけビルドして開発するなんてことも可能です。",[44,3869,3870],{"id":3870},"基礎的な概念",[18,3872,3873,3878],{},[22,3874,3877],{"href":3875,"rel":3876},"https:\u002F\u002Fwebpack.js.org\u002Fconcepts\u002F#browser-compatibility",[1369],"公式ドキュメント","にもある通り、構築において以下の概念が重要となります。",[28,3880,3881,3884,3887,3890,3893],{},[31,3882,3883],{},"Entry（バンドルの起点となるファイル）",[31,3885,3886],{},"Output（バンドルファイルの吐き出し先）",[31,3888,3889],{},"Loaders（JS以外のファイルを扱えるようにする）",[31,3891,3892],{},"Plugins（最適化したり、さらなる機能を追加する）",[31,3894,3895],{},"Mode（開発か本番か）",[18,3897,3898],{},"今のところ特にパッとしなくてもいいので、上記にあげた５パターンを再現するためにはこの概念が必要であること、そしてその通りに設定していることを頭に入れておいてください。",[44,3900,3902],{"id":3901},"まずは複数のjsファイルやライブラリをバンドルしてみよう","まずは複数のJSファイルやライブラリをバンドルしてみよう",[18,3904,3905],{},"まずはSassとかは忘れて、複数のJSファイルとモジュールの連携をやってみましょう。新しくディレクトリを作成してnpm initします。",[64,3907,3910],{"className":3908,"code":3909,"language":69},[67],"npm init\nnpm install -D webpack webpack-cli\n",[55,3911,3909],{"__ignoreMap":72},[18,3913,3914],{},"webpackは開発時しか使わないので -DをつけてdevDependenciesに入れます。インストール後にはnode_moduelsが作成されます。そして以下のディレクトリとファイルを作成します。",[64,3916,3919],{"className":3917,"code":3918,"language":69},[67],"├── 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",[55,3920,3918],{"__ignoreMap":72},[18,3922,3923,3924,3336,3926,3929,3930,3932,3933,3935],{},"開発しているときは",[55,3925,2125],{},[55,3927,3928],{},"functions.js","に記述していきます。",[55,3931,3928],{},"には共通の関数的な物を書き、モジュールとしてはおなじみの",[55,3934,2141],{},"をインストールしておきます。",[64,3937,3940],{"className":3938,"code":3939,"language":69},[67],"npm install jquery --save\n",[55,3941,3939],{"__ignoreMap":72},[18,3943,3944],{},"index.htmlを適当に以下のようにしておきます。",[64,3946,3949],{"className":218,"code":3947,"filename":3948,"language":221,"meta":72,"style":72},"\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",[55,3950,3951,3964,3973,3982,4003,4022,4030,4034,4042,4050,4068,4072,4080,4088,4096,4121],{"__ignoreMap":72},[92,3952,3953,3956,3959,3962],{"class":94,"line":95},[92,3954,3955],{"class":145},"\u003C!",[92,3957,3958],{"class":237},"DOCTYPE",[92,3960,3961],{"class":261}," html",[92,3963,241],{"class":145},[92,3965,3966,3969,3971],{"class":94,"line":101},[92,3967,3968],{"class":145},"\u003C",[92,3970,221],{"class":237},[92,3972,241],{"class":145},[92,3974,3975,3977,3980],{"class":94,"line":107},[92,3976,234],{"class":145},[92,3978,3979],{"class":237},"head",[92,3981,241],{"class":145},[92,3983,3984,3986,3989,3992,3994,3996,3999,4001],{"class":94,"line":113},[92,3985,246],{"class":145},[92,3987,3988],{"class":237},"meta",[92,3990,3991],{"class":261}," charset",[92,3993,265],{"class":145},[92,3995,197],{"class":145},[92,3997,3998],{"class":200},"utf-8",[92,4000,197],{"class":145},[92,4002,241],{"class":145},[92,4004,4005,4007,4010,4013,4016,4018,4020],{"class":94,"line":119},[92,4006,246],{"class":145},[92,4008,4009],{"class":237},"title",[92,4011,4012],{"class":145},">",[92,4014,4015],{"class":228},"webpackの練習",[92,4017,359],{"class":145},[92,4019,4009],{"class":237},[92,4021,241],{"class":145},[92,4023,4024,4026,4028],{"class":94,"line":284},[92,4025,428],{"class":145},[92,4027,3979],{"class":237},[92,4029,241],{"class":145},[92,4031,4032],{"class":94,"line":294},[92,4033,281],{"emptyLinePlaceholder":280},[92,4035,4036,4038,4040],{"class":94,"line":334},[92,4037,234],{"class":145},[92,4039,238],{"class":237},[92,4041,241],{"class":145},[92,4043,4044,4046,4048],{"class":94,"line":366},[92,4045,246],{"class":145},[92,4047,249],{"class":237},[92,4049,241],{"class":145},[92,4051,4052,4054,4056,4058,4060,4062,4064,4066],{"class":94,"line":392},[92,4053,256],{"class":145},[92,4055,11],{"class":237},[92,4057,262],{"class":261},[92,4059,265],{"class":145},[92,4061,268],{"class":145},[92,4063,271],{"class":200},[92,4065,268],{"class":145},[92,4067,241],{"class":145},[92,4069,4070],{"class":94,"line":415},[92,4071,281],{"emptyLinePlaceholder":280},[92,4073,4074,4076,4078],{"class":94,"line":425},[92,4075,287],{"class":145},[92,4077,11],{"class":237},[92,4079,241],{"class":145},[92,4081,4082,4084,4086],{"class":94,"line":435},[92,4083,418],{"class":145},[92,4085,249],{"class":237},[92,4087,241],{"class":145},[92,4089,4090,4092,4094],{"class":94,"line":440},[92,4091,428],{"class":145},[92,4093,238],{"class":237},[92,4095,241],{"class":145},[92,4097,4098,4100,4103,4106,4108,4110,4113,4115,4117,4119],{"class":94,"line":732},[92,4099,234],{"class":145},[92,4101,4102],{"class":237},"script",[92,4104,4105],{"class":261}," src",[92,4107,265],{"class":145},[92,4109,268],{"class":145},[92,4111,4112],{"class":200},".\u002Fbundle.js",[92,4114,268],{"class":145},[92,4116,385],{"class":145},[92,4118,4102],{"class":237},[92,4120,241],{"class":145},[92,4122,4123,4125,4127],{"class":94,"line":745},[92,4124,359],{"class":145},[92,4126,221],{"class":237},[92,4128,241],{"class":145},[18,4130,4131],{},"それでmain.jsは適当にこうしておきましょう。",[64,4133,4136],{"className":508,"code":4134,"filename":4135,"language":510,"meta":72,"style":72},"import $ from 'jquery';\n\n$('#app').text('hello world')\n","src\u002Fmain.js",[55,4137,4138,4154,4158],{"__ignoreMap":72},[92,4139,4140,4142,4144,4146,4148,4150,4152],{"class":94,"line":95},[92,4141,1526],{"class":699},[92,4143,2134],{"class":228},[92,4145,1532],{"class":699},[92,4147,759],{"class":145},[92,4149,2141],{"class":200},[92,4151,268],{"class":145},[92,4153,169],{"class":145},[92,4155,4156],{"class":94,"line":101},[92,4157,281],{"emptyLinePlaceholder":280},[92,4159,4160,4162,4164,4166,4168,4170,4172,4174,4176,4178,4180,4183,4185],{"class":94,"line":107},[92,4161,700],{"class":190},[92,4163,194],{"class":228},[92,4165,268],{"class":145},[92,4167,2237],{"class":200},[92,4169,268],{"class":145},[92,4171,537],{"class":228},[92,4173,146],{"class":145},[92,4175,69],{"class":190},[92,4177,194],{"class":228},[92,4179,268],{"class":145},[92,4181,4182],{"class":200},"hello world",[92,4184,268],{"class":145},[92,4186,1053],{"class":228},[18,4188,4189,4191,4192,4195,4196,4198,4199,4201],{},[55,4190,716],{}," からjQueryをインポートして、",[55,4193,4194],{},"index.html","を操作します。しかし今のままではバンドルされていないので、main.jsの内容は利用できません。",[55,4197,504],{},"を設定して、",[55,4200,2125],{},"をビルドしてみましょう。",[18,4203,4204,4206],{},[55,4205,504],{},"を以下のように設定してみましょう。",[64,4208,4210],{"className":508,"code":4209,"filename":504,"language":510,"meta":72,"style":72},"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",[55,4211,4212,4220,4224,4240,4244,4258,4262,4270,4275,4294,4299,4312,4316],{"__ignoreMap":72},[92,4213,4214,4216,4218],{"class":94,"line":95},[92,4215,572],{"class":145},[92,4217,575],{"class":145},[92,4219,153],{"class":145},[92,4221,4222],{"class":94,"line":101},[92,4223,582],{"class":443},[92,4225,4226,4228,4230,4233,4236,4238],{"class":94,"line":107},[92,4227,587],{"class":237},[92,4229,162],{"class":145},[92,4231,4232],{"class":145}," `",[92,4234,4235],{"class":200},".\u002Fsrc\u002Fmain.js",[92,4237,1108],{"class":145},[92,4239,614],{"class":145},[92,4241,4242],{"class":94,"line":113},[92,4243,619],{"class":228},[92,4245,4246,4248,4250,4252,4254,4256],{"class":94,"line":119},[92,4247,3231],{"class":237},[92,4249,162],{"class":145},[92,4251,197],{"class":145},[92,4253,629],{"class":200},[92,4255,197],{"class":145},[92,4257,614],{"class":145},[92,4259,4260],{"class":94,"line":284},[92,4261,1070],{"class":443},[92,4263,4264,4266,4268],{"class":94,"line":294},[92,4265,1076],{"class":237},[92,4267,162],{"class":145},[92,4269,153],{"class":145},[92,4271,4272],{"class":94,"line":334},[92,4273,4274],{"class":443}," \u002F\u002F 出力ファイルのディレクトリ名\n",[92,4276,4277,4280,4282,4284,4286,4288,4290,4292],{"class":94,"line":366},[92,4278,4279],{"class":237}," path",[92,4281,162],{"class":145},[92,4283,1097],{"class":145},[92,4285,1100],{"class":228},[92,4287,1103],{"class":145},[92,4289,477],{"class":200},[92,4291,1108],{"class":145},[92,4293,614],{"class":145},[92,4295,4296],{"class":94,"line":392},[92,4297,4298],{"class":443}," \u002F\u002F 出力ファイル名\n",[92,4300,4301,4304,4306,4308,4310],{"class":94,"line":415},[92,4302,4303],{"class":237}," filename",[92,4305,162],{"class":145},[92,4307,1127],{"class":145},[92,4309,1130],{"class":200},[92,4311,1133],{"class":145},[92,4313,4314],{"class":94,"line":425},[92,4315,3031],{"class":145},[92,4317,4318],{"class":94,"line":435},[92,4319,1197],{"class":145},[18,4321,4322,4323,4325,4326,4328,4329,58,4332,4334],{},"ここで先ほどの５つの概念を思い出してください。Entry、Output、Modeの設定が書かれています。パスは",[55,4324,504],{},"から見たパスになります。エントリーはsrc配下の",[55,4327,2125],{},"、吐き出し先は同じ階層の",[55,4330,4331],{},"dist",[55,4333,1130],{},"という名前で吐き出します。",[18,4336,4337,4339,4340,4343],{},[55,4338,572],{},"は",[55,4341,4342],{},"node.js","のモジュールとして利用するために必要です。webpackはnode.jsの環境下でビルドを行うからです。",[18,4345,4346,4347,4349],{},"設定が終わったら",[55,4348,2687],{},"に以下の内容を付け足しておきます。",[64,4351,4353],{"className":2685,"code":4352,"filename":2687,"language":2688,"meta":72,"style":72},"\"scripts\": {\n \"build\": \"npx webpack-cli build\", #これ\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n},\n",[55,4354,4355,4367,4389,4413],{"__ignoreMap":72},[92,4356,4357,4359,4361,4363,4365],{"class":94,"line":95},[92,4358,197],{"class":145},[92,4360,2698],{"class":200},[92,4362,197],{"class":145},[92,4364,1410],{"class":228},[92,4366,1162],{"class":145},[92,4368,4369,4371,4373,4375,4377,4379,4382,4384,4386],{"class":94,"line":101},[92,4370,2709],{"class":145},[92,4372,2712],{"class":261},[92,4374,197],{"class":145},[92,4376,162],{"class":145},[92,4378,1127],{"class":145},[92,4380,4381],{"class":200},"npx webpack-cli build",[92,4383,197],{"class":145},[92,4385,1044],{"class":145},[92,4387,4388],{"class":228}," #これ\n",[92,4390,4391,4393,4395,4397,4399,4401,4403,4405,4407,4409,4411],{"class":94,"line":107},[92,4392,2709],{"class":145},[92,4394,2752],{"class":261},[92,4396,197],{"class":145},[92,4398,162],{"class":145},[92,4400,1127],{"class":145},[92,4402,2761],{"class":200},[92,4404,2764],{"class":228},[92,4406,2767],{"class":200},[92,4408,2764],{"class":228},[92,4410,2772],{"class":200},[92,4412,1133],{"class":145},[92,4414,4415,4417],{"class":94,"line":113},[92,4416,1103],{"class":145},[92,4418,614],{"class":228},[18,4420,4421,4423,4424,4426],{},[55,4422,2787],{},"を叩くと",[55,4425,3792],{},"のバンドルが走ります。それではやってみましょう。",[64,4428,4431],{"className":4429,"code":4430,"language":69},[67],"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",[55,4432,4430],{"__ignoreMap":72},[18,4434,4435,4436,4438,4439,4441],{},"jqueryがきちんとnode_modulesから読み込まれいます。そして",[55,4437,4331],{},"配下を見るとbundle.jsができています。",[55,4440,1130],{},"の中身をみてみますと、",[2104,4443],{":src":4444,":width":4445,":center":2108},"'_mix\u002Fsch-2021-03-27-17.29.11.png'","'500px'",[18,4447,4448],{},"わお。必要なjsファイルが一つにまとめられているので、こうなっています。main.js一行とjqueryがくっついています。それではindex.htmlをみてみると..",[2104,4450],{":src":4444,":width":4445,":center":2108},[18,4452,4453,4454,4456,4457,3336,4459,4461],{},"はい。",[55,4455,2125],{},"でhello worldを入れたのできちんと",[55,4458,2125],{},[55,4460,2141],{},"がバンドルされ、動作していることが確認されました。",[44,4463,4464],{"id":4464},"自前のファイルをバンドルしよう",[18,4466,4467,4468,3366,4470,4472,4473,4475,4476,464,4478,464,4480,505],{},"先程は",[55,4469,716],{},[55,4471,2141],{},"をインポートして利用してみました。次は",[55,4474,3928],{},"の関数群をインポートして利用できるようにしてみましょう。",[55,4477,4194],{},[55,4479,2125],{},[55,4481,3928],{},[64,4483,4485],{"className":218,"code":4484,"filename":3948,"language":221,"meta":72,"style":72},"\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",[55,4486,4487,4492,4500,4508,4530,4564,4590,4598],{"__ignoreMap":72},[92,4488,4489],{"class":94,"line":95},[92,4490,4491],{"class":443},"\u003C!-- body のみ見せます -->\n",[92,4493,4494,4496,4498],{"class":94,"line":101},[92,4495,3968],{"class":145},[92,4497,238],{"class":237},[92,4499,241],{"class":145},[92,4501,4502,4504,4506],{"class":94,"line":107},[92,4503,234],{"class":145},[92,4505,249],{"class":237},[92,4507,241],{"class":145},[92,4509,4510,4512,4514,4516,4518,4520,4522,4524,4526,4528],{"class":94,"line":113},[92,4511,246],{"class":145},[92,4513,11],{"class":237},[92,4515,262],{"class":261},[92,4517,265],{"class":145},[92,4519,268],{"class":145},[92,4521,271],{"class":200},[92,4523,268],{"class":145},[92,4525,385],{"class":145},[92,4527,11],{"class":237},[92,4529,241],{"class":145},[92,4531,4532,4534,4536,4538,4540,4542,4544,4546,4548,4550,4552,4554,4556,4558,4560,4562],{"class":94,"line":119},[92,4533,246],{"class":145},[92,4535,299],{"class":237},[92,4537,302],{"class":261},[92,4539,265],{"class":145},[92,4541,197],{"class":145},[92,4543,69],{"class":200},[92,4545,197],{"class":145},[92,4547,313],{"class":261},[92,4549,265],{"class":145},[92,4551,318],{"class":145},[92,4553,262],{"class":261},[92,4555,265],{"class":145},[92,4557,197],{"class":145},[92,4559,327],{"class":200},[92,4561,197],{"class":145},[92,4563,241],{"class":145},[92,4565,4566,4568,4570,4572,4574,4576,4578,4580,4582,4584,4586,4588],{"class":94,"line":284},[92,4567,246],{"class":145},[92,4569,339],{"class":237},[92,4571,262],{"class":261},[92,4573,265],{"class":145},[92,4575,197],{"class":145},[92,4577,348],{"class":200},[92,4579,197],{"class":145},[92,4581,353],{"class":145},[92,4583,356],{"class":228},[92,4585,359],{"class":145},[92,4587,339],{"class":237},[92,4589,241],{"class":145},[92,4591,4592,4594,4596],{"class":94,"line":294},[92,4593,428],{"class":145},[92,4595,249],{"class":237},[92,4597,241],{"class":145},[92,4599,4600,4602,4604],{"class":94,"line":334},[92,4601,359],{"class":145},[92,4603,238],{"class":237},[92,4605,241],{"class":145},[64,4607,4609],{"className":508,"code":4608,"filename":3928,"language":510,"meta":72,"style":72},"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",[55,4610,4611,4627,4631,4641,4659,4687,4739,4762,4766],{"__ignoreMap":72},[92,4612,4613,4615,4617,4619,4621,4623,4625],{"class":94,"line":95},[92,4614,1526],{"class":699},[92,4616,2134],{"class":228},[92,4618,1532],{"class":699},[92,4620,759],{"class":145},[92,4622,2141],{"class":200},[92,4624,268],{"class":145},[92,4626,169],{"class":145},[92,4628,4629],{"class":94,"line":101},[92,4630,281],{"emptyLinePlaceholder":280},[92,4632,4633,4636,4639],{"class":94,"line":107},[92,4634,4635],{"class":699},"export",[92,4637,4638],{"class":699}," default",[92,4640,153],{"class":145},[92,4642,4643,4646,4648,4652,4654,4656],{"class":94,"line":113},[92,4644,4645],{"class":237}," addNewText",[92,4647,194],{"class":145},[92,4649,4651],{"class":4650},"s7ZW3","to",[92,4653,1044],{"class":145},[92,4655,299],{"class":4650},[92,4657,4658],{"class":145},"){\n",[92,4660,4661,4664,4667,4669,4672,4674,4676,4678,4680,4683,4685],{"class":94,"line":119},[92,4662,4663],{"class":261}," let",[92,4665,4666],{"class":228}," text",[92,4668,575],{"class":145},[92,4670,4671],{"class":190}," $",[92,4673,194],{"class":237},[92,4675,299],{"class":228},[92,4677,537],{"class":237},[92,4679,146],{"class":145},[92,4681,4682],{"class":190},"val",[92,4684,2285],{"class":237},[92,4686,169],{"class":145},[92,4688,4689,4692,4694,4696,4698,4700,4703,4705,4707,4710,4712,4715,4717,4719,4721,4724,4726,4728,4730,4733,4736],{"class":94,"line":284},[92,4690,4691],{"class":190}," $",[92,4693,194],{"class":237},[92,4695,4651],{"class":228},[92,4697,537],{"class":237},[92,4699,146],{"class":145},[92,4701,4702],{"class":190},"append",[92,4704,194],{"class":237},[92,4706,268],{"class":145},[92,4708,4709],{"class":200},"\u003Cp>",[92,4711,268],{"class":145},[92,4713,4714],{"class":145},"+",[92,4716,69],{"class":228},[92,4718,4714],{"class":145},[92,4720,268],{"class":145},[92,4722,4723],{"class":200},"\u003C\u002Fp>",[92,4725,268],{"class":145},[92,4727,537],{"class":237},[92,4729,564],{"class":145},[92,4731,4732],{"class":237},"　#",[92,4734,4735],{"class":228},"XSSできちゃうので本番では使わないように",[92,4737,4738],{"class":237},"。。\n",[92,4740,4741,4743,4745,4747,4749,4751,4753,4755,4758,4760],{"class":94,"line":294},[92,4742,4691],{"class":190},[92,4744,194],{"class":237},[92,4746,299],{"class":228},[92,4748,537],{"class":237},[92,4750,146],{"class":145},[92,4752,4682],{"class":190},[92,4754,194],{"class":237},[92,4756,4757],{"class":145},"''",[92,4759,537],{"class":237},[92,4761,169],{"class":145},[92,4763,4764],{"class":94,"line":334},[92,4765,3031],{"class":145},[92,4767,4768],{"class":94,"line":366},[92,4769,122],{"class":145},[64,4771,4773],{"className":508,"code":4772,"filename":4135,"language":510,"meta":72,"style":72},"import $ from 'jquery';\nimport funcs from '.\u002Ffunctions';\n\n$('#submmit').on('click',()=>{\n return funcs.addNewText('#app','#inputs');\n})\n\n",[55,4774,4775,4791,4807,4811,4843,4873],{"__ignoreMap":72},[92,4776,4777,4779,4781,4783,4785,4787,4789],{"class":94,"line":95},[92,4778,1526],{"class":699},[92,4780,2134],{"class":228},[92,4782,1532],{"class":699},[92,4784,759],{"class":145},[92,4786,2141],{"class":200},[92,4788,268],{"class":145},[92,4790,169],{"class":145},[92,4792,4793,4795,4797,4799,4801,4803,4805],{"class":94,"line":101},[92,4794,1526],{"class":699},[92,4796,2152],{"class":228},[92,4798,1532],{"class":699},[92,4800,759],{"class":145},[92,4802,2159],{"class":200},[92,4804,268],{"class":145},[92,4806,169],{"class":145},[92,4808,4809],{"class":94,"line":107},[92,4810,281],{"emptyLinePlaceholder":280},[92,4812,4813,4815,4817,4819,4821,4823,4825,4827,4829,4831,4833,4835,4837,4839,4841],{"class":94,"line":113},[92,4814,700],{"class":190},[92,4816,194],{"class":228},[92,4818,268],{"class":145},[92,4820,2191],{"class":200},[92,4822,268],{"class":145},[92,4824,537],{"class":228},[92,4826,146],{"class":145},[92,4828,2200],{"class":190},[92,4830,194],{"class":228},[92,4832,268],{"class":145},[92,4834,2207],{"class":200},[92,4836,268],{"class":145},[92,4838,2212],{"class":145},[92,4840,2215],{"class":261},[92,4842,1162],{"class":145},[92,4844,4845,4847,4849,4851,4853,4855,4857,4859,4861,4863,4865,4867,4869,4871],{"class":94,"line":119},[92,4846,2222],{"class":699},[92,4848,2225],{"class":228},[92,4850,146],{"class":145},[92,4852,2230],{"class":190},[92,4854,194],{"class":237},[92,4856,268],{"class":145},[92,4858,2237],{"class":200},[92,4860,268],{"class":145},[92,4862,1044],{"class":145},[92,4864,268],{"class":145},[92,4866,2246],{"class":200},[92,4868,268],{"class":145},[92,4870,537],{"class":237},[92,4872,169],{"class":145},[92,4874,4875,4877],{"class":94,"line":284},[92,4876,1103],{"class":145},[92,4878,1053],{"class":228},[18,4880,4881,4882,4885],{},"functions.jsには便利関数を入れているのを想定しているので、オブジェクトに関数を入れておきます。それをexportします。",[55,4883,4884],{},"addNewText()","は指定した入力フォームの文字列を、指定したDOMにpタグとして入れてくれる神メソッドです。TODO LIST的な物を開発していると思ってください。",[18,4887,4888,4890,4891,4894,4895,4898,4899,4902],{},[55,4889,2125],{},"では",[55,4892,4893],{},"import funcs from '.\u002Ffunctions';","で読み込みます。",[55,4896,4897],{},"funcs","というのはオブジェクトなので",[55,4900,4901],{},"funcs.addNewText()","で使用できます。イベントリスナーでボタンを押したら追加できるようにしてみましょう。",[18,4904,4905,4906,4908],{},"ビルドしたら再度",[55,4907,4194],{},"をみてみます。",[2104,4910],{":src":4911,":width":2107},"'_mix\u002Fsch-2021-03-27-18.04.19-768x283.png'",[2104,4913],{":src":4914,":width":2107},"'_mix\u002Fsch-2021-03-27-18.05.16.png'",[18,4916,4917],{},"入力内容を入れて、追加するを押すとこのように文字が追加されました。webpackが各ファイルのimportの関係性を解決してくれるので、これで複数ファイルのバンドルができるようになりました。",[48,4919,4920],{"id":4920},"watchモードを追加しておく",[18,4922,4923,4924,4926],{},"jsのコードを書いてビルドしたらスクリプトにエラーが起きていたという時、毎回ビルドするのは面倒です。webpackにはwatchモードという物があり、変更を検知して差分ビルドをしてくれます。",[55,4925,2687],{},"に以下のように記述します。",[64,4928,4930],{"className":2685,"code":4929,"filename":2687,"language":2688,"meta":72,"style":72},"\"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",[55,4931,4932,4944,4962,4983,5007],{"__ignoreMap":72},[92,4933,4934,4936,4938,4940,4942],{"class":94,"line":95},[92,4935,197],{"class":145},[92,4937,2698],{"class":200},[92,4939,197],{"class":145},[92,4941,1410],{"class":228},[92,4943,1162],{"class":145},[92,4945,4946,4948,4950,4952,4954,4956,4958,4960],{"class":94,"line":101},[92,4947,2695],{"class":145},[92,4949,2712],{"class":261},[92,4951,197],{"class":145},[92,4953,162],{"class":145},[92,4955,1127],{"class":145},[92,4957,4381],{"class":200},[92,4959,197],{"class":145},[92,4961,614],{"class":145},[92,4963,4964,4966,4968,4970,4972,4974,4976,4978,4980],{"class":94,"line":107},[92,4965,2695],{"class":145},[92,4967,2732],{"class":261},[92,4969,197],{"class":145},[92,4971,162],{"class":145},[92,4973,1127],{"class":145},[92,4975,2741],{"class":200},[92,4977,197],{"class":145},[92,4979,1044],{"class":145},[92,4981,4982],{"class":228},"　\b#これ\n",[92,4984,4985,4987,4989,4991,4993,4995,4997,4999,5001,5003,5005],{"class":94,"line":113},[92,4986,2695],{"class":145},[92,4988,2752],{"class":261},[92,4990,197],{"class":145},[92,4992,162],{"class":145},[92,4994,1127],{"class":145},[92,4996,2761],{"class":200},[92,4998,2764],{"class":228},[92,5000,2767],{"class":200},[92,5002,2764],{"class":228},[92,5004,2772],{"class":200},[92,5006,1133],{"class":145},[92,5008,5009,5011],{"class":94,"line":119},[92,5010,1103],{"class":145},[92,5012,614],{"class":228},[18,5014,5015,5016,5018,5019,5021],{},"これで",[55,5017,2677],{}," を行うことで",[55,5020,2732],{},"モードでビルドが動くようになります。",[44,5023,5025],{"id":5024},"sassをコンパイルバンドルしてみる","Sassをコンパイル・バンドルしてみる",[18,5027,5028],{},"Webpackは基本的にjsファイルのバンドルを想定していますが、css・sassもバンドルできます。今回はsassの説明をします。",[48,5030,5032],{"id":5031},"必要なモジュールを追加インストール設定","必要なモジュールを追加インストール&設定",[18,5034,5035],{},"webpackがsassをバンドルしてビルドするには",[28,5037,5038,5040,5043,5045],{},[31,5039,806],{},[31,5041,5042],{},"node-sass",[31,5044,762],{},[31,5046,532],{},[18,5048,5049],{},"の４つのdevDependenciesが必要になります。",[18,5051,5052,5054,5055,5057,5058,5061],{},[3807,5053,806],{},"は重要な概念に出てきた「loader」に該当します。webpackがsassファイルをバンドルするのに必要です。",[3807,5056,5042],{},"はnode.jsでsassのコンパイルをするために必要です。sassをコンパイルして生成されたcssを扱うために",[3807,5059,5060],{},"css-loader、mini-css-extract-plugin","が必要です。そのためまずはインストールしてみましょう。",[64,5063,5066],{"className":5064,"code":5065,"language":69},[67],"npm install -D sass-loader node-sass css-loader mini-css-extract-plugin\n",[55,5067,5065],{"__ignoreMap":72},[18,5069,5070],{},"ひとまず入れられたら、webpack.config.jsを以下のように変更します。",[64,5072,5074],{"className":508,"code":5073,"filename":504,"language":510,"meta":72,"style":72},"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",[55,5075,5076,5098,5102,5110,5114,5128,5132,5146,5150,5155,5163,5171,5176,5208,5222,5230,5241,5246,5260,5277,5282,5291,5295,5300,5304,5309,5313,5321,5325,5343,5347,5359,5363,5368,5376,5387,5400,5407,5411],{"__ignoreMap":72},[92,5077,5078,5080,5082,5084,5086,5088,5090,5092,5094,5096],{"class":94,"line":95},[92,5079,517],{"class":261},[92,5081,520],{"class":228},[92,5083,265],{"class":145},[92,5085,525],{"class":190},[92,5087,194],{"class":228},[92,5089,268],{"class":145},[92,5091,532],{"class":200},[92,5093,268],{"class":145},[92,5095,537],{"class":228},[92,5097,169],{"class":145},[92,5099,5100],{"class":94,"line":101},[92,5101,281],{"emptyLinePlaceholder":280},[92,5103,5104,5106,5108],{"class":94,"line":107},[92,5105,572],{"class":145},[92,5107,575],{"class":145},[92,5109,153],{"class":145},[92,5111,5112],{"class":94,"line":113},[92,5113,582],{"class":443},[92,5115,5116,5118,5120,5122,5124,5126],{"class":94,"line":119},[92,5117,587],{"class":237},[92,5119,162],{"class":145},[92,5121,759],{"class":145},[92,5123,3218],{"class":200},[92,5125,268],{"class":145},[92,5127,614],{"class":145},[92,5129,5130],{"class":94,"line":284},[92,5131,619],{"class":228},[92,5133,5134,5136,5138,5140,5142,5144],{"class":94,"line":294},[92,5135,3231],{"class":237},[92,5137,162],{"class":145},[92,5139,197],{"class":145},[92,5141,629],{"class":200},[92,5143,197],{"class":145},[92,5145,614],{"class":145},[92,5147,5148],{"class":94,"line":334},[92,5149,638],{"class":228},[92,5151,5152],{"class":94,"line":366},[92,5153,5154],{"class":443}," \u002F\u002F ここから追加\n",[92,5156,5157,5159,5161],{"class":94,"line":392},[92,5158,643],{"class":237},[92,5160,162],{"class":145},[92,5162,153],{"class":145},[92,5164,5165,5167,5169],{"class":94,"line":415},[92,5166,652],{"class":237},[92,5168,162],{"class":145},[92,5170,657],{"class":228},[92,5172,5173],{"class":94,"line":425},[92,5174,5175],{"class":145}," {\n",[92,5177,5178,5180,5182,5184,5186,5188,5190,5192,5194,5196,5198,5200,5202,5204,5206],{"class":94,"line":435},[92,5179,2400],{"class":237},[92,5181,162],{"class":145},[92,5183,672],{"class":145},[92,5185,675],{"class":228},[92,5187,194],{"class":145},[92,5189,680],{"class":200},[92,5191,683],{"class":145},[92,5193,686],{"class":200},[92,5195,683],{"class":145},[92,5197,691],{"class":200},[92,5199,537],{"class":145},[92,5201,696],{"class":200},[92,5203,700],{"class":699},[92,5205,598],{"class":145},[92,5207,614],{"class":145},[92,5209,5210,5212,5214,5216,5218,5220],{"class":94,"line":440},[92,5211,2425],{"class":237},[92,5213,162],{"class":145},[92,5215,672],{"class":145},[92,5217,716],{"class":200},[92,5219,598],{"class":145},[92,5221,614],{"class":145},[92,5223,5224,5226,5228],{"class":94,"line":732},[92,5225,2447],{"class":237},[92,5227,162],{"class":145},[92,5229,657],{"class":228},[92,5231,5232,5235,5237,5239],{"class":94,"line":745},[92,5233,5234],{"class":228}," MiniCssExtractPlugin",[92,5236,146],{"class":145},[92,5238,740],{"class":228},[92,5240,614],{"class":145},[92,5242,5243],{"class":94,"line":751},[92,5244,5245],{"class":145}," {\n",[92,5247,5248,5250,5252,5254,5256,5258],{"class":94,"line":769},[92,5249,2456],{"class":237},[92,5251,162],{"class":145},[92,5253,759],{"class":145},[92,5255,762],{"class":200},[92,5257,268],{"class":145},[92,5259,614],{"class":145},[92,5261,5262,5264,5266,5268,5270,5272,5275],{"class":94,"line":794},[92,5263,2471],{"class":237},[92,5265,162],{"class":145},[92,5267,777],{"class":145},[92,5269,191],{"class":237},[92,5271,162],{"class":145},[92,5273,5274],{"class":784}," false",[92,5276,209],{"class":145},[92,5278,5279],{"class":94,"line":800},[92,5280,5281],{"class":145}," },\n",[92,5283,5284,5287,5289],{"class":94,"line":813},[92,5285,5286],{"class":145}," '",[92,5288,806],{"class":200},[92,5290,938],{"class":145},[92,5292,5293],{"class":94,"line":819},[92,5294,2633],{"class":228},[92,5296,5297],{"class":94,"line":825},[92,5298,5299],{"class":145}," }\n",[92,5301,5302],{"class":94,"line":834},[92,5303,2948],{"class":228},[92,5305,5306],{"class":94,"line":871},[92,5307,5308],{"class":145}," },\n",[92,5310,5311],{"class":94,"line":880},[92,5312,1070],{"class":443},[92,5314,5315,5317,5319],{"class":94,"line":886},[92,5316,1076],{"class":237},[92,5318,162],{"class":145},[92,5320,153],{"class":145},[92,5322,5323],{"class":94,"line":902},[92,5324,4274],{"class":443},[92,5326,5327,5329,5331,5333,5335,5337,5339,5341],{"class":94,"line":912},[92,5328,4279],{"class":237},[92,5330,162],{"class":145},[92,5332,1097],{"class":145},[92,5334,1100],{"class":228},[92,5336,1103],{"class":145},[92,5338,477],{"class":200},[92,5340,1108],{"class":145},[92,5342,614],{"class":145},[92,5344,5345],{"class":94,"line":925},[92,5346,4298],{"class":443},[92,5348,5349,5351,5353,5355,5357],{"class":94,"line":941},[92,5350,4303],{"class":237},[92,5352,162],{"class":145},[92,5354,1127],{"class":145},[92,5356,1130],{"class":200},[92,5358,1133],{"class":145},[92,5360,5361],{"class":94,"line":947},[92,5362,995],{"class":145},[92,5364,5365],{"class":94,"line":953},[92,5366,5367],{"class":443}," 　　\u002F\u002F ここも追加\n",[92,5369,5370,5372,5374],{"class":94,"line":961},[92,5371,1144],{"class":237},[92,5373,162],{"class":145},[92,5375,657],{"class":228},[92,5377,5378,5381,5383,5385],{"class":94,"line":979},[92,5379,5380],{"class":145}," new",[92,5382,1157],{"class":190},[92,5384,194],{"class":228},[92,5386,1162],{"class":145},[92,5388,5389,5392,5394,5396,5398],{"class":94,"line":984},[92,5390,5391],{"class":237}," filename",[92,5393,162],{"class":145},[92,5395,268],{"class":145},[92,5397,1175],{"class":200},[92,5399,938],{"class":145},[92,5401,5402,5405],{"class":94,"line":992},[92,5403,5404],{"class":145}," }",[92,5406,1053],{"class":228},[92,5408,5409],{"class":94,"line":998},[92,5410,1191],{"class":228},[92,5412,5413],{"class":94,"line":1010},[92,5414,1197],{"class":145},[48,5416,5418],{"id":5417},"アセットのディレクトリとindexhtmlの変更","アセットのディレクトリとindex.htmlの変更",[18,5420,5421],{},"srcにsassのディレクトリを作成し、そしてややこしいのでjsのフォルダも作りました。",[64,5423,5426],{"className":5424,"code":5425,"language":69},[67],".\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",[55,5427,5425],{"__ignoreMap":72},[18,5429,5430],{},"sassの３ファイルは以下のような構成になっています。",[64,5432,5437],{"className":5433,"code":5434,"filename":5435,"language":5436,"meta":72,"style":72},"language-scss shiki shiki-themes material-theme-ocean","$base_color:red;\n$box_size:30px;\n","variacle.scss","scss",[55,5438,5439,5451],{"__ignoreMap":72},[92,5440,5441,5444,5446,5449],{"class":94,"line":95},[92,5442,5443],{"class":228},"$base_color",[92,5445,162],{"class":145},[92,5447,5448],{"class":228},"red",[92,5450,169],{"class":145},[92,5452,5453,5456,5458,5461],{"class":94,"line":101},[92,5454,5455],{"class":228},"$box_size",[92,5457,162],{"class":145},[92,5459,5460],{"class":165},"30px",[92,5462,169],{"class":145},[64,5464,5466],{"className":5433,"code":5465,"filename":214,"language":5436,"meta":72,"style":72},".box{\n background-color: $base_color;\n width: 20px;\n height: 20px;\n}\n",[55,5467,5468,5476,5488,5500,5511],{"__ignoreMap":72},[92,5469,5470,5472,5474],{"class":94,"line":95},[92,5471,146],{"class":145},[92,5473,380],{"class":149},[92,5475,1162],{"class":145},[92,5477,5478,5481,5483,5486],{"class":94,"line":101},[92,5479,5480],{"class":158}," background-color",[92,5482,162],{"class":145},[92,5484,5485],{"class":228}," $base_color",[92,5487,169],{"class":145},[92,5489,5490,5493,5495,5498],{"class":94,"line":107},[92,5491,5492],{"class":158}," width",[92,5494,162],{"class":145},[92,5496,5497],{"class":165}," 20px",[92,5499,169],{"class":145},[92,5501,5502,5505,5507,5509],{"class":94,"line":113},[92,5503,5504],{"class":158}," height",[92,5506,162],{"class":145},[92,5508,5497],{"class":165},[92,5510,169],{"class":145},[92,5512,5513],{"class":94,"line":119},[92,5514,122],{"class":145},[64,5516,5519],{"className":5433,"code":5517,"filename":5518,"language":5436,"meta":72,"style":72},"@import '.\u002Fvariable.scss';\n@import '.\u002Fcomponent.scss';\n","style.scss",[55,5520,5521,5535],{"__ignoreMap":72},[92,5522,5523,5526,5528,5531,5533],{"class":94,"line":95},[92,5524,5525],{"class":699},"@import",[92,5527,759],{"class":145},[92,5529,5530],{"class":200},".\u002Fvariable.scss",[92,5532,268],{"class":145},[92,5534,169],{"class":145},[92,5536,5537,5539,5541,5544,5546],{"class":94,"line":101},[92,5538,5525],{"class":699},[92,5540,759],{"class":145},[92,5542,5543],{"class":200},".\u002Fcomponent.scss",[92,5545,268],{"class":145},[92,5547,169],{"class":145},[18,5549,5550,5552,5553,5555],{},[55,5551,4194],{},"もバンドルされた",[55,5554,1175],{},"を読み込むようにしましょう。",[64,5557,5560],{"className":218,"code":5558,"filename":5559,"language":221,"meta":72,"style":72},"\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",[55,5561,5562,5572,5580,5588,5606,5622,5627,5660,5668,5672,5680,5688,5706,5710,5718,5752,5778,5800,5808,5816,5838],{"__ignoreMap":72},[92,5563,5564,5566,5568,5570],{"class":94,"line":95},[92,5565,3955],{"class":145},[92,5567,3958],{"class":237},[92,5569,3961],{"class":261},[92,5571,241],{"class":145},[92,5573,5574,5576,5578],{"class":94,"line":101},[92,5575,3968],{"class":145},[92,5577,221],{"class":237},[92,5579,241],{"class":145},[92,5581,5582,5584,5586],{"class":94,"line":107},[92,5583,234],{"class":145},[92,5585,3979],{"class":237},[92,5587,241],{"class":145},[92,5589,5590,5592,5594,5596,5598,5600,5602,5604],{"class":94,"line":113},[92,5591,246],{"class":145},[92,5593,3988],{"class":237},[92,5595,3991],{"class":261},[92,5597,265],{"class":145},[92,5599,197],{"class":145},[92,5601,3998],{"class":200},[92,5603,197],{"class":145},[92,5605,241],{"class":145},[92,5607,5608,5610,5612,5614,5616,5618,5620],{"class":94,"line":119},[92,5609,246],{"class":145},[92,5611,4009],{"class":237},[92,5613,4012],{"class":145},[92,5615,4015],{"class":228},[92,5617,359],{"class":145},[92,5619,4009],{"class":237},[92,5621,241],{"class":145},[92,5623,5624],{"class":94,"line":284},[92,5625,5626],{"class":443},"　　　　　\u003C!-- これ -->\n",[92,5628,5629,5631,5634,5637,5639,5641,5644,5646,5649,5651,5653,5656,5658],{"class":94,"line":294},[92,5630,246],{"class":145},[92,5632,5633],{"class":237},"link",[92,5635,5636],{"class":261}," rel",[92,5638,265],{"class":145},[92,5640,197],{"class":145},[92,5642,5643],{"class":200},"stylesheet",[92,5645,197],{"class":145},[92,5647,5648],{"class":261}," href",[92,5650,265],{"class":145},[92,5652,197],{"class":145},[92,5654,5655],{"class":200},".\u002Fstyle.css",[92,5657,197],{"class":145},[92,5659,241],{"class":145},[92,5661,5662,5664,5666],{"class":94,"line":334},[92,5663,428],{"class":145},[92,5665,3979],{"class":237},[92,5667,241],{"class":145},[92,5669,5670],{"class":94,"line":366},[92,5671,281],{"emptyLinePlaceholder":280},[92,5673,5674,5676,5678],{"class":94,"line":392},[92,5675,234],{"class":145},[92,5677,238],{"class":237},[92,5679,241],{"class":145},[92,5681,5682,5684,5686],{"class":94,"line":415},[92,5683,246],{"class":145},[92,5685,249],{"class":237},[92,5687,241],{"class":145},[92,5689,5690,5692,5694,5696,5698,5700,5702,5704],{"class":94,"line":425},[92,5691,256],{"class":145},[92,5693,11],{"class":237},[92,5695,262],{"class":261},[92,5697,265],{"class":145},[92,5699,268],{"class":145},[92,5701,271],{"class":200},[92,5703,268],{"class":145},[92,5705,241],{"class":145},[92,5707,5708],{"class":94,"line":435},[92,5709,281],{"emptyLinePlaceholder":280},[92,5711,5712,5714,5716],{"class":94,"line":440},[92,5713,287],{"class":145},[92,5715,11],{"class":237},[92,5717,241],{"class":145},[92,5719,5720,5722,5724,5726,5728,5730,5732,5734,5736,5738,5740,5742,5744,5746,5748,5750],{"class":94,"line":732},[92,5721,256],{"class":145},[92,5723,299],{"class":237},[92,5725,302],{"class":261},[92,5727,265],{"class":145},[92,5729,197],{"class":145},[92,5731,69],{"class":200},[92,5733,197],{"class":145},[92,5735,313],{"class":261},[92,5737,265],{"class":145},[92,5739,318],{"class":145},[92,5741,262],{"class":261},[92,5743,265],{"class":145},[92,5745,197],{"class":145},[92,5747,327],{"class":200},[92,5749,197],{"class":145},[92,5751,241],{"class":145},[92,5753,5754,5756,5758,5760,5762,5764,5766,5768,5770,5772,5774,5776],{"class":94,"line":745},[92,5755,256],{"class":145},[92,5757,339],{"class":237},[92,5759,262],{"class":261},[92,5761,265],{"class":145},[92,5763,197],{"class":145},[92,5765,348],{"class":200},[92,5767,197],{"class":145},[92,5769,353],{"class":145},[92,5771,356],{"class":228},[92,5773,359],{"class":145},[92,5775,339],{"class":237},[92,5777,241],{"class":145},[92,5779,5780,5782,5784,5786,5788,5790,5792,5794,5796,5798],{"class":94,"line":751},[92,5781,256],{"class":145},[92,5783,11],{"class":237},[92,5785,373],{"class":261},[92,5787,265],{"class":145},[92,5789,268],{"class":145},[92,5791,380],{"class":200},[92,5793,268],{"class":145},[92,5795,385],{"class":145},[92,5797,11],{"class":237},[92,5799,241],{"class":145},[92,5801,5802,5804,5806],{"class":94,"line":769},[92,5803,418],{"class":145},[92,5805,249],{"class":237},[92,5807,241],{"class":145},[92,5809,5810,5812,5814],{"class":94,"line":794},[92,5811,428],{"class":145},[92,5813,238],{"class":237},[92,5815,241],{"class":145},[92,5817,5818,5820,5822,5824,5826,5828,5830,5832,5834,5836],{"class":94,"line":800},[92,5819,234],{"class":145},[92,5821,4102],{"class":237},[92,5823,4105],{"class":261},[92,5825,265],{"class":145},[92,5827,268],{"class":145},[92,5829,4112],{"class":200},[92,5831,268],{"class":145},[92,5833,385],{"class":145},[92,5835,4102],{"class":237},[92,5837,241],{"class":145},[92,5839,5840,5842,5844],{"class":94,"line":813},[92,5841,359],{"class":145},[92,5843,221],{"class":237},[92,5845,241],{"class":145},[18,5847,5848,5849,5851],{},"そしてエントリーファイルであった",[55,5850,3218],{},"に以下のようにscssをインポートします。",[64,5853,5856],{"className":508,"code":5854,"filename":5855,"language":510,"meta":72,"style":72},"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",[55,5857,5858,5874,5890,5902,5906,5938,5968],{"__ignoreMap":72},[92,5859,5860,5862,5864,5866,5868,5870,5872],{"class":94,"line":95},[92,5861,1526],{"class":699},[92,5863,2134],{"class":228},[92,5865,1532],{"class":699},[92,5867,759],{"class":145},[92,5869,2141],{"class":200},[92,5871,268],{"class":145},[92,5873,169],{"class":145},[92,5875,5876,5878,5880,5882,5884,5886,5888],{"class":94,"line":101},[92,5877,1526],{"class":699},[92,5879,2152],{"class":228},[92,5881,1532],{"class":699},[92,5883,759],{"class":145},[92,5885,2159],{"class":200},[92,5887,268],{"class":145},[92,5889,169],{"class":145},[92,5891,5892,5894,5896,5898,5900],{"class":94,"line":107},[92,5893,1526],{"class":699},[92,5895,759],{"class":145},[92,5897,2172],{"class":200},[92,5899,268],{"class":145},[92,5901,169],{"class":145},[92,5903,5904],{"class":94,"line":113},[92,5905,281],{"emptyLinePlaceholder":280},[92,5907,5908,5910,5912,5914,5916,5918,5920,5922,5924,5926,5928,5930,5932,5934,5936],{"class":94,"line":119},[92,5909,700],{"class":190},[92,5911,194],{"class":228},[92,5913,268],{"class":145},[92,5915,2191],{"class":200},[92,5917,268],{"class":145},[92,5919,537],{"class":228},[92,5921,146],{"class":145},[92,5923,2200],{"class":190},[92,5925,194],{"class":228},[92,5927,268],{"class":145},[92,5929,2207],{"class":200},[92,5931,268],{"class":145},[92,5933,2212],{"class":145},[92,5935,2215],{"class":261},[92,5937,1162],{"class":145},[92,5939,5940,5942,5944,5946,5948,5950,5952,5954,5956,5958,5960,5962,5964,5966],{"class":94,"line":284},[92,5941,2222],{"class":699},[92,5943,2225],{"class":228},[92,5945,146],{"class":145},[92,5947,2230],{"class":190},[92,5949,194],{"class":237},[92,5951,268],{"class":145},[92,5953,2237],{"class":200},[92,5955,268],{"class":145},[92,5957,1044],{"class":145},[92,5959,268],{"class":145},[92,5961,2246],{"class":200},[92,5963,268],{"class":145},[92,5965,537],{"class":237},[92,5967,169],{"class":145},[92,5969,5970,5972],{"class":94,"line":294},[92,5971,1103],{"class":145},[92,5973,1053],{"class":228},[18,5975,5976,5977,5979],{},"こうするとwebpackが",[55,5978,2172],{},"のインポートを捉え、適切にバンドルしてくれます。",[48,5981,5982],{"id":5982},"それぞれのモジュールの説明",[64,5984,5986],{"className":508,"code":5985,"filename":504,"language":510,"meta":72,"style":72},"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",[55,5987,5988,6010,6015,6019,6027,6035,6039,6071,6085,6093,6103,6107,6122,6139,6143,6151,6155,6159,6163,6167,6171,6179,6189,6202,6208],{"__ignoreMap":72},[92,5989,5990,5992,5994,5996,5998,6000,6002,6004,6006,6008],{"class":94,"line":95},[92,5991,517],{"class":261},[92,5993,520],{"class":228},[92,5995,265],{"class":145},[92,5997,525],{"class":190},[92,5999,194],{"class":228},[92,6001,268],{"class":145},[92,6003,532],{"class":200},[92,6005,268],{"class":145},[92,6007,537],{"class":228},[92,6009,169],{"class":145},[92,6011,6012],{"class":94,"line":101},[92,6013,6014],{"class":145},"...\n",[92,6016,6017],{"class":94,"line":107},[92,6018,6014],{"class":145},[92,6020,6021,6023,6025],{"class":94,"line":113},[92,6022,2373],{"class":149},[92,6024,162],{"class":145},[92,6026,153],{"class":145},[92,6028,6029,6031,6033],{"class":94,"line":119},[92,6030,2382],{"class":149},[92,6032,162],{"class":145},[92,6034,657],{"class":237},[92,6036,6037],{"class":94,"line":284},[92,6038,1262],{"class":145},[92,6040,6041,6043,6045,6047,6049,6051,6053,6055,6057,6059,6061,6063,6065,6067,6069],{"class":94,"line":294},[92,6042,2831],{"class":237},[92,6044,162],{"class":145},[92,6046,672],{"class":145},[92,6048,675],{"class":228},[92,6050,194],{"class":145},[92,6052,680],{"class":200},[92,6054,683],{"class":145},[92,6056,686],{"class":200},[92,6058,683],{"class":145},[92,6060,691],{"class":200},[92,6062,537],{"class":145},[92,6064,696],{"class":200},[92,6066,700],{"class":699},[92,6068,598],{"class":145},[92,6070,614],{"class":145},[92,6072,6073,6075,6077,6079,6081,6083],{"class":94,"line":334},[92,6074,2864],{"class":237},[92,6076,162],{"class":145},[92,6078,672],{"class":145},[92,6080,716],{"class":200},[92,6082,598],{"class":145},[92,6084,614],{"class":145},[92,6086,6087,6089,6091],{"class":94,"line":366},[92,6088,2879],{"class":237},[92,6090,162],{"class":145},[92,6092,657],{"class":237},[92,6094,6095,6097,6099,6101],{"class":94,"line":392},[92,6096,2888],{"class":228},[92,6098,146],{"class":145},[92,6100,740],{"class":228},[92,6102,614],{"class":145},[92,6104,6105],{"class":94,"line":415},[92,6106,662],{"class":145},[92,6108,6109,6112,6114,6116,6118,6120],{"class":94,"line":425},[92,6110,6111],{"class":237}," loader",[92,6113,162],{"class":145},[92,6115,759],{"class":145},[92,6117,762],{"class":200},[92,6119,268],{"class":145},[92,6121,614],{"class":145},[92,6123,6124,6127,6129,6131,6133,6135,6137],{"class":94,"line":435},[92,6125,6126],{"class":237}," options",[92,6128,162],{"class":145},[92,6130,777],{"class":145},[92,6132,191],{"class":237},[92,6134,162],{"class":145},[92,6136,5274],{"class":784},[92,6138,209],{"class":145},[92,6140,6141],{"class":94,"line":440},[92,6142,822],{"class":145},[92,6144,6145,6147,6149],{"class":94,"line":732},[92,6146,2937],{"class":145},[92,6148,806],{"class":200},[92,6150,938],{"class":145},[92,6152,6153],{"class":94,"line":745},[92,6154,2948],{"class":237},[92,6156,6157],{"class":94,"line":751},[92,6158,1059],{"class":145},[92,6160,6161],{"class":94,"line":769},[92,6162,1191],{"class":237},[92,6164,6165],{"class":94,"line":794},[92,6166,1347],{"class":145},[92,6168,6169],{"class":94,"line":800},[92,6170,6014],{"class":145},[92,6172,6173,6175,6177],{"class":94,"line":813},[92,6174,3375],{"class":149},[92,6176,162],{"class":145},[92,6178,657],{"class":228},[92,6180,6181,6183,6185,6187],{"class":94,"line":819},[92,6182,3696],{"class":145},[92,6184,1157],{"class":190},[92,6186,194],{"class":228},[92,6188,1162],{"class":145},[92,6190,6191,6194,6196,6198,6200],{"class":94,"line":825},[92,6192,6193],{"class":237}," 　　filename",[92,6195,162],{"class":145},[92,6197,759],{"class":145},[92,6199,1175],{"class":200},[92,6201,938],{"class":145},[92,6203,6204,6206],{"class":94,"line":834},[92,6205,3719],{"class":145},[92,6207,1053],{"class":228},[92,6209,6210],{"class":94,"line":871},[92,6211,2495],{"class":228},[18,6213,6214,6216,6217,6219,6220,6222],{},[55,6215,504],{},"では特にこの箇所が重要になります。",[55,6218,2373],{},"の中身でsassや画像などのファイルを取り扱えるようになります。",[55,6221,2085],{},"という箇所に取り扱うファイルの拡張子を正規表現で捉え、それに対するローダーの使用などを定義します。",[18,6224,6225,6228,6229,6231,6232,6235],{},[55,6226,6227],{},"MiniCssExtractPlugin","はcssをstyle.cssのような外部ファイルとして出力するために必要なプラグインです。",[55,6230,2125],{},"にて",[55,6233,6234],{},"import '~\u002Fsass\u002Fstyle.scss';","という記述があったと思います。このプラグインを使わない場合、webpackでのcssバンドルは外部ファイルでなく、HTMLに直接インライン記述をしようとします。（そうした方が処理と通信が早くなるらしい）",[18,6237,6238,6239,6241,6242,6244,6245,3366,6247,6249,6250,6252,6253,6255,6256,6259,6260,6262,6263,6265],{},"しかし外部ファイル",[55,6240,1175],{},"として今回は出力したいので、",[55,6243,6227],{},"を用いて",[55,6246,2125],{},[55,6248,6234],{},"のインポートを参考に、dist配下に",[55,6251,1175],{},"を出力します。ように外部ファイルとして出力します。",[55,6254,6227],{},"のローダーとプラグインに記述しておきます。プラグインの箇所では出力ファイル名を指定します。",[55,6257,6258],{},"filename: 'style.css'","としていますが、指定しない場合はエントリーファイルの",[55,6261,2125],{},"から",[55,6264,3341],{},"が出力されます。",[18,6267,6268],{},"以上でsassのバンドルができるようになりました。早速やってみます。",[64,6270,6273],{"className":6271,"code":6272,"language":69},[67],"npm run build\n",[55,6274,6272],{"__ignoreMap":72},[18,6276,6277],{},"するとdistにstyle.cssができました。中身をみてみるとsassで定義した依存性や変数が当てはまっています。",[44,6279,6280],{"id":6280},"基礎編終了",[18,6282,6283],{},"以上がwebpackを用いたjsファイルのバンドルとsassのコンパイルです。大切なのは5つの概念と必要なモジュールを読み込み、設定することです。次回は忌まわしきIEでjsが動くようにすること、画像の依存性解決、複数条件のバンドルを解説します。",[3756,6285,6286],{},"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":72,"searchDepth":107,"depth":107,"links":6288},[6289,6290,6291,6292,6295,6300],{"id":3847,"depth":101,"text":3847},{"id":3870,"depth":101,"text":3870},{"id":3901,"depth":101,"text":3902},{"id":4464,"depth":101,"text":4464,"children":6293},[6294],{"id":4920,"depth":107,"text":4920},{"id":5024,"depth":101,"text":5025,"children":6296},[6297,6298,6299],{"id":5031,"depth":107,"text":5032},{"id":5417,"depth":107,"text":5418},{"id":5982,"depth":107,"text":5982},{"id":6280,"depth":101,"text":6280},[3781],"2021-03-27","webpack基礎とSass・jsのバンドル",{},"\u002Fseries\u002Fwell-study-webpack-1",{"title":25,"description":6303},"series\u002Fwell-study-webpack-1",[601,3792],"tvz3F4ALarSfdIbpPp8wmTnJpLE5NRMu4vTA4PHN1Dc",{"id":6311,"title":6312,"body":6313,"category":10245,"createdAt":10246,"description":10247,"extension":3784,"index":107,"meta":10248,"navigation":280,"path":10249,"publish":280,"seo":10250,"series":3788,"seriesTitle":3789,"stem":10251,"tag":10252,"thumbnail":3793,"updatedAt":3794,"__hash__":10253},"series\u002Fseries\u002Fwell-study-webpack-3.md","ちゃんと理解するWebpack5。３：HTMLのバンドルとPUGでのページ作成",{"type":8,"value":6314,"toc":10229},[6315,6321,6324,6332,6335,6339,6352,6355,6359,6362,6368,6382,6385,6395,6401,6404,6410,6622,6625,6632,7118,7125,7156,7166,7391,7400,7411,7418,7420,7428,7486,7492,7529,7537,7689,7692,7747,7760,7764,7770,7773,7776,7779,7870,7877,7983,7986,7989,7995,8001,8022,8037,8040,8043,8049,8054,8060,8309,8312,8825,8828,8892,8903,8906,8909,8919,8948,8951,8953,8959,10226],[18,6316,20,6317,6320],{},[22,6318,6],{"href":6319},"\u002Fseries\u002Fwell-study-webpack\u002F2","の続きの記事です。前回は画像のバンドル、Bableのトランスコンパイル、そして複数バンドルを行いました。今回は残りのHTMLの取り扱い方と、テンプレートエンジンと呼ばれるPUGを用いてHTMLでページをガンガン作成していこうと思います。",[18,6322,6323],{},"シチュエーションとしては、",[28,6325,6326,6329],{},[31,6327,6328],{},"サイト制作で上がってきたデザインからHTML・CSS・JSのテンプレートファイルを作る。",[31,6330,6331],{},"モックとしてサービスのweb部分を作ってみる",[18,6333,6334],{},"といった感じです。とりあえず「デザイン通りに見た目と動きつくってちょ！」というような依頼が来たと思ってください。",[44,6336,6338],{"id":6337},"webpakcでhtmlを扱うには","webpakcでHTMLを扱うには",[18,6340,6341,6342,6345,6346,6348,6349,6351],{},"webpackには「html-loader」というhtmlファイルを扱うloaderがあります。",[22,6343,6344],{"href":24},"ちゃんと理解するWebpack5。１","では最初ということもあり、",[55,6347,4331],{},"に直接置いていましたが、ローダーを使用することでHTMLも",[55,6350,595],{},"配下に置いてバンドルできます。複数対応ももちろん可能です。",[18,6353,6354],{},"今回はまず素のHTMLを扱う方法とテンプレートエンジンという効率的にHTMLを生成できるpugを用いた2つのバンドル方法を今回はお伝えします。",[44,6356,6358],{"id":6357},"単純htmlファイルをバンドルする","単純HTMLファイルをバンドルする",[18,6360,6361],{},"前回の構成に加えて",[64,6363,6366],{"className":6364,"code":6365,"language":69},[67],".\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",[55,6367,6365],{"__ignoreMap":72},[18,6369,6370,6372,6373,3336,6375,6378,6379,6381],{},[55,6371,221],{},"というディレクトリを作成し、バンドル対象の",[55,6374,4194],{},[55,6376,6377],{},"detail.html","を作成しました。目標はこの２つのファイルが",[55,6380,4331],{},"配下に配置されることです。",[48,6383,6384],{"id":6384},"html扱いに必要なloaderとpluginを入れる",[18,6386,6387,6388,3336,6391,6394],{},"最初にHTMLファイルを扱うために必要な",[55,6389,6390],{},"html-loader",[55,6392,6393],{},"HtmlWebpackPlugin","をインストールします。",[64,6396,6399],{"className":6397,"code":6398,"language":69},[67],"npm install -D html-loader html-webpack-plugin\n",[55,6400,6398],{"__ignoreMap":72},[48,6402,6403],{"id":6403},"ruleとloaderを追加",[18,6405,6406,6407,6409],{},"そしてwebpack.config.jsにhtmlに関する。記述を追加します。まずは",[55,6408,2085],{},"にhtmlファイルのルールを追加します。",[64,6411,6413],{"className":508,"code":6412,"filename":504,"language":510,"meta":72,"style":72},"\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",[55,6414,6415,6419,6424,6434,6439,6444,6448,6470,6478,6492,6496,6500,6504,6508,6512,6525,6539,6543,6557,6561,6569,6577,6581,6585,6595,6599,6603,6607,6611],{"__ignoreMap":72},[92,6416,6417],{"class":94,"line":95},[92,6418,281],{"emptyLinePlaceholder":280},[92,6420,6421],{"class":94,"line":101},[92,6422,6423],{"class":443},"\u002F\u002F rulesの配列は後で\n",[92,6425,6426,6428,6430,6432],{"class":94,"line":107},[92,6427,2814],{"class":261},[92,6429,2817],{"class":228},[92,6431,265],{"class":145},[92,6433,657],{"class":228},[92,6435,6436],{"class":94,"line":113},[92,6437,6438],{"class":443}," \u002F\u002F ... \n",[92,6440,6441],{"class":94,"line":119},[92,6442,6443],{"class":443}," \u002F\u002F 追加↓\n",[92,6445,6446],{"class":94,"line":284},[92,6447,2826],{"class":145},[92,6449,6450,6452,6454,6456,6458,6460,6462,6464,6466,6468],{"class":94,"line":294},[92,6451,2831],{"class":237},[92,6453,162],{"class":145},[92,6455,672],{"class":145},[92,6457,675],{"class":228},[92,6459,194],{"class":145},[92,6461,221],{"class":200},[92,6463,537],{"class":145},[92,6465,700],{"class":699},[92,6467,598],{"class":145},[92,6469,614],{"class":145},[92,6471,6472,6474,6476],{"class":94,"line":334},[92,6473,2879],{"class":237},[92,6475,162],{"class":145},[92,6477,153],{"class":145},[92,6479,6480,6482,6484,6486,6488,6490],{"class":94,"line":366},[92,6481,6111],{"class":237},[92,6483,162],{"class":145},[92,6485,759],{"class":145},[92,6487,6390],{"class":200},[92,6489,268],{"class":145},[92,6491,614],{"class":145},[92,6493,6494],{"class":94,"line":392},[92,6495,1059],{"class":145},[92,6497,6498],{"class":94,"line":415},[92,6499,995],{"class":145},[92,6501,6502],{"class":94,"line":425},[92,6503,3275],{"class":443},[92,6505,6506],{"class":94,"line":435},[92,6507,2495],{"class":228},[92,6509,6510],{"class":94,"line":440},[92,6511,281],{"emptyLinePlaceholder":280},[92,6513,6514,6516,6519,6521,6523],{"class":94,"line":732},[92,6515,517],{"class":261},[92,6517,6518],{"class":228}," buildDefault ",[92,6520,265],{"class":145},[92,6522,575],{"class":145},[92,6524,153],{"class":145},[92,6526,6527,6529,6531,6533,6535,6537],{"class":94,"line":745},[92,6528,587],{"class":237},[92,6530,162],{"class":145},[92,6532,759],{"class":145},[92,6534,3218],{"class":200},[92,6536,268],{"class":145},[92,6538,614],{"class":145},[92,6540,6541],{"class":94,"line":751},[92,6542,619],{"class":228},[92,6544,6545,6547,6549,6551,6553,6555],{"class":94,"line":769},[92,6546,3231],{"class":237},[92,6548,162],{"class":145},[92,6550,197],{"class":145},[92,6552,629],{"class":200},[92,6554,197],{"class":145},[92,6556,614],{"class":145},[92,6558,6559],{"class":94,"line":794},[92,6560,638],{"class":228},[92,6562,6563,6565,6567],{"class":94,"line":800},[92,6564,643],{"class":237},[92,6566,162],{"class":145},[92,6568,153],{"class":145},[92,6570,6571,6573,6575],{"class":94,"line":813},[92,6572,652],{"class":237},[92,6574,162],{"class":145},[92,6576,3262],{"class":228},[92,6578,6579],{"class":94,"line":819},[92,6580,995],{"class":145},[92,6582,6583],{"class":94,"line":825},[92,6584,281],{"emptyLinePlaceholder":280},[92,6586,6587,6589,6591,6593],{"class":94,"line":834},[92,6588,2382],{"class":237},[92,6590,162],{"class":145},[92,6592,2085],{"class":228},[92,6594,614],{"class":145},[92,6596,6597],{"class":94,"line":871},[92,6598,3275],{"class":443},[92,6600,6601],{"class":94,"line":880},[92,6602,122],{"class":145},[92,6604,6605],{"class":94,"line":886},[92,6606,2322],{"class":443},[92,6608,6609],{"class":94,"line":902},[92,6610,281],{"emptyLinePlaceholder":280},[92,6612,6613,6615,6617,6620],{"class":94,"line":912},[92,6614,572],{"class":145},[92,6616,575],{"class":145},[92,6618,6619],{"class":228}," buildDefault",[92,6621,169],{"class":145},[48,6623,6624],{"id":6624},"html-webpack-pluginの設定",[18,6626,6627,6628,6631],{},"とりあえずこれでwebpackはhtmlファイルを扱えるようになりました。次はentryでjsファイルを指定していたように、バンドル対象のhtmlをwebpackに読み込ませるために",[55,6629,6630],{},"html-webpack-plugin","を使用します。",[64,6633,6635],{"className":508,"code":6634,"filename":504,"language":510,"meta":72,"style":72},"\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",[55,6636,6637,6642,6664,6686,6690,6695,6719,6742,6746,6756,6761,6765,6769,6781,6795,6799,6813,6817,6825,6833,6837,6841,6851,6856,6860,6864,6869,6899,6903,6927,6979,6983,6998,7009,7050,7065,7076,7086,7092,7096,7104,7108],{"__ignoreMap":72},[92,6638,6639],{"class":94,"line":95},[92,6640,6641],{"class":443},"\u002F\u002F ファイル冒頭\n",[92,6643,6644,6646,6648,6650,6652,6654,6656,6658,6660,6662],{"class":94,"line":101},[92,6645,517],{"class":261},[92,6647,520],{"class":228},[92,6649,265],{"class":145},[92,6651,525],{"class":190},[92,6653,194],{"class":228},[92,6655,268],{"class":145},[92,6657,532],{"class":200},[92,6659,268],{"class":145},[92,6661,537],{"class":228},[92,6663,169],{"class":145},[92,6665,6666,6668,6670,6672,6674,6676,6678,6680,6682,6684],{"class":94,"line":107},[92,6667,517],{"class":261},[92,6669,546],{"class":228},[92,6671,265],{"class":145},[92,6673,525],{"class":190},[92,6675,194],{"class":228},[92,6677,268],{"class":145},[92,6679,557],{"class":200},[92,6681,268],{"class":145},[92,6683,537],{"class":228},[92,6685,169],{"class":145},[92,6687,6688],{"class":94,"line":113},[92,6689,281],{"emptyLinePlaceholder":280},[92,6691,6692],{"class":94,"line":119},[92,6693,6694],{"class":443},"\u002F\u002F この２つを追加\n",[92,6696,6697,6699,6702,6704,6706,6708,6710,6713,6715,6717],{"class":94,"line":284},[92,6698,517],{"class":261},[92,6700,6701],{"class":228}," globule ",[92,6703,265],{"class":145},[92,6705,525],{"class":190},[92,6707,194],{"class":228},[92,6709,268],{"class":145},[92,6711,6712],{"class":200},"globule",[92,6714,268],{"class":145},[92,6716,537],{"class":228},[92,6718,169],{"class":145},[92,6720,6721,6723,6726,6728,6730,6732,6734,6736,6738,6740],{"class":94,"line":294},[92,6722,517],{"class":261},[92,6724,6725],{"class":228}," HtmlWebpackPlugin ",[92,6727,265],{"class":145},[92,6729,525],{"class":190},[92,6731,194],{"class":228},[92,6733,268],{"class":145},[92,6735,6630],{"class":200},[92,6737,268],{"class":145},[92,6739,537],{"class":228},[92,6741,169],{"class":145},[92,6743,6744],{"class":94,"line":334},[92,6745,281],{"emptyLinePlaceholder":280},[92,6747,6748,6750,6752,6754],{"class":94,"line":366},[92,6749,2814],{"class":261},[92,6751,2817],{"class":228},[92,6753,265],{"class":145},[92,6755,657],{"class":228},[92,6757,6758],{"class":94,"line":392},[92,6759,6760],{"class":443}," \u002F\u002F 省略... \n",[92,6762,6763],{"class":94,"line":415},[92,6764,2495],{"class":228},[92,6766,6767],{"class":94,"line":425},[92,6768,281],{"emptyLinePlaceholder":280},[92,6770,6771,6773,6775,6777,6779],{"class":94,"line":435},[92,6772,517],{"class":261},[92,6774,6518],{"class":228},[92,6776,265],{"class":145},[92,6778,575],{"class":145},[92,6780,153],{"class":145},[92,6782,6783,6785,6787,6789,6791,6793],{"class":94,"line":440},[92,6784,587],{"class":237},[92,6786,162],{"class":145},[92,6788,759],{"class":145},[92,6790,3218],{"class":200},[92,6792,268],{"class":145},[92,6794,614],{"class":145},[92,6796,6797],{"class":94,"line":732},[92,6798,619],{"class":228},[92,6800,6801,6803,6805,6807,6809,6811],{"class":94,"line":745},[92,6802,3231],{"class":237},[92,6804,162],{"class":145},[92,6806,197],{"class":145},[92,6808,629],{"class":200},[92,6810,197],{"class":145},[92,6812,614],{"class":145},[92,6814,6815],{"class":94,"line":751},[92,6816,638],{"class":228},[92,6818,6819,6821,6823],{"class":94,"line":769},[92,6820,643],{"class":237},[92,6822,162],{"class":145},[92,6824,153],{"class":145},[92,6826,6827,6829,6831],{"class":94,"line":794},[92,6828,652],{"class":237},[92,6830,162],{"class":145},[92,6832,3262],{"class":228},[92,6834,6835],{"class":94,"line":800},[92,6836,995],{"class":145},[92,6838,6839],{"class":94,"line":813},[92,6840,281],{"emptyLinePlaceholder":280},[92,6842,6843,6845,6847,6849],{"class":94,"line":819},[92,6844,2382],{"class":237},[92,6846,162],{"class":145},[92,6848,2085],{"class":228},[92,6850,614],{"class":145},[92,6852,6853],{"class":94,"line":825},[92,6854,6855],{"class":443}," \u002F\u002F 以下略...\n",[92,6857,6858],{"class":94,"line":834},[92,6859,122],{"class":145},[92,6861,6862],{"class":94,"line":871},[92,6863,281],{"emptyLinePlaceholder":280},[92,6865,6866],{"class":94,"line":880},[92,6867,6868],{"class":443},"\u002F\u002F これらを追記\n",[92,6870,6871,6873,6876,6878,6881,6883,6886,6888,6890,6893,6895,6897],{"class":94,"line":886},[92,6872,517],{"class":261},[92,6874,6875],{"class":228}," htmlFiles ",[92,6877,265],{"class":145},[92,6879,6880],{"class":228}," globule",[92,6882,146],{"class":145},[92,6884,6885],{"class":190},"find",[92,6887,194],{"class":228},[92,6889,268],{"class":145},[92,6891,6892],{"class":200},"src\u002Fhtml\u002F*.html",[92,6894,268],{"class":145},[92,6896,537],{"class":228},[92,6898,169],{"class":145},[92,6900,6901],{"class":94,"line":902},[92,6902,281],{"emptyLinePlaceholder":280},[92,6904,6905,6908,6910,6913,6915,6917,6920,6922,6925],{"class":94,"line":912},[92,6906,6907],{"class":228},"htmlFiles",[92,6909,146],{"class":145},[92,6911,6912],{"class":190},"forEach",[92,6914,194],{"class":228},[92,6916,194],{"class":145},[92,6918,6919],{"class":4650},"htmlsrc",[92,6921,537],{"class":145},[92,6923,6924],{"class":261}," =>",[92,6926,153],{"class":145},[92,6928,6929,6932,6935,6937,6940,6942,6945,6947,6949,6951,6953,6955,6957,6960,6962,6965,6968,6971,6974,6977],{"class":94,"line":925},[92,6930,6931],{"class":261}," const",[92,6933,6934],{"class":228}," htmlname",[92,6936,575],{"class":145},[92,6938,6939],{"class":228}," htmlsrc",[92,6941,146],{"class":145},[92,6943,6944],{"class":190},"split",[92,6946,194],{"class":237},[92,6948,268],{"class":145},[92,6950,598],{"class":200},[92,6952,268],{"class":145},[92,6954,537],{"class":237},[92,6956,146],{"class":145},[92,6958,6959],{"class":190},"slice",[92,6961,194],{"class":237},[92,6963,6964],{"class":145},"-",[92,6966,6967],{"class":165},"1",[92,6969,6970],{"class":237},")[",[92,6972,6973],{"class":165},"0",[92,6975,6976],{"class":237},"]",[92,6978,169],{"class":145},[92,6980,6981],{"class":94,"line":941},[92,6982,281],{"emptyLinePlaceholder":280},[92,6984,6985,6988,6990,6992,6994,6996],{"class":94,"line":947},[92,6986,6987],{"class":228}," buildDefault",[92,6989,146],{"class":145},[92,6991,3375],{"class":228},[92,6993,146],{"class":145},[92,6995,3073],{"class":190},[92,6997,3076],{"class":237},[92,6999,7000,7002,7005,7007],{"class":94,"line":953},[92,7001,5380],{"class":145},[92,7003,7004],{"class":190}," HtmlWebpackPlugin",[92,7006,194],{"class":237},[92,7008,1162],{"class":145},[92,7010,7011,7013,7015,7017,7019,7021,7023,7025,7027,7029,7031,7033,7035,7037,7039,7042,7045,7048],{"class":94,"line":961},[92,7012,1122],{"class":237},[92,7014,162],{"class":145},[92,7016,1097],{"class":145},[92,7018,557],{"class":228},[92,7020,146],{"class":145},[92,7022,1038],{"class":190},[92,7024,1041],{"class":228},[92,7026,1044],{"class":145},[92,7028,759],{"class":145},[92,7030,4331],{"class":200},[92,7032,268],{"class":145},[92,7034,537],{"class":228},[92,7036,1103],{"class":145},[92,7038,598],{"class":200},[92,7040,7041],{"class":145},"${",[92,7043,7044],{"class":228},"htmlname",[92,7046,7047],{"class":145},"}`",[92,7049,614],{"class":145},[92,7051,7052,7055,7057,7059,7061,7063],{"class":94,"line":979},[92,7053,7054],{"class":237}," inject",[92,7056,162],{"class":145},[92,7058,268],{"class":145},[92,7060,238],{"class":200},[92,7062,268],{"class":145},[92,7064,614],{"class":145},[92,7066,7067,7070,7072,7074],{"class":94,"line":984},[92,7068,7069],{"class":237}," template",[92,7071,162],{"class":145},[92,7073,6939],{"class":228},[92,7075,614],{"class":145},[92,7077,7078,7081,7083],{"class":94,"line":992},[92,7079,7080],{"class":237}," minify",[92,7082,162],{"class":145},[92,7084,7085],{"class":784}," false\n",[92,7087,7088,7090],{"class":94,"line":998},[92,7089,5404],{"class":145},[92,7091,1053],{"class":237},[92,7093,7094],{"class":94,"line":1010},[92,7095,3187],{"class":237},[92,7097,7098,7100,7102],{"class":94,"line":1020},[92,7099,1103],{"class":145},[92,7101,537],{"class":228},[92,7103,169],{"class":145},[92,7105,7106],{"class":94,"line":1056},[92,7107,281],{"emptyLinePlaceholder":280},[92,7109,7110,7112,7114,7116],{"class":94,"line":1062},[92,7111,572],{"class":145},[92,7113,575],{"class":145},[92,7115,6619],{"class":228},[92,7117,169],{"class":145},[18,7119,7120,7121,7124],{},"詳細の解説をします。まず最初に必要なプラグインとnode.jsのモジュールをインポートします。そして以下の記述は",[55,7122,7123],{},"src\u002Fhtml","配下にあるhtmlファイルを全て取得する処理です。",[64,7126,7128],{"className":508,"code":7127,"language":510,"meta":72,"style":72},"const htmlFiles = globule.find('src\u002Fhtml\u002F*.html');\n",[55,7129,7130],{"__ignoreMap":72},[92,7131,7132,7134,7136,7138,7140,7142,7144,7146,7148,7150,7152,7154],{"class":94,"line":95},[92,7133,517],{"class":261},[92,7135,6875],{"class":228},[92,7137,265],{"class":145},[92,7139,6880],{"class":228},[92,7141,146],{"class":145},[92,7143,6885],{"class":190},[92,7145,194],{"class":228},[92,7147,268],{"class":145},[92,7149,6892],{"class":200},[92,7151,268],{"class":145},[92,7153,537],{"class":228},[92,7155,169],{"class":145},[18,7157,7158,7159,7161,7162,7165],{},"配列でhtmlファイルのパスが戻ってきますので、それらを",[55,7160,6393],{},"にファイル分だけ",[55,7163,7164],{},"new","します。",[64,7167,7169],{"className":508,"code":7168,"language":510,"meta":72,"style":72},"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",[55,7170,7171,7191,7196,7238,7242,7247,7261,7271,7276,7314,7318,7323,7337,7341,7346,7356,7360,7365,7373,7379,7383],{"__ignoreMap":72},[92,7172,7173,7175,7177,7179,7181,7183,7185,7187,7189],{"class":94,"line":95},[92,7174,6907],{"class":228},[92,7176,146],{"class":145},[92,7178,6912],{"class":190},[92,7180,194],{"class":228},[92,7182,194],{"class":145},[92,7184,6919],{"class":4650},[92,7186,537],{"class":145},[92,7188,6924],{"class":261},[92,7190,153],{"class":145},[92,7192,7193],{"class":94,"line":101},[92,7194,7195],{"class":443}," \u002F\u002F ファイル名を取得 src\u002Fhtml\u002Findex.html → index.html\n",[92,7197,7198,7200,7202,7204,7206,7208,7210,7212,7214,7216,7218,7220,7222,7224,7226,7228,7230,7232,7234,7236],{"class":94,"line":107},[92,7199,6931],{"class":261},[92,7201,6934],{"class":228},[92,7203,575],{"class":145},[92,7205,6939],{"class":228},[92,7207,146],{"class":145},[92,7209,6944],{"class":190},[92,7211,194],{"class":237},[92,7213,268],{"class":145},[92,7215,598],{"class":200},[92,7217,268],{"class":145},[92,7219,537],{"class":237},[92,7221,146],{"class":145},[92,7223,6959],{"class":190},[92,7225,194],{"class":237},[92,7227,6964],{"class":145},[92,7229,6967],{"class":165},[92,7231,6970],{"class":237},[92,7233,6973],{"class":165},[92,7235,6976],{"class":237},[92,7237,169],{"class":145},[92,7239,7240],{"class":94,"line":113},[92,7241,281],{"emptyLinePlaceholder":280},[92,7243,7244],{"class":94,"line":119},[92,7245,7246],{"class":443}," \u002F\u002F webpackの設定にある、pluginsに以下のプラグインインスタンスを入れる。\n",[92,7248,7249,7251,7253,7255,7257,7259],{"class":94,"line":284},[92,7250,6987],{"class":228},[92,7252,146],{"class":145},[92,7254,3375],{"class":228},[92,7256,146],{"class":145},[92,7258,3073],{"class":190},[92,7260,3076],{"class":237},[92,7262,7263,7265,7267,7269],{"class":94,"line":294},[92,7264,5380],{"class":145},[92,7266,7004],{"class":190},[92,7268,194],{"class":237},[92,7270,1162],{"class":145},[92,7272,7273],{"class":94,"line":334},[92,7274,7275],{"class":443}," \u002F\u002F distのファイル名。今回はsrcと同じ。\n",[92,7277,7278,7280,7282,7284,7286,7288,7290,7292,7294,7296,7298,7300,7302,7304,7306,7308,7310,7312],{"class":94,"line":366},[92,7279,1122],{"class":237},[92,7281,162],{"class":145},[92,7283,1097],{"class":145},[92,7285,557],{"class":228},[92,7287,146],{"class":145},[92,7289,1038],{"class":190},[92,7291,1041],{"class":228},[92,7293,1044],{"class":145},[92,7295,759],{"class":145},[92,7297,4331],{"class":200},[92,7299,268],{"class":145},[92,7301,537],{"class":228},[92,7303,1103],{"class":145},[92,7305,598],{"class":200},[92,7307,7041],{"class":145},[92,7309,7044],{"class":228},[92,7311,7047],{"class":145},[92,7313,614],{"class":145},[92,7315,7316],{"class":94,"line":392},[92,7317,281],{"emptyLinePlaceholder":280},[92,7319,7320],{"class":94,"line":415},[92,7321,7322],{"class":443}," \u002F\u002F 自動的にバンドル対象のjs\b(main.js)とcss(style.css)を入れる。お節介ならfalseにする。\n",[92,7324,7325,7327,7329,7331,7333,7335],{"class":94,"line":425},[92,7326,7054],{"class":237},[92,7328,162],{"class":145},[92,7330,268],{"class":145},[92,7332,238],{"class":200},[92,7334,268],{"class":145},[92,7336,614],{"class":145},[92,7338,7339],{"class":94,"line":435},[92,7340,281],{"emptyLinePlaceholder":280},[92,7342,7343],{"class":94,"line":440},[92,7344,7345],{"class":443}," \u002F\u002F 対象のhtmlファイル\n",[92,7347,7348,7350,7352,7354],{"class":94,"line":732},[92,7349,7069],{"class":237},[92,7351,162],{"class":145},[92,7353,6939],{"class":228},[92,7355,614],{"class":145},[92,7357,7358],{"class":94,"line":745},[92,7359,281],{"emptyLinePlaceholder":280},[92,7361,7362],{"class":94,"line":751},[92,7363,7364],{"class":443}," \u002F\u002F 圧縮するかどうか。defaultはtrue\n",[92,7366,7367,7369,7371],{"class":94,"line":769},[92,7368,7080],{"class":237},[92,7370,162],{"class":145},[92,7372,7085],{"class":784},[92,7374,7375,7377],{"class":94,"line":794},[92,7376,5404],{"class":145},[92,7378,1053],{"class":237},[92,7380,7381],{"class":94,"line":800},[92,7382,3187],{"class":237},[92,7384,7385,7387,7389],{"class":94,"line":813},[92,7386,1103],{"class":145},[92,7388,537],{"class":228},[92,7390,169],{"class":145},[18,7392,7393,7396,7397,7399],{},[55,7394,7395],{},"new HtmlWebpackPlugin()","では対象のHTMLファイルをwebpackに読み込ませますが、１ファイルづつなのでhtmlが複数ある場合、",[55,7398,6712],{},"などを使用して複数の対象ファイルを取得してforeachで回します。",[18,7401,7402,7403,7405,7406,3336,7408,7410],{},"こうすることで",[55,7404,7123],{},"配下のhtmlがバンドルされます。適当に内容を書いてnpm run buildしてみましょう。dist配下に",[55,7407,4194],{},[55,7409,6377],{},"が出力されるはずです。",[11,7412,7414,7417],{"className":7413},[14,15],[55,7415,7416],{},"inject:'body'","がある場合、htmlにはバンドル対象のcss\u002Fjsを読み込む為のscriptやlinkを記述する必要はありません。自動的に挿入されます。\n",[48,7419,33],{"id":33},[18,7421,7422,7423,4339,7425,7427],{},"HTML編の最後に画像パスの解決を行います。",[55,7424,6390],{},[55,7426,595],{},"などロード可能な属性を見つけるとそのパスなどの解決を行おうとします。たとえば以下のようなタグある場合",[64,7429,7431],{"className":218,"code":7430,"language":221,"meta":72,"style":72},"\u003C!-- バンドル前 -->\n\u003Cimg src=\"image.png\"\u002F>\n\n\u003C!-- バンドル後 -->\n\u003Cimg src=\".\u002Fimage.png\"\u002F>\n",[55,7432,7433,7438,7458,7462,7467],{"__ignoreMap":72},[92,7434,7435],{"class":94,"line":95},[92,7436,7437],{"class":443},"\u003C!-- バンドル前 -->\n",[92,7439,7440,7442,7444,7446,7448,7450,7453,7455],{"class":94,"line":101},[92,7441,3968],{"class":145},[92,7443,77],{"class":237},[92,7445,4105],{"class":261},[92,7447,265],{"class":145},[92,7449,197],{"class":145},[92,7451,7452],{"class":200},"image.png",[92,7454,197],{"class":145},[92,7456,7457],{"class":145},"\u002F>\n",[92,7459,7460],{"class":94,"line":107},[92,7461,281],{"emptyLinePlaceholder":280},[92,7463,7464],{"class":94,"line":113},[92,7465,7466],{"class":443},"\u003C!-- バンドル後 -->\n",[92,7468,7469,7471,7473,7475,7477,7479,7482,7484],{"class":94,"line":119},[92,7470,3968],{"class":145},[92,7472,77],{"class":237},[92,7474,4105],{"class":261},[92,7476,265],{"class":145},[92,7478,197],{"class":145},[92,7480,7481],{"class":200},".\u002Fimage.png",[92,7483,197],{"class":145},[92,7485,7457],{"class":145},[18,7487,7488,7489,7491],{},"このように自動的にパスの調整を行います。相対パスだと階層が深い時大変ですので、scssではエイリアスを用いて",[55,7490,595],{},"を指定できましたが、htmlは残念ながらできません。",[64,7493,7495],{"className":218,"code":7494,"language":221,"meta":72,"style":72},"\u003C!-- バンドル前 -->\n\u003Cimg src=\"~\u002Fimg\u002Fimage.png\"\u002F>\n\n\u003C!-- Module not found -->\n",[55,7496,7497,7501,7520,7524],{"__ignoreMap":72},[92,7498,7499],{"class":94,"line":95},[92,7500,7437],{"class":443},[92,7502,7503,7505,7507,7509,7511,7513,7516,7518],{"class":94,"line":101},[92,7504,3968],{"class":145},[92,7506,77],{"class":237},[92,7508,4105],{"class":261},[92,7510,265],{"class":145},[92,7512,197],{"class":145},[92,7514,7515],{"class":200},"~\u002Fimg\u002Fimage.png",[92,7517,197],{"class":145},[92,7519,7457],{"class":145},[92,7521,7522],{"class":94,"line":107},[92,7523,281],{"emptyLinePlaceholder":280},[92,7525,7526],{"class":94,"line":113},[92,7527,7528],{"class":443},"\u003C!-- Module not found -->\n",[18,7530,7531,7532,3366,7534,7536],{},"しかし対処法はあります。",[55,7533,504],{},[55,7535,1038],{},"にrootsプロパティーを記述します。",[64,7538,7540],{"className":508,"code":7539,"filename":504,"language":510,"meta":72,"style":72},"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",[55,7541,7542,7552,7558,7605,7613,7643,7647,7652,7681,7685],{"__ignoreMap":72},[92,7543,7544,7546,7548,7550],{"class":94,"line":95},[92,7545,517],{"class":261},[92,7547,6518],{"class":228},[92,7549,265],{"class":145},[92,7551,153],{"class":145},[92,7553,7554,7556],{"class":94,"line":101},[92,7555,1001],{"class":237},[92,7557,1937],{"class":145},[92,7559,7560,7563,7565,7567,7569,7572,7574,7576,7578,7581,7583,7585,7587,7590,7592,7594,7596,7599,7601,7603],{"class":94,"line":107},[92,7561,7562],{"class":237}," extensions",[92,7564,162],{"class":145},[92,7566,2485],{"class":228},[92,7568,268],{"class":145},[92,7570,7571],{"class":200},".js",[92,7573,268],{"class":145},[92,7575,1044],{"class":145},[92,7577,759],{"class":145},[92,7579,7580],{"class":200},".json",[92,7582,268],{"class":145},[92,7584,1044],{"class":145},[92,7586,759],{"class":145},[92,7588,7589],{"class":200},".scss",[92,7591,268],{"class":145},[92,7593,1044],{"class":145},[92,7595,759],{"class":145},[92,7597,7598],{"class":200},".css",[92,7600,268],{"class":145},[92,7602,6976],{"class":228},[92,7604,614],{"class":145},[92,7606,7607,7609,7611],{"class":94,"line":113},[92,7608,1013],{"class":237},[92,7610,162],{"class":145},[92,7612,153],{"class":145},[92,7614,7615,7617,7619,7621,7623,7625,7627,7629,7631,7633,7635,7637,7639,7641],{"class":94,"line":119},[92,7616,2937],{"class":145},[92,7618,1026],{"class":237},[92,7620,268],{"class":145},[92,7622,162],{"class":145},[92,7624,1033],{"class":228},[92,7626,146],{"class":145},[92,7628,1038],{"class":190},[92,7630,1041],{"class":228},[92,7632,1044],{"class":145},[92,7634,759],{"class":145},[92,7636,595],{"class":200},[92,7638,268],{"class":145},[92,7640,537],{"class":228},[92,7642,614],{"class":145},[92,7644,7645],{"class":94,"line":284},[92,7646,1319],{"class":145},[92,7648,7649],{"class":94,"line":294},[92,7650,7651],{"class":443}," \u002F\u002F ↓追加！\n",[92,7653,7654,7657,7659,7662,7664,7666,7668,7670,7672,7674,7676,7679],{"class":94,"line":334},[92,7655,7656],{"class":237}," roots",[92,7658,162],{"class":145},[92,7660,7661],{"class":228}," [path",[92,7663,146],{"class":145},[92,7665,1038],{"class":190},[92,7667,1041],{"class":228},[92,7669,1044],{"class":145},[92,7671,1127],{"class":145},[92,7673,595],{"class":200},[92,7675,197],{"class":145},[92,7677,7678],{"class":228},")]",[92,7680,614],{"class":145},[92,7682,7683],{"class":94,"line":366},[92,7684,995],{"class":145},[92,7686,7687],{"class":94,"line":392},[92,7688,122],{"class":145},[18,7690,7691],{},"このrootsプロパティを追加した後、パスは以下のようにします。",[64,7693,7695],{"className":218,"code":7694,"language":221,"meta":72,"style":72},"\u003C!-- バンドル前 -->\n\u003Cimg src=\"\u002Fimg\u002Fimage.png\"\u002F>\n\n\u003C!-- バンドル後 -->\n\u003Cimg src=\"img\u002Fimage.png\"\u002F>\n",[55,7696,7697,7701,7720,7724,7728],{"__ignoreMap":72},[92,7698,7699],{"class":94,"line":95},[92,7700,7437],{"class":443},[92,7702,7703,7705,7707,7709,7711,7713,7716,7718],{"class":94,"line":101},[92,7704,3968],{"class":145},[92,7706,77],{"class":237},[92,7708,4105],{"class":261},[92,7710,265],{"class":145},[92,7712,197],{"class":145},[92,7714,7715],{"class":200},"\u002Fimg\u002Fimage.png",[92,7717,197],{"class":145},[92,7719,7457],{"class":145},[92,7721,7722],{"class":94,"line":107},[92,7723,281],{"emptyLinePlaceholder":280},[92,7725,7726],{"class":94,"line":113},[92,7727,7466],{"class":443},[92,7729,7730,7732,7734,7736,7738,7740,7743,7745],{"class":94,"line":119},[92,7731,3968],{"class":145},[92,7733,77],{"class":237},[92,7735,4105],{"class":261},[92,7737,265],{"class":145},[92,7739,197],{"class":145},[92,7741,7742],{"class":200},"img\u002Fimage.png",[92,7744,197],{"class":145},[92,7746,7457],{"class":145},[18,7748,7749,7752,7753,7755,7756,7759],{},[55,7750,7751],{},"roots: [path.resolve(__dirname, \"src\")],","によって",[55,7754,7715],{},"のパスを",[55,7757,7758],{},"src\u002F","を基準に探してくれるようになります。HTMLの場合はこのようにして画像を指定します。",[44,7761,7763],{"id":7762},"pugでhtmlファイルをバンドルする","pugでHTMLファイルをバンドルする",[18,7765,7766,7767,7769],{},"ひとまず以上の設定でhtmlファイルが使用できるようになりました。",[55,7768,7123],{},"配下で必要なページ分だけのHTMLを作成して、スタイルはscss、jsも一つにまとめられてスマートに見えます。しかし、繰り返しの記述をしたりテンプレートを作成してより効率的に描きたい時もあると思います。そんな時、テンプレートエンジンと呼ばれるものを使用することでより効率よくマークアップができるようになります。今回はpugを用います。（他の候補としてEJSなどがある）",[48,7771,7772],{"id":7772},"pugの使い方",[18,7774,7775],{},"今回は詳しい説明は省略しますが、概要的に伝えます。pugは以下のような記述でhtmlのマークアップが可能です。",[18,7777,7778],{},"レイアウトテンプレートファイル",[64,7780,7785],{"className":7781,"code":7782,"filename":7783,"language":7784,"meta":72,"style":72},"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",[55,7786,7787,7792,7797,7802,7807,7812,7817,7822,7827,7831,7836,7841,7845,7850,7855,7860,7865],{"__ignoreMap":72},[92,7788,7789],{"class":94,"line":95},[92,7790,7791],{},"doctype html\n",[92,7793,7794],{"class":94,"line":101},[92,7795,7796],{},"html(lang=\"ja\")\n",[92,7798,7799],{"class":94,"line":107},[92,7800,7801],{}," block head\n",[92,7803,7804],{"class":94,"line":113},[92,7805,7806],{}," include ..\u002Fcomponents\u002Fhead_conf\n",[92,7808,7809],{"class":94,"line":119},[92,7810,7811],{}," body\n",[92,7813,7814],{"class":94,"line":284},[92,7815,7816],{}," .body-wrapper\n",[92,7818,7819],{"class":94,"line":294},[92,7820,7821],{}," block header\n",[92,7823,7824],{"class":94,"line":334},[92,7825,7826],{}," include ..\u002Fcomponents\u002Fheader\n",[92,7828,7829],{"class":94,"line":366},[92,7830,281],{"emptyLinePlaceholder":280},[92,7832,7833],{"class":94,"line":392},[92,7834,7835],{}," main.p-main-content\n",[92,7837,7838],{"class":94,"line":415},[92,7839,7840],{}," block content\n",[92,7842,7843],{"class":94,"line":425},[92,7844,281],{"emptyLinePlaceholder":280},[92,7846,7847],{"class":94,"line":435},[92,7848,7849],{}," block footer\n",[92,7851,7852],{"class":94,"line":440},[92,7853,7854],{}," include ..\u002Fcomponents\u002Ffooter\n",[92,7856,7857],{"class":94,"line":732},[92,7858,7859],{}," \n",[92,7861,7862],{"class":94,"line":745},[92,7863,7864],{}," block footerNav \n",[92,7866,7867],{"class":94,"line":751},[92,7868,7869],{}," include ..\u002Fcomponents\u002FfooterNav\n",[18,7871,7872,7873,7876],{},"main配下のページ内容（上記のテンプレートファイルの",[55,7874,7875],{},"block content","に展開）",[64,7878,7881],{"className":7781,"code":7879,"filename":7880,"language":7784,"meta":72,"style":72},"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",[55,7882,7883,7888,7893,7898,7903,7907,7912,7917,7922,7927,7932,7937,7942,7946,7950,7954,7958,7963,7968,7973,7978],{"__ignoreMap":72},[92,7884,7885],{"class":94,"line":95},[92,7886,7887],{},"extends ..\u002Flayouts\u002Fdefault.pug\n",[92,7889,7890],{"class":94,"line":101},[92,7891,7892],{},"include ..\u002Fcomponents\u002Fbadge\n",[92,7894,7895],{"class":94,"line":107},[92,7896,7897],{}," include ..\u002Fcomponents\u002F_data\n",[92,7899,7900],{"class":94,"line":113},[92,7901,7902],{}," - var recommneds = variables.recommneds\n",[92,7904,7905],{"class":94,"line":119},[92,7906,281],{"emptyLinePlaceholder":280},[92,7908,7909],{"class":94,"line":284},[92,7910,7911],{},"block content\n",[92,7913,7914],{"class":94,"line":294},[92,7915,7916],{}," .p-first-view-content\n",[92,7918,7919],{"class":94,"line":334},[92,7920,7921],{}," .p-sliders.swiper(id=\"top-slider\")\n",[92,7923,7924],{"class":94,"line":366},[92,7925,7926],{}," .p-slider-wrapper.swiper-wrapper\n",[92,7928,7929],{"class":94,"line":392},[92,7930,7931],{}," .c-slider.swiper-slide\n",[92,7933,7934],{"class":94,"line":415},[92,7935,7936],{}," .c-img-adjuster\n",[92,7938,7939],{"class":94,"line":425},[92,7940,7941],{}," img(src=require(\"~\u002Fimg\u002Fsample\u002Ftop_slider_img.jpg\"), alt=\"スライダーの写真\")\n",[92,7943,7944],{"class":94,"line":435},[92,7945,7931],{},[92,7947,7948],{"class":94,"line":440},[92,7949,7936],{},[92,7951,7952],{"class":94,"line":732},[92,7953,7941],{},[92,7955,7956],{"class":94,"line":745},[92,7957,638],{},[92,7959,7960],{"class":94,"line":751},[92,7961,7962],{}," div.p-fullfilled\n",[92,7964,7965],{"class":94,"line":769},[92,7966,7967],{}," .p-row-container\n",[92,7969,7970],{"class":94,"line":794},[92,7971,7972],{}," .p-row-wrapper\n",[92,7974,7975],{"class":94,"line":800},[92,7976,7977],{}," each val,index in recommneds\n",[92,7979,7980],{"class":94,"line":813},[92,7981,7982],{}," +badge(val,\"recommend-\"+index)\n",[18,7984,7985],{},"for文によるループ、テンプレート、mixinやインポートなどPHPなどバック側で行っていたような、htmlの構築ができます。laravelのbladeみたいな感じです。pugを使うことでhtmlで面倒と思っていたことは大体解消できます。変更にも強いのでpugは使うことをお勧めします。",[48,7987,7988],{"id":7988},"ディレクトリを少し変更",[18,7990,7991,7992,7994],{},"htmlの時は単に",[55,7993,7123],{},"配下にファイルを配置するだけでしたが、もう少しpugで管理しやすいように以下のように変更します。",[64,7996,7999],{"className":7997,"code":7998,"language":69},[67],".\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",[55,8000,7998],{"__ignoreMap":72},[18,8002,8003,1044,8006,1044,8009,8012,8013,8015,8016,8018,8019,8021],{},[55,8004,8005],{},"component",[55,8007,8008],{},"layout",[55,8010,8011],{},"page",",というものを追加しました。",[55,8014,8005],{},"は繰り返し使われるパーツ（ボタンとかカードとか）のpugを格納、",[55,8017,8008],{},"はhead,bodyの構成を含めたmainタグ以外の箇所のレイアウトを決めるpugを格納し、",[55,8020,8011],{},"にバンドル対象の各種ページのpugを配置します。",[18,8023,8024,8026,8027,3336,8030,8033,8034,8036],{},[55,8025,8011],{},"に先ほどの",[55,8028,8029],{},"index.pug",[55,8031,8032],{}," detail.pug","を配置して、最終的にhtmlにして",[55,8035,4331],{},"に配置します。適宜component、layoutからファイルをインポートして使用します。私は大体のプロジェクトはこれで十分なカバーできる気がします。",[48,8038,8039],{"id":8039},"webpackでpugを扱う",[18,8041,8042],{},"それではwebpackでpugを扱えるようにしましょう。以下のloaderとpluginを入れます。",[64,8044,8047],{"className":8045,"code":8046,"language":69},[67],"npm install -D pug-loader html-webpack-plugin\n",[55,8048,8046],{"__ignoreMap":72},[18,8050,8051,8053],{},[55,8052,6630],{}," はHTML編でここでは入っていれば入りません。",[18,8055,8056,8057,8059],{},"まずは",[55,8058,2085],{},"にpugのruleとloaderを追加します。",[64,8061,8063],{"className":508,"code":8062,"filename":504,"language":510,"meta":72,"style":72},"\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",[55,8064,8065,8069,8073,8083,8087,8091,8095,8113,8127,8135,8139,8154,8162,8173,8177,8181,8185,8189,8193,8197,8201,8213,8227,8231,8245,8249,8257,8265,8269,8273,8283,8287,8291,8295,8299],{"__ignoreMap":72},[92,8066,8067],{"class":94,"line":95},[92,8068,281],{"emptyLinePlaceholder":280},[92,8070,8071],{"class":94,"line":101},[92,8072,6423],{"class":443},[92,8074,8075,8077,8079,8081],{"class":94,"line":107},[92,8076,2814],{"class":261},[92,8078,2817],{"class":228},[92,8080,265],{"class":145},[92,8082,657],{"class":228},[92,8084,8085],{"class":94,"line":113},[92,8086,6438],{"class":443},[92,8088,8089],{"class":94,"line":119},[92,8090,6443],{"class":443},[92,8092,8093],{"class":94,"line":284},[92,8094,2826],{"class":145},[92,8096,8097,8099,8101,8103,8105,8107,8109,8111],{"class":94,"line":294},[92,8098,2831],{"class":237},[92,8100,162],{"class":145},[92,8102,672],{"class":145},[92,8104,675],{"class":228},[92,8106,7784],{"class":200},[92,8108,700],{"class":699},[92,8110,598],{"class":145},[92,8112,614],{"class":145},[92,8114,8115,8117,8119,8121,8123,8125],{"class":94,"line":334},[92,8116,2864],{"class":237},[92,8118,162],{"class":145},[92,8120,672],{"class":145},[92,8122,716],{"class":200},[92,8124,598],{"class":145},[92,8126,614],{"class":145},[92,8128,8129,8131,8133],{"class":94,"line":366},[92,8130,2879],{"class":237},[92,8132,162],{"class":145},[92,8134,657],{"class":228},[92,8136,8137],{"class":94,"line":392},[92,8138,5175],{"class":145},[92,8140,8141,8143,8145,8147,8150,8152],{"class":94,"line":415},[92,8142,6111],{"class":237},[92,8144,162],{"class":145},[92,8146,759],{"class":145},[92,8148,8149],{"class":200},"pug-loader",[92,8151,268],{"class":145},[92,8153,614],{"class":145},[92,8155,8156,8158,8160],{"class":94,"line":425},[92,8157,6126],{"class":237},[92,8159,162],{"class":145},[92,8161,153],{"class":145},[92,8163,8164,8167,8169,8171],{"class":94,"line":435},[92,8165,8166],{"class":237}," pretty",[92,8168,162],{"class":145},[92,8170,785],{"class":784},[92,8172,614],{"class":145},[92,8174,8175],{"class":94,"line":440},[92,8176,2505],{"class":145},[92,8178,8179],{"class":94,"line":732},[92,8180,5299],{"class":145},[92,8182,8183],{"class":94,"line":745},[92,8184,2948],{"class":228},[92,8186,8187],{"class":94,"line":751},[92,8188,3031],{"class":145},[92,8190,8191],{"class":94,"line":769},[92,8192,3275],{"class":443},[92,8194,8195],{"class":94,"line":794},[92,8196,2495],{"class":228},[92,8198,8199],{"class":94,"line":800},[92,8200,281],{"emptyLinePlaceholder":280},[92,8202,8203,8205,8207,8209,8211],{"class":94,"line":813},[92,8204,517],{"class":261},[92,8206,6518],{"class":228},[92,8208,265],{"class":145},[92,8210,575],{"class":145},[92,8212,153],{"class":145},[92,8214,8215,8217,8219,8221,8223,8225],{"class":94,"line":819},[92,8216,587],{"class":237},[92,8218,162],{"class":145},[92,8220,759],{"class":145},[92,8222,3218],{"class":200},[92,8224,268],{"class":145},[92,8226,614],{"class":145},[92,8228,8229],{"class":94,"line":825},[92,8230,619],{"class":228},[92,8232,8233,8235,8237,8239,8241,8243],{"class":94,"line":834},[92,8234,3231],{"class":237},[92,8236,162],{"class":145},[92,8238,197],{"class":145},[92,8240,629],{"class":200},[92,8242,197],{"class":145},[92,8244,614],{"class":145},[92,8246,8247],{"class":94,"line":871},[92,8248,638],{"class":228},[92,8250,8251,8253,8255],{"class":94,"line":880},[92,8252,643],{"class":237},[92,8254,162],{"class":145},[92,8256,153],{"class":145},[92,8258,8259,8261,8263],{"class":94,"line":886},[92,8260,652],{"class":237},[92,8262,162],{"class":145},[92,8264,3262],{"class":228},[92,8266,8267],{"class":94,"line":902},[92,8268,995],{"class":145},[92,8270,8271],{"class":94,"line":912},[92,8272,281],{"emptyLinePlaceholder":280},[92,8274,8275,8277,8279,8281],{"class":94,"line":925},[92,8276,2382],{"class":237},[92,8278,162],{"class":145},[92,8280,2085],{"class":228},[92,8282,614],{"class":145},[92,8284,8285],{"class":94,"line":941},[92,8286,3275],{"class":443},[92,8288,8289],{"class":94,"line":947},[92,8290,122],{"class":145},[92,8292,8293],{"class":94,"line":953},[92,8294,2322],{"class":443},[92,8296,8297],{"class":94,"line":961},[92,8298,281],{"emptyLinePlaceholder":280},[92,8300,8301,8303,8305,8307],{"class":94,"line":979},[92,8302,572],{"class":145},[92,8304,575],{"class":145},[92,8306,6619],{"class":228},[92,8308,169],{"class":145},[18,8310,8311],{},"次に",[64,8313,8315],{"className":508,"code":8314,"filename":504,"language":510,"meta":72,"style":72},"\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",[55,8316,8317,8321,8343,8365,8369,8373,8395,8417,8421,8431,8435,8439,8443,8455,8469,8473,8487,8491,8499,8507,8511,8515,8525,8529,8533,8537,8541,8569,8598,8606,8610,8631,8699,8713,8723,8761,8775,8785,8793,8799,8803,8811,8815],{"__ignoreMap":72},[92,8318,8319],{"class":94,"line":95},[92,8320,6641],{"class":443},[92,8322,8323,8325,8327,8329,8331,8333,8335,8337,8339,8341],{"class":94,"line":101},[92,8324,517],{"class":261},[92,8326,520],{"class":228},[92,8328,265],{"class":145},[92,8330,525],{"class":190},[92,8332,194],{"class":228},[92,8334,268],{"class":145},[92,8336,532],{"class":200},[92,8338,268],{"class":145},[92,8340,537],{"class":228},[92,8342,169],{"class":145},[92,8344,8345,8347,8349,8351,8353,8355,8357,8359,8361,8363],{"class":94,"line":107},[92,8346,517],{"class":261},[92,8348,546],{"class":228},[92,8350,265],{"class":145},[92,8352,525],{"class":190},[92,8354,194],{"class":228},[92,8356,268],{"class":145},[92,8358,557],{"class":200},[92,8360,268],{"class":145},[92,8362,537],{"class":228},[92,8364,169],{"class":145},[92,8366,8367],{"class":94,"line":113},[92,8368,281],{"emptyLinePlaceholder":280},[92,8370,8371],{"class":94,"line":119},[92,8372,6694],{"class":443},[92,8374,8375,8377,8379,8381,8383,8385,8387,8389,8391,8393],{"class":94,"line":284},[92,8376,517],{"class":261},[92,8378,6701],{"class":228},[92,8380,265],{"class":145},[92,8382,525],{"class":190},[92,8384,194],{"class":228},[92,8386,268],{"class":145},[92,8388,6712],{"class":200},[92,8390,268],{"class":145},[92,8392,537],{"class":228},[92,8394,169],{"class":145},[92,8396,8397,8399,8401,8403,8405,8407,8409,8411,8413,8415],{"class":94,"line":294},[92,8398,517],{"class":261},[92,8400,6725],{"class":228},[92,8402,265],{"class":145},[92,8404,525],{"class":190},[92,8406,194],{"class":228},[92,8408,268],{"class":145},[92,8410,6630],{"class":200},[92,8412,268],{"class":145},[92,8414,537],{"class":228},[92,8416,169],{"class":145},[92,8418,8419],{"class":94,"line":334},[92,8420,281],{"emptyLinePlaceholder":280},[92,8422,8423,8425,8427,8429],{"class":94,"line":366},[92,8424,2814],{"class":261},[92,8426,2817],{"class":228},[92,8428,265],{"class":145},[92,8430,657],{"class":228},[92,8432,8433],{"class":94,"line":392},[92,8434,6760],{"class":443},[92,8436,8437],{"class":94,"line":415},[92,8438,2495],{"class":228},[92,8440,8441],{"class":94,"line":425},[92,8442,281],{"emptyLinePlaceholder":280},[92,8444,8445,8447,8449,8451,8453],{"class":94,"line":435},[92,8446,517],{"class":261},[92,8448,6518],{"class":228},[92,8450,265],{"class":145},[92,8452,575],{"class":145},[92,8454,153],{"class":145},[92,8456,8457,8459,8461,8463,8465,8467],{"class":94,"line":440},[92,8458,587],{"class":237},[92,8460,162],{"class":145},[92,8462,759],{"class":145},[92,8464,3218],{"class":200},[92,8466,268],{"class":145},[92,8468,614],{"class":145},[92,8470,8471],{"class":94,"line":732},[92,8472,619],{"class":228},[92,8474,8475,8477,8479,8481,8483,8485],{"class":94,"line":745},[92,8476,3231],{"class":237},[92,8478,162],{"class":145},[92,8480,197],{"class":145},[92,8482,629],{"class":200},[92,8484,197],{"class":145},[92,8486,614],{"class":145},[92,8488,8489],{"class":94,"line":751},[92,8490,638],{"class":228},[92,8492,8493,8495,8497],{"class":94,"line":769},[92,8494,643],{"class":237},[92,8496,162],{"class":145},[92,8498,153],{"class":145},[92,8500,8501,8503,8505],{"class":94,"line":794},[92,8502,652],{"class":237},[92,8504,162],{"class":145},[92,8506,3262],{"class":228},[92,8508,8509],{"class":94,"line":800},[92,8510,995],{"class":145},[92,8512,8513],{"class":94,"line":813},[92,8514,281],{"emptyLinePlaceholder":280},[92,8516,8517,8519,8521,8523],{"class":94,"line":819},[92,8518,2382],{"class":237},[92,8520,162],{"class":145},[92,8522,2085],{"class":228},[92,8524,614],{"class":145},[92,8526,8527],{"class":94,"line":825},[92,8528,6855],{"class":443},[92,8530,8531],{"class":94,"line":834},[92,8532,122],{"class":145},[92,8534,8535],{"class":94,"line":871},[92,8536,281],{"emptyLinePlaceholder":280},[92,8538,8539],{"class":94,"line":880},[92,8540,6868],{"class":443},[92,8542,8543,8545,8548,8550,8552,8554,8556,8558,8560,8563,8565,8567],{"class":94,"line":886},[92,8544,517],{"class":261},[92,8546,8547],{"class":228}," pugFiles ",[92,8549,265],{"class":145},[92,8551,6880],{"class":228},[92,8553,146],{"class":145},[92,8555,6885],{"class":190},[92,8557,194],{"class":228},[92,8559,268],{"class":145},[92,8561,8562],{"class":200},"src\u002Fhtml\u002Fpage\u002F*",[92,8564,268],{"class":145},[92,8566,1044],{"class":145},[92,8568,153],{"class":145},[92,8570,8571,8574,8576,8579,8581,8584,8586,8588,8590,8593,8595],{"class":94,"line":902},[92,8572,8573],{"class":237}," ignore",[92,8575,162],{"class":145},[92,8577,8578],{"class":228}," [ ",[92,8580,268],{"class":145},[92,8582,8583],{"class":200},"src\u002Fhtml\u002Fcomponents\u002F*",[92,8585,268],{"class":145},[92,8587,1044],{"class":145},[92,8589,268],{"class":145},[92,8591,8592],{"class":200},"src\u002Fhtml.layouts\u002F*",[92,8594,268],{"class":145},[92,8596,8597],{"class":228}," ]\n",[92,8599,8600,8602,8604],{"class":94,"line":912},[92,8601,1103],{"class":145},[92,8603,537],{"class":228},[92,8605,169],{"class":145},[92,8607,8608],{"class":94,"line":925},[92,8609,281],{"emptyLinePlaceholder":280},[92,8611,8612,8615,8617,8619,8621,8623,8625,8627,8629],{"class":94,"line":941},[92,8613,8614],{"class":228},"pugFiles",[92,8616,146],{"class":145},[92,8618,6912],{"class":190},[92,8620,194],{"class":228},[92,8622,194],{"class":145},[92,8624,7784],{"class":4650},[92,8626,537],{"class":145},[92,8628,6924],{"class":261},[92,8630,153],{"class":145},[92,8632,8633,8635,8637,8639,8642,8644,8646,8648,8650,8652,8654,8656,8658,8660,8662,8664,8666,8668,8670,8672,8674,8677,8679,8681,8684,8686,8688,8690,8693,8695,8697],{"class":94,"line":947},[92,8634,6931],{"class":261},[92,8636,3961],{"class":228},[92,8638,575],{"class":145},[92,8640,8641],{"class":228}," pug",[92,8643,146],{"class":145},[92,8645,6944],{"class":190},[92,8647,194],{"class":237},[92,8649,268],{"class":145},[92,8651,598],{"class":200},[92,8653,268],{"class":145},[92,8655,537],{"class":237},[92,8657,146],{"class":145},[92,8659,6959],{"class":190},[92,8661,194],{"class":237},[92,8663,6964],{"class":145},[92,8665,6967],{"class":165},[92,8667,6970],{"class":237},[92,8669,6973],{"class":165},[92,8671,6976],{"class":237},[92,8673,146],{"class":145},[92,8675,8676],{"class":190},"replace",[92,8678,194],{"class":237},[92,8680,268],{"class":145},[92,8682,8683],{"class":200},".pug",[92,8685,268],{"class":145},[92,8687,1044],{"class":145},[92,8689,759],{"class":145},[92,8691,8692],{"class":200},".html",[92,8694,268],{"class":145},[92,8696,537],{"class":237},[92,8698,169],{"class":145},[92,8700,8701,8703,8705,8707,8709,8711],{"class":94,"line":953},[92,8702,6987],{"class":228},[92,8704,146],{"class":145},[92,8706,3375],{"class":228},[92,8708,146],{"class":145},[92,8710,3073],{"class":190},[92,8712,3076],{"class":237},[92,8714,8715,8717,8719,8721],{"class":94,"line":961},[92,8716,5380],{"class":145},[92,8718,7004],{"class":190},[92,8720,194],{"class":237},[92,8722,1162],{"class":145},[92,8724,8725,8727,8729,8731,8733,8735,8737,8739,8741,8743,8745,8747,8749,8751,8753,8755,8757,8759],{"class":94,"line":979},[92,8726,1122],{"class":237},[92,8728,162],{"class":145},[92,8730,1097],{"class":145},[92,8732,557],{"class":228},[92,8734,146],{"class":145},[92,8736,1038],{"class":190},[92,8738,1041],{"class":228},[92,8740,1044],{"class":145},[92,8742,759],{"class":145},[92,8744,4331],{"class":200},[92,8746,268],{"class":145},[92,8748,537],{"class":228},[92,8750,1103],{"class":145},[92,8752,598],{"class":200},[92,8754,7041],{"class":145},[92,8756,221],{"class":228},[92,8758,7047],{"class":145},[92,8760,614],{"class":145},[92,8762,8763,8765,8767,8769,8771,8773],{"class":94,"line":984},[92,8764,7054],{"class":237},[92,8766,162],{"class":145},[92,8768,268],{"class":145},[92,8770,238],{"class":200},[92,8772,268],{"class":145},[92,8774,614],{"class":145},[92,8776,8777,8779,8781,8783],{"class":94,"line":992},[92,8778,7069],{"class":237},[92,8780,162],{"class":145},[92,8782,8641],{"class":228},[92,8784,614],{"class":145},[92,8786,8787,8789,8791],{"class":94,"line":998},[92,8788,7080],{"class":237},[92,8790,162],{"class":145},[92,8792,7085],{"class":784},[92,8794,8795,8797],{"class":94,"line":1010},[92,8796,5404],{"class":145},[92,8798,1053],{"class":237},[92,8800,8801],{"class":94,"line":1020},[92,8802,3187],{"class":237},[92,8804,8805,8807,8809],{"class":94,"line":1056},[92,8806,1103],{"class":145},[92,8808,537],{"class":228},[92,8810,169],{"class":145},[92,8812,8813],{"class":94,"line":1062},[92,8814,281],{"emptyLinePlaceholder":280},[92,8816,8817,8819,8821,8823],{"class":94,"line":1067},[92,8818,572],{"class":145},[92,8820,575],{"class":145},[92,8822,6619],{"class":228},[92,8824,169],{"class":145},[18,8826,8827],{},"詳細はHTML編の記述を見てください。HTML編と似ていますが、",[64,8829,8831],{"className":508,"code":8830,"language":510,"meta":72,"style":72},"const pugFiles = globule.find('src\u002Fhtml\u002F*', {\n ignore: [ 'src\u002Fhtml\u002Fcomponents\u002F*','src\u002Fhtml.layouts\u002F*' ]\n});\n",[55,8832,8833,8860,8884],{"__ignoreMap":72},[92,8834,8835,8837,8839,8841,8843,8845,8847,8849,8851,8854,8856,8858],{"class":94,"line":95},[92,8836,517],{"class":261},[92,8838,8547],{"class":228},[92,8840,265],{"class":145},[92,8842,6880],{"class":228},[92,8844,146],{"class":145},[92,8846,6885],{"class":190},[92,8848,194],{"class":228},[92,8850,268],{"class":145},[92,8852,8853],{"class":200},"src\u002Fhtml\u002F*",[92,8855,268],{"class":145},[92,8857,1044],{"class":145},[92,8859,153],{"class":145},[92,8861,8862,8864,8866,8868,8870,8872,8874,8876,8878,8880,8882],{"class":94,"line":101},[92,8863,8573],{"class":237},[92,8865,162],{"class":145},[92,8867,8578],{"class":228},[92,8869,268],{"class":145},[92,8871,8583],{"class":200},[92,8873,268],{"class":145},[92,8875,1044],{"class":145},[92,8877,268],{"class":145},[92,8879,8592],{"class":200},[92,8881,268],{"class":145},[92,8883,8597],{"class":228},[92,8885,8886,8888,8890],{"class":94,"line":107},[92,8887,1103],{"class":145},[92,8889,537],{"class":228},[92,8891,169],{"class":145},[18,8893,8894,4890,8896,8899,8900,8902],{},[55,8895,6712],{},[55,8897,8898],{},"ignore","を指定して全てのpugファイルを拾わないようにします。（今回の構成ならfindするディレクトリを ",[55,8901,8562],{}," にしてもいいかもしれません）",[18,8904,8905],{},"基本的にはこれでpugは使えるようになります。",[48,8907,8908],{"id":8908},"pugでの画像パスの解決",[18,8910,8911,8912,8914,8915,8918],{},"HTMLでは",[55,8913,1038],{},"で",[55,8916,8917],{},"roots","を指定していました。pugではそれらの指定は特に必要なく、以下のように指定します。",[64,8920,8922],{"className":7781,"code":8921,"language":7784,"meta":72,"style":72},"\u002F\u002F- OK\nimg(src=require(\"~\u002Fimg\u002Fsample.png\"), alt=\"\")\n\n\u002F\u002F- NG\nimg(src=\"~\u002Fimg\u002Fsample.png\", alt=\"\")\n",[55,8923,8924,8929,8934,8938,8943],{"__ignoreMap":72},[92,8925,8926],{"class":94,"line":95},[92,8927,8928],{},"\u002F\u002F- OK\n",[92,8930,8931],{"class":94,"line":101},[92,8932,8933],{},"img(src=require(\"~\u002Fimg\u002Fsample.png\"), alt=\"\")\n",[92,8935,8936],{"class":94,"line":107},[92,8937,281],{"emptyLinePlaceholder":280},[92,8939,8940],{"class":94,"line":113},[92,8941,8942],{},"\u002F\u002F- NG\n",[92,8944,8945],{"class":94,"line":119},[92,8946,8947],{},"img(src=\"~\u002Fimg\u002Fsample.png\", alt=\"\")\n",[18,8949,8950],{},"pugではnode.jsやjsの記述が利用できる為、requireを用いてエイリアスと一緒にパスの解決ができます。",[44,8952,3751],{"id":3750},[18,8954,8955,8956,8958],{},"以上でwebpackを用いたjs,scss,画像,htmlのバンドルは以上となります。vueやtypecriptの導入を考えるとさらに深い理解は必要そうですが、ひとまずHTMLのマークアップ程度であれば今回の構成を用いれば十分な気がします。vue・typesciptもいずれやってみようと思います。また今回使用した",[55,8957,504],{},"は以下の通りとなります。参考にどうぞ。",[64,8960,8962],{"className":508,"code":8961,"filename":504,"language":510,"meta":72,"style":72},"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",[55,8963,8964,8986,9008,9030,9052,9056,9066,9070,9102,9116,9124,9134,9138,9152,9168,9172,9182,9188,9192,9196,9233,9241,9254,9258,9270,9274,9278,9300,9308,9322,9326,9331,9335,9353,9367,9375,9379,9393,9401,9411,9415,9419,9423,9427,9431,9435,9451,9461,9465,9487,9505,9513,9527,9535,9551,9555,9560,9570,9584,9589,9594,9599,9604,9609,9620,9641,9646,9667,9672,9681,9690,9695,9702,9745,9754,9785,9790,9817,9822,9827,9836,9841,9860,9875,9880,9889,9900,9913,9922,9927,9932,9937,9964,9989,9998,10003,10024,10089,10104,10115,10154,10169,10180,10189,10196,10201,10210,10215],{"__ignoreMap":72},[92,8965,8966,8968,8970,8972,8974,8976,8978,8980,8982,8984],{"class":94,"line":95},[92,8967,517],{"class":261},[92,8969,520],{"class":228},[92,8971,265],{"class":145},[92,8973,525],{"class":190},[92,8975,194],{"class":228},[92,8977,268],{"class":145},[92,8979,532],{"class":200},[92,8981,268],{"class":145},[92,8983,537],{"class":228},[92,8985,169],{"class":145},[92,8987,8988,8990,8992,8994,8996,8998,9000,9002,9004,9006],{"class":94,"line":101},[92,8989,517],{"class":261},[92,8991,546],{"class":228},[92,8993,265],{"class":145},[92,8995,525],{"class":190},[92,8997,194],{"class":228},[92,8999,268],{"class":145},[92,9001,557],{"class":200},[92,9003,268],{"class":145},[92,9005,537],{"class":228},[92,9007,169],{"class":145},[92,9009,9010,9012,9014,9016,9018,9020,9022,9024,9026,9028],{"class":94,"line":107},[92,9011,517],{"class":261},[92,9013,6701],{"class":228},[92,9015,265],{"class":145},[92,9017,525],{"class":190},[92,9019,194],{"class":228},[92,9021,268],{"class":145},[92,9023,6712],{"class":200},[92,9025,268],{"class":145},[92,9027,537],{"class":228},[92,9029,169],{"class":145},[92,9031,9032,9034,9036,9038,9040,9042,9044,9046,9048,9050],{"class":94,"line":113},[92,9033,517],{"class":261},[92,9035,6725],{"class":228},[92,9037,265],{"class":145},[92,9039,525],{"class":190},[92,9041,194],{"class":228},[92,9043,268],{"class":145},[92,9045,6630],{"class":200},[92,9047,268],{"class":145},[92,9049,537],{"class":228},[92,9051,169],{"class":145},[92,9053,9054],{"class":94,"line":119},[92,9055,619],{"class":228},[92,9057,9058,9060,9062,9064],{"class":94,"line":284},[92,9059,2814],{"class":261},[92,9061,2817],{"class":228},[92,9063,265],{"class":145},[92,9065,657],{"class":228},[92,9067,9068],{"class":94,"line":294},[92,9069,2826],{"class":145},[92,9071,9072,9074,9076,9078,9080,9082,9084,9086,9088,9090,9092,9094,9096,9098,9100],{"class":94,"line":334},[92,9073,2831],{"class":237},[92,9075,162],{"class":145},[92,9077,672],{"class":145},[92,9079,675],{"class":228},[92,9081,194],{"class":145},[92,9083,680],{"class":200},[92,9085,683],{"class":145},[92,9087,686],{"class":200},[92,9089,683],{"class":145},[92,9091,691],{"class":200},[92,9093,537],{"class":145},[92,9095,696],{"class":200},[92,9097,700],{"class":699},[92,9099,598],{"class":145},[92,9101,614],{"class":145},[92,9103,9104,9106,9108,9110,9112,9114],{"class":94,"line":366},[92,9105,2864],{"class":237},[92,9107,162],{"class":145},[92,9109,672],{"class":145},[92,9111,716],{"class":200},[92,9113,598],{"class":145},[92,9115,614],{"class":145},[92,9117,9118,9120,9122],{"class":94,"line":392},[92,9119,2879],{"class":237},[92,9121,162],{"class":145},[92,9123,657],{"class":228},[92,9125,9126,9128,9130,9132],{"class":94,"line":415},[92,9127,2888],{"class":228},[92,9129,146],{"class":145},[92,9131,740],{"class":228},[92,9133,614],{"class":145},[92,9135,9136],{"class":94,"line":425},[92,9137,662],{"class":145},[92,9139,9140,9142,9144,9146,9148,9150],{"class":94,"line":435},[92,9141,2456],{"class":237},[92,9143,162],{"class":145},[92,9145,759],{"class":145},[92,9147,762],{"class":200},[92,9149,268],{"class":145},[92,9151,614],{"class":145},[92,9153,9154,9156,9158,9160,9162,9164,9166],{"class":94,"line":440},[92,9155,2471],{"class":237},[92,9157,162],{"class":145},[92,9159,777],{"class":145},[92,9161,191],{"class":237},[92,9163,162],{"class":145},[92,9165,785],{"class":784},[92,9167,209],{"class":145},[92,9169,9170],{"class":94,"line":732},[92,9171,822],{"class":145},[92,9173,9174,9176,9178,9180],{"class":94,"line":745},[92,9175,2937],{"class":145},[92,9177,806],{"class":200},[92,9179,268],{"class":145},[92,9181,614],{"class":145},[92,9183,9184,9186],{"class":94,"line":751},[92,9185,987],{"class":228},[92,9187,614],{"class":145},[92,9189,9190],{"class":94,"line":769},[92,9191,995],{"class":145},[92,9193,9194],{"class":94,"line":794},[92,9195,2826],{"class":145},[92,9197,9198,9200,9202,9204,9206,9208,9210,9212,9214,9216,9218,9220,9223,9225,9227,9229,9231],{"class":94,"line":800},[92,9199,2831],{"class":237},[92,9201,162],{"class":145},[92,9203,672],{"class":145},[92,9205,675],{"class":228},[92,9207,194],{"class":145},[92,9209,847],{"class":200},[92,9211,683],{"class":145},[92,9213,852],{"class":200},[92,9215,683],{"class":145},[92,9217,857],{"class":200},[92,9219,683],{"class":145},[92,9221,9222],{"class":200},"svg",[92,9224,537],{"class":145},[92,9226,700],{"class":699},[92,9228,598],{"class":145},[92,9230,866],{"class":165},[92,9232,614],{"class":145},[92,9234,9235,9237,9239],{"class":94,"line":813},[92,9236,2993],{"class":237},[92,9238,162],{"class":145},[92,9240,153],{"class":145},[92,9242,9243,9245,9247,9249,9252],{"class":94,"line":819},[92,9244,1168],{"class":237},[92,9246,162],{"class":145},[92,9248,759],{"class":145},[92,9250,9251],{"class":200},"img\u002F[name][ext][query]",[92,9253,938],{"class":145},[92,9255,9256],{"class":94,"line":825},[92,9257,1319],{"class":145},[92,9259,9260,9262,9264,9266,9268],{"class":94,"line":834},[92,9261,3018],{"class":237},[92,9263,162],{"class":145},[92,9265,759],{"class":145},[92,9267,1914],{"class":200},[92,9269,938],{"class":145},[92,9271,9272],{"class":94,"line":871},[92,9273,995],{"class":145},[92,9275,9276],{"class":94,"line":880},[92,9277,2826],{"class":145},[92,9279,9280,9282,9284,9286,9288,9290,9292,9294,9296,9298],{"class":94,"line":886},[92,9281,2831],{"class":237},[92,9283,162],{"class":145},[92,9285,672],{"class":145},[92,9287,675],{"class":228},[92,9289,194],{"class":145},[92,9291,221],{"class":200},[92,9293,537],{"class":145},[92,9295,700],{"class":699},[92,9297,598],{"class":145},[92,9299,614],{"class":145},[92,9301,9302,9304,9306],{"class":94,"line":902},[92,9303,2879],{"class":237},[92,9305,162],{"class":145},[92,9307,153],{"class":145},[92,9309,9310,9312,9314,9316,9318,9320],{"class":94,"line":912},[92,9311,6111],{"class":237},[92,9313,162],{"class":145},[92,9315,759],{"class":145},[92,9317,6390],{"class":200},[92,9319,268],{"class":145},[92,9321,614],{"class":145},[92,9323,9324],{"class":94,"line":925},[92,9325,1059],{"class":145},[92,9327,9328],{"class":94,"line":941},[92,9329,9330],{"class":145}," },\n",[92,9332,9333],{"class":94,"line":947},[92,9334,2826],{"class":145},[92,9336,9337,9339,9341,9343,9345,9347,9349,9351],{"class":94,"line":953},[92,9338,2831],{"class":237},[92,9340,162],{"class":145},[92,9342,672],{"class":145},[92,9344,675],{"class":228},[92,9346,7784],{"class":200},[92,9348,700],{"class":699},[92,9350,598],{"class":145},[92,9352,614],{"class":145},[92,9354,9355,9357,9359,9361,9363,9365],{"class":94,"line":961},[92,9356,2864],{"class":237},[92,9358,162],{"class":145},[92,9360,672],{"class":145},[92,9362,716],{"class":200},[92,9364,598],{"class":145},[92,9366,614],{"class":145},[92,9368,9369,9371,9373],{"class":94,"line":979},[92,9370,2879],{"class":237},[92,9372,162],{"class":145},[92,9374,657],{"class":228},[92,9376,9377],{"class":94,"line":984},[92,9378,5175],{"class":145},[92,9380,9381,9383,9385,9387,9389,9391],{"class":94,"line":992},[92,9382,6111],{"class":237},[92,9384,162],{"class":145},[92,9386,759],{"class":145},[92,9388,8149],{"class":200},[92,9390,268],{"class":145},[92,9392,614],{"class":145},[92,9394,9395,9397,9399],{"class":94,"line":998},[92,9396,6126],{"class":237},[92,9398,162],{"class":145},[92,9400,153],{"class":145},[92,9402,9403,9405,9407,9409],{"class":94,"line":1010},[92,9404,8166],{"class":237},[92,9406,162],{"class":145},[92,9408,785],{"class":784},[92,9410,614],{"class":145},[92,9412,9413],{"class":94,"line":1020},[92,9414,2505],{"class":145},[92,9416,9417],{"class":94,"line":1056},[92,9418,5299],{"class":145},[92,9420,9421],{"class":94,"line":1062},[92,9422,2948],{"class":228},[92,9424,9425],{"class":94,"line":1067},[92,9426,3031],{"class":145},[92,9428,9429],{"class":94,"line":1073},[92,9430,2495],{"class":228},[92,9432,9433],{"class":94,"line":1083},[92,9434,281],{"emptyLinePlaceholder":280},[92,9436,9437,9439,9441,9443,9445,9447,9449],{"class":94,"line":1089},[92,9438,3049],{"class":699},[92,9440,3052],{"class":228},[92,9442,146],{"class":145},[92,9444,3057],{"class":228},[92,9446,146],{"class":145},[92,9448,3062],{"class":228},[92,9450,1162],{"class":145},[92,9452,9453,9455,9457,9459],{"class":94,"line":1113},[92,9454,2382],{"class":228},[92,9456,146],{"class":145},[92,9458,3073],{"class":190},[92,9460,3076],{"class":237},[92,9462,9463],{"class":94,"line":1119},[92,9464,1262],{"class":145},[92,9466,9467,9469,9471,9473,9475,9477,9479,9481,9483,9485],{"class":94,"line":1136},[92,9468,2400],{"class":237},[92,9470,162],{"class":145},[92,9472,672],{"class":145},[92,9474,675],{"class":228},[92,9476,2409],{"class":200},[92,9478,2412],{"class":145},[92,9480,601],{"class":200},[92,9482,700],{"class":699},[92,9484,598],{"class":145},[92,9486,614],{"class":145},[92,9488,9489,9491,9493,9495,9497,9499,9501,9503],{"class":94,"line":1141},[92,9490,2425],{"class":237},[92,9492,162],{"class":145},[92,9494,2430],{"class":145},[92,9496,716],{"class":200},[92,9498,683],{"class":145},[92,9500,2437],{"class":200},[92,9502,2440],{"class":145},[92,9504,614],{"class":145},[92,9506,9507,9509,9511],{"class":94,"line":1151},[92,9508,2447],{"class":237},[92,9510,162],{"class":145},[92,9512,153],{"class":145},[92,9514,9515,9517,9519,9521,9523,9525],{"class":94,"line":1165},[92,9516,3133],{"class":237},[92,9518,162],{"class":145},[92,9520,759],{"class":145},[92,9522,2117],{"class":200},[92,9524,268],{"class":145},[92,9526,614],{"class":145},[92,9528,9529,9531,9533],{"class":94,"line":1180},[92,9530,3148],{"class":237},[92,9532,162],{"class":145},[92,9534,153],{"class":145},[92,9536,9537,9539,9541,9543,9545,9547,9549],{"class":94,"line":1188},[92,9538,3157],{"class":237},[92,9540,162],{"class":145},[92,9542,2485],{"class":237},[92,9544,268],{"class":145},[92,9546,2490],{"class":200},[92,9548,268],{"class":145},[92,9550,2495],{"class":237},[92,9552,9553],{"class":94,"line":1194},[92,9554,3174],{"class":145},[92,9556,9558],{"class":94,"line":9557},56,[92,9559,822],{"class":145},[92,9561,9563,9566,9568],{"class":94,"line":9562},57,[92,9564,9565],{"class":237}," generator",[92,9567,162],{"class":145},[92,9569,153],{"class":145},[92,9571,9573,9576,9578,9580,9582],{"class":94,"line":9572},58,[92,9574,9575],{"class":237}," filename",[92,9577,162],{"class":145},[92,9579,759],{"class":145},[92,9581,3486],{"class":200},[92,9583,938],{"class":145},[92,9585,9587],{"class":94,"line":9586},59,[92,9588,2505],{"class":145},[92,9590,9592],{"class":94,"line":9591},60,[92,9593,1059],{"class":145},[92,9595,9597],{"class":94,"line":9596},61,[92,9598,3187],{"class":237},[92,9600,9602],{"class":94,"line":9601},62,[92,9603,122],{"class":145},[92,9605,9607],{"class":94,"line":9606},63,[92,9608,281],{"emptyLinePlaceholder":280},[92,9610,9612,9614,9616,9618],{"class":94,"line":9611},64,[92,9613,517],{"class":261},[92,9615,6518],{"class":228},[92,9617,265],{"class":145},[92,9619,153],{"class":145},[92,9621,9623,9625,9627,9630,9632,9635,9637,9639],{"class":94,"line":9622},65,[92,9624,587],{"class":237},[92,9626,162],{"class":145},[92,9628,9629],{"class":228},"[",[92,9631,268],{"class":145},[92,9633,9634],{"class":200},".\u002Fsrc\u002Findex.js",[92,9636,268],{"class":145},[92,9638,6976],{"class":228},[92,9640,614],{"class":145},[92,9642,9644],{"class":94,"line":9643},66,[92,9645,619],{"class":228},[92,9647,9649,9651,9653,9656,9658,9660,9662,9665],{"class":94,"line":9648},67,[92,9650,3231],{"class":237},[92,9652,162],{"class":145},[92,9654,9655],{"class":228},"process",[92,9657,146],{"class":145},[92,9659,3057],{"class":228},[92,9661,146],{"class":145},[92,9663,9664],{"class":228},"mode",[92,9666,614],{"class":145},[92,9668,9670],{"class":94,"line":9669},68,[92,9671,638],{"class":228},[92,9673,9675,9677,9679],{"class":94,"line":9674},69,[92,9676,643],{"class":237},[92,9678,162],{"class":145},[92,9680,153],{"class":145},[92,9682,9684,9686,9688],{"class":94,"line":9683},70,[92,9685,652],{"class":237},[92,9687,162],{"class":145},[92,9689,3262],{"class":228},[92,9691,9693],{"class":94,"line":9692},71,[92,9694,995],{"class":145},[92,9696,9698,9700],{"class":94,"line":9697},72,[92,9699,1001],{"class":237},[92,9701,1937],{"class":145},[92,9703,9705,9707,9709,9711,9713,9715,9717,9719,9721,9723,9725,9727,9729,9731,9733,9735,9737,9739,9741,9743],{"class":94,"line":9704},73,[92,9706,7562],{"class":237},[92,9708,162],{"class":145},[92,9710,2485],{"class":228},[92,9712,268],{"class":145},[92,9714,7571],{"class":200},[92,9716,268],{"class":145},[92,9718,1044],{"class":145},[92,9720,759],{"class":145},[92,9722,7580],{"class":200},[92,9724,268],{"class":145},[92,9726,1044],{"class":145},[92,9728,759],{"class":145},[92,9730,7589],{"class":200},[92,9732,268],{"class":145},[92,9734,1044],{"class":145},[92,9736,759],{"class":145},[92,9738,7598],{"class":200},[92,9740,268],{"class":145},[92,9742,6976],{"class":228},[92,9744,614],{"class":145},[92,9746,9748,9750,9752],{"class":94,"line":9747},74,[92,9749,1013],{"class":237},[92,9751,162],{"class":145},[92,9753,153],{"class":145},[92,9755,9757,9759,9761,9763,9765,9767,9769,9771,9773,9775,9777,9779,9781,9783],{"class":94,"line":9756},75,[92,9758,1023],{"class":145},[92,9760,1026],{"class":237},[92,9762,268],{"class":145},[92,9764,162],{"class":145},[92,9766,1033],{"class":228},[92,9768,146],{"class":145},[92,9770,1038],{"class":190},[92,9772,1041],{"class":228},[92,9774,1044],{"class":145},[92,9776,759],{"class":145},[92,9778,595],{"class":200},[92,9780,268],{"class":145},[92,9782,537],{"class":228},[92,9784,614],{"class":145},[92,9786,9788],{"class":94,"line":9787},76,[92,9789,1319],{"class":145},[92,9791,9793,9795,9797,9799,9801,9803,9805,9807,9809,9811,9813,9815],{"class":94,"line":9792},77,[92,9794,7656],{"class":237},[92,9796,162],{"class":145},[92,9798,7661],{"class":228},[92,9800,146],{"class":145},[92,9802,1038],{"class":190},[92,9804,1041],{"class":228},[92,9806,1044],{"class":145},[92,9808,1127],{"class":145},[92,9810,595],{"class":200},[92,9812,197],{"class":145},[92,9814,7678],{"class":228},[92,9816,614],{"class":145},[92,9818,9820],{"class":94,"line":9819},78,[92,9821,995],{"class":145},[92,9823,9825],{"class":94,"line":9824},79,[92,9826,1070],{"class":443},[92,9828,9830,9832,9834],{"class":94,"line":9829},80,[92,9831,1076],{"class":237},[92,9833,162],{"class":145},[92,9835,153],{"class":145},[92,9837,9839],{"class":94,"line":9838},81,[92,9840,1086],{"class":443},[92,9842,9844,9846,9848,9850,9852,9854,9856,9858],{"class":94,"line":9843},82,[92,9845,1092],{"class":237},[92,9847,162],{"class":145},[92,9849,1097],{"class":145},[92,9851,1100],{"class":228},[92,9853,1103],{"class":145},[92,9855,477],{"class":200},[92,9857,1108],{"class":145},[92,9859,614],{"class":145},[92,9861,9863,9865,9867,9869,9871,9873],{"class":94,"line":9862},83,[92,9864,1122],{"class":237},[92,9866,162],{"class":145},[92,9868,759],{"class":145},[92,9870,3486],{"class":200},[92,9872,268],{"class":145},[92,9874,614],{"class":145},[92,9876,9878],{"class":94,"line":9877},84,[92,9879,995],{"class":145},[92,9881,9883,9885,9887],{"class":94,"line":9882},85,[92,9884,1144],{"class":237},[92,9886,162],{"class":145},[92,9888,657],{"class":228},[92,9890,9892,9894,9896,9898],{"class":94,"line":9891},86,[92,9893,1154],{"class":145},[92,9895,1157],{"class":190},[92,9897,194],{"class":228},[92,9899,1162],{"class":145},[92,9901,9903,9905,9907,9909,9911],{"class":94,"line":9902},87,[92,9904,1168],{"class":237},[92,9906,162],{"class":145},[92,9908,759],{"class":145},[92,9910,3521],{"class":200},[92,9912,938],{"class":145},[92,9914,9916,9918,9920],{"class":94,"line":9915},88,[92,9917,1183],{"class":145},[92,9919,537],{"class":228},[92,9921,614],{"class":145},[92,9923,9925],{"class":94,"line":9924},89,[92,9926,1191],{"class":228},[92,9928,9930],{"class":94,"line":9929},90,[92,9931,1197],{"class":145},[92,9933,9935],{"class":94,"line":9934},91,[92,9936,281],{"emptyLinePlaceholder":280},[92,9938,9940,9942,9944,9946,9948,9950,9952,9954,9956,9958,9960,9962],{"class":94,"line":9939},92,[92,9941,517],{"class":261},[92,9943,8547],{"class":228},[92,9945,265],{"class":145},[92,9947,6880],{"class":228},[92,9949,146],{"class":145},[92,9951,6885],{"class":190},[92,9953,194],{"class":228},[92,9955,268],{"class":145},[92,9957,8853],{"class":200},[92,9959,268],{"class":145},[92,9961,1044],{"class":145},[92,9963,153],{"class":145},[92,9965,9967,9969,9971,9973,9975,9977,9979,9981,9983,9985,9987],{"class":94,"line":9966},93,[92,9968,8573],{"class":237},[92,9970,162],{"class":145},[92,9972,8578],{"class":228},[92,9974,268],{"class":145},[92,9976,8583],{"class":200},[92,9978,268],{"class":145},[92,9980,1044],{"class":145},[92,9982,268],{"class":145},[92,9984,8592],{"class":200},[92,9986,268],{"class":145},[92,9988,8597],{"class":228},[92,9990,9992,9994,9996],{"class":94,"line":9991},94,[92,9993,1103],{"class":145},[92,9995,537],{"class":228},[92,9997,169],{"class":145},[92,9999,10001],{"class":94,"line":10000},95,[92,10002,281],{"emptyLinePlaceholder":280},[92,10004,10006,10008,10010,10012,10014,10016,10018,10020,10022],{"class":94,"line":10005},96,[92,10007,8614],{"class":228},[92,10009,146],{"class":145},[92,10011,6912],{"class":190},[92,10013,194],{"class":228},[92,10015,194],{"class":145},[92,10017,7784],{"class":4650},[92,10019,537],{"class":145},[92,10021,6924],{"class":261},[92,10023,153],{"class":145},[92,10025,10027,10029,10031,10033,10035,10037,10039,10041,10043,10045,10047,10049,10051,10053,10055,10057,10059,10061,10063,10065,10067,10069,10071,10073,10075,10077,10079,10081,10083,10085,10087],{"class":94,"line":10026},97,[92,10028,6931],{"class":261},[92,10030,3961],{"class":228},[92,10032,575],{"class":145},[92,10034,8641],{"class":228},[92,10036,146],{"class":145},[92,10038,6944],{"class":190},[92,10040,194],{"class":237},[92,10042,268],{"class":145},[92,10044,598],{"class":200},[92,10046,268],{"class":145},[92,10048,537],{"class":237},[92,10050,146],{"class":145},[92,10052,6959],{"class":190},[92,10054,194],{"class":237},[92,10056,6964],{"class":145},[92,10058,6967],{"class":165},[92,10060,6970],{"class":237},[92,10062,6973],{"class":165},[92,10064,6976],{"class":237},[92,10066,146],{"class":145},[92,10068,8676],{"class":190},[92,10070,194],{"class":237},[92,10072,268],{"class":145},[92,10074,8683],{"class":200},[92,10076,268],{"class":145},[92,10078,1044],{"class":145},[92,10080,759],{"class":145},[92,10082,8692],{"class":200},[92,10084,268],{"class":145},[92,10086,537],{"class":237},[92,10088,169],{"class":145},[92,10090,10092,10094,10096,10098,10100,10102],{"class":94,"line":10091},98,[92,10093,6987],{"class":228},[92,10095,146],{"class":145},[92,10097,3375],{"class":228},[92,10099,146],{"class":145},[92,10101,3073],{"class":190},[92,10103,3076],{"class":237},[92,10105,10107,10109,10111,10113],{"class":94,"line":10106},99,[92,10108,5380],{"class":145},[92,10110,7004],{"class":190},[92,10112,194],{"class":237},[92,10114,1162],{"class":145},[92,10116,10118,10120,10122,10124,10126,10128,10130,10132,10134,10136,10138,10140,10142,10144,10146,10148,10150,10152],{"class":94,"line":10117},100,[92,10119,1122],{"class":237},[92,10121,162],{"class":145},[92,10123,1097],{"class":145},[92,10125,557],{"class":228},[92,10127,146],{"class":145},[92,10129,1038],{"class":190},[92,10131,1041],{"class":228},[92,10133,1044],{"class":145},[92,10135,759],{"class":145},[92,10137,4331],{"class":200},[92,10139,268],{"class":145},[92,10141,537],{"class":228},[92,10143,1103],{"class":145},[92,10145,598],{"class":200},[92,10147,7041],{"class":145},[92,10149,221],{"class":228},[92,10151,7047],{"class":145},[92,10153,614],{"class":145},[92,10155,10157,10159,10161,10163,10165,10167],{"class":94,"line":10156},101,[92,10158,7054],{"class":237},[92,10160,162],{"class":145},[92,10162,268],{"class":145},[92,10164,238],{"class":200},[92,10166,268],{"class":145},[92,10168,614],{"class":145},[92,10170,10172,10174,10176,10178],{"class":94,"line":10171},102,[92,10173,7069],{"class":237},[92,10175,162],{"class":145},[92,10177,8641],{"class":228},[92,10179,614],{"class":145},[92,10181,10183,10185,10187],{"class":94,"line":10182},103,[92,10184,7080],{"class":237},[92,10186,162],{"class":145},[92,10188,7085],{"class":784},[92,10190,10192,10194],{"class":94,"line":10191},104,[92,10193,5404],{"class":145},[92,10195,1053],{"class":237},[92,10197,10199],{"class":94,"line":10198},105,[92,10200,3187],{"class":237},[92,10202,10204,10206,10208],{"class":94,"line":10203},106,[92,10205,1103],{"class":145},[92,10207,537],{"class":228},[92,10209,169],{"class":145},[92,10211,10213],{"class":94,"line":10212},107,[92,10214,281],{"emptyLinePlaceholder":280},[92,10216,10218,10220,10222,10224],{"class":94,"line":10217},108,[92,10219,572],{"class":145},[92,10221,575],{"class":145},[92,10223,6619],{"class":228},[92,10225,169],{"class":145},[3756,10227,10228],{},"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":72,"searchDepth":107,"depth":107,"links":10230},[10231,10232,10238,10244],{"id":6337,"depth":101,"text":6338},{"id":6357,"depth":101,"text":6358,"children":10233},[10234,10235,10236,10237],{"id":6384,"depth":107,"text":6384},{"id":6403,"depth":107,"text":6403},{"id":6624,"depth":107,"text":6624},{"id":33,"depth":107,"text":33},{"id":7762,"depth":101,"text":7763,"children":10239},[10240,10241,10242,10243],{"id":7772,"depth":107,"text":7772},{"id":7988,"depth":107,"text":7988},{"id":8039,"depth":107,"text":8039},{"id":8908,"depth":107,"text":8908},{"id":3750,"depth":101,"text":3751},[3781],"2021-10-30","HTMLファイルの取り扱いとPUGを使い方",{},"\u002Fseries\u002Fwell-study-webpack-3",{"title":6312,"description":10247},"series\u002Fwell-study-webpack-3",[601,3792,221],"EsG5Dg5_6qbSZmEa8Ezu5AMWNTpxDesebmF7q4Bkix4",1780987145982]