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