イイダリョウのブログ。JSwebpackの続きです。これまでフロント開発3銃士のうちGulpとBabelを触ってみたので、今回は最後の一つ、webpackを触ってみる。以前のJSモジュールの記事のjsファイルをバンドルしてみました。クモのようにコツコツとWeb開発環境まとめqiita.comJSモジュールのおさらい以前のモジュールの記事ではHTMLファイルの中にimportのJSコードを書いていた。aisatsu("また会えたね、モジュール君♪");</script>アラートが表示された。クモのようにコツコツとimportモジュールのjsファイルを読み込むとエラーになるこの形を少し変えて、import.jsにimportモジュールを書く。src="js/import.js"></script>シーン...返事がない。デベロッパーツールを確認すると下記のエラーになっている。net::ERR_FAILEDGoogle先生で翻訳するとオリジン「null」から「(ファイルのパス)/js/import.js」のスクリプトへのアクセスはCORSポリシーによってブロックされています。クロスオリジンリクエストは、プロトコルスキームでのみサポートされています:http、data、chrome、chrome-extension、https。ERR_FAILEDうむ、よくわかんない。モジュール読み込みはローカルだと動かない(異ドメイン間と認識)エラーコードをもとに調べると、こちらのQAと同じ現象のようだった。別ファイルからクラスをインポートしたい|teratail原因がわかりました(中略)CORSエラーです。Moduleは、どうやら、JavaScript上での直接ファイルアクセスとなるようですね。異ドメイン間と認識されるのかと思われます。なると、異ドメイン間のスクリプトからのファイル直でのアクセスは、ブラウザによってセキュリティが働くため、基本行えません。サーバ上かMAMPなどのローカルサーバなら動きそうとのことで、MAMPにフォルダを投げてみると...アラートが表示される!caniuseによればモジュールはIE以外のモダンブラウザは全て対応済みなのだが、ローカルでの挙動は注意が必要っぽい。etcブラウザのセキュリティ対策による結果のため、これはまぁ仕方がないかなぁと思う。webpackでモジュールをバンドルするんですよ!キミィそこでwebpackの登場と相成るわけですな!webpackとは何ぞや?以前も調べた。クモのようにコツコツとが、この時点では「webpack一つあればフロントエンド開発のいろんなことができるぞわ〜い」というテンションだった。webpackの中心となる複数ファイルのバンドル機能に絞って調べてみる。MEDIAwebpackとはウェブコンテンツを構成するファイルをまとめてしまうツールです。多い使い方は、複数のJavaScriptを1つにまとめることでしょう。複数のJavaScriptをまとめるのは、いろんな利点があります。そのメリットとは...転送の最適化モジュールが使えるJSだけでなく、CSSや画像もバンドルできる包括的な開発環境が整うこちらの概念図もわかりやすい!CSSや画像のバンドルについては個人的にはまだあまり必要性を感じていないのだが、手始めとしてJSのモジュールファイルをバンドルしたい!なお、webpackはGulp、Babelとともに「フロント開発3銃士」と呼ばれるツール。Qiitawebpack以外はすでに触れているので本記事をもって3つ全てを体験したことになる!それぞれの位置付けの理解もより深まるはず!webpackをインストール先ほどのページを参考に進めてみる。-vwebpackを入れるフォルダを作る。今回はwebpack_testとした。cdコマンドでフォルダに移動。(フォルダのパス)/webpack_testpackage.jsonを作成する。-yここまではここ最近のフロントエンド環境の記事と共通する内容。webpackとwebpack-cliをインストールする。webpack-cli二つ繋げて書けば同時にインストールされる。}モジュールファイルを作るsrcというディレクトリを作り、その中にindex.jsとsub.jsを作成。.├node_modules(中身は省略)├src│├index.js│└sub.js├package-lock.json└package.jsonsub.jsにはexportするモジュールを書く。alert(massage);}index.jsにはinportするモジュールを書く。"./sub.js";aisatsu("こんにちは、うぇぶぱっく。");先ほどのモジュールをベースにしてファイル名を変更。webpackお、distというフォルダがでけた!.├dist│└main.js├node_modules(中身は省略)├src│├index.js│└sub.js├package-lock.json└package.json中にはmain.jsというjsが書き出されている。strict";r.r(t);alert("こんにちは、うぇぶぱっく。")}]);改行なしの長〜いコードが書き出されている!!よくライブラリであるminify(最小化)ファイルみたいね。jquery.min.jsとかのアレね。package.jsonを書き換えてpackage.jsonのscriptキーにwebpackのビルドコマンドを追加する。},buildキーの値をwebpackに。これでnpmコマンドで実行ができるようになる。build書き出されるコードは同じ。MEDIAwebpack.config.jsファイルで詳細設定webpackの詳細設定をするためにwebpack.config.jsファイルを作る。.├dist│└main.js├node_modules(中身は省略)├src│├index.js│└sub.js├package-lock.json├package.json└webpack.config.jswebpack.config.jsにエントリーポイントと出力設定を書く。};エントリーポイントとはバンドルするときにメインにするファイル。依存関係があった時に優先される。先ほどのフォルダ名、ファイル名はwebpackであらかじめ設定されている名前だが、webpack.config.jsを作ることでこのフォルダ名、ファイル名を独自なものに変えることができる。\"./src/sub.js\");\n\nObject(_sub_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"こんにちは、うぇぶぱっく。}),/*(後略)*/うわぁすごい。想像しているより結構な長さのコードになった。「ソースマップ」と言って元のファイルからのバンドルの過程の情報も含まれているからこんなに膨大になるらしい。MDN詳しくは読み解けないのだが、だいぶ下の方にあるeval()の引数に「こんにちは、うぇぶぱっく。」の文字が見受けられる。コードを式として評価する関数です。index.htmlを作ってscript.jsをリンクtestフォルダの直下にindex.htmlを作る。└script.js│└inde.html├package-lock.json├package.json└webpack.config.jsindex.htmlでscript.jsをリンクする。src="js/script.js"></script></body></html>index.htmlをブラウザで開いてみると...やた!アラートが表示された!!ちなみに先ほど変更したモードを圧縮モードに戻しても結果は同じだった。}無し)を間違えてブロック有りで書いていてしまっていた。aisatsu("親子で再開、モジュール君♪");そしたらwebpackのバンドル時にターミナルで「aisaatsu」という関数名が見つからない、という警告が出た。functionindex.jsのブロックを削除したら、エラーが出なくなった。aisatsu("親子で再開、モジュール君♪");もしかしたら似た現象が起きる方がいるかもしれないので備忘録までに記録。最後にということでwebpackでjsファイルのバンドルを初めて行いました!これでGulp、Babel、webpackのフロント開発3銃士が勢揃いしました(この呼び名、気に入ってますw)Vue.jsやReactなどでかなりの数のモジュールファイルが分かれそうに思うので、この機能を連携することになりそうです。CSSや画像ファイルは実際のフロントエンド開発現場ではJSファイルにバンドルしているのでしょうかね?他のツールとの連携なども含め、引き続き調べて行きたく思います。23:17Tweet関連記事2020-01-11【JS】BabelでESをコンパイルするJSコンパイル系の続きで今回はBabelです。前回はAltJSのTypeScr...2019-12-17【CSS】Sass(SCSS)をGulpでコンパイルしてみるGulpの続きです。前回はHTMLテンプレートエンジンのEJSをコンパ...2019-11-29【HTML】PugをGulpでコンパイルしてみる(メタ言語初コンパイル!)Gulpの続きです。前回はローカルにインストールができました。...2019-11-21Gulpインストールでけった〜!!(package.json作り忘れてた。)メタ言語のコンパイル環境を作る!続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。