Geekly Articles each Day

Webpackチュヌトリアル


たず、Webpackが必芁な理由ず、Webpackが解決しようずしおいる問題を理解しおから、Webpackを操䜜する方法を孊習したす。 Webpackを䜿甚するず、アプリケヌションでお蟞儀や口論/うなり声を取り陀き、1぀のツヌルに眮き換えるこずができたす。 クラむアントの䟝存関係をむンストヌルおよび管理するための手段ではなく、暙準のNode Package Managernpmを䜿甚しお、すべおのフロント゚ンドの䟝存関係をむンストヌルおよび管理できたす。 webpackは、ほずんどのうなり声/ gulpタスクも実行できたす。


Bowerは、クラむアント偎のパッケヌゞマネヌゞャヌです。 JavaScript、HTML、CSSのコンポヌネントの怜玢、むンストヌル、削陀に䜿甚できたす。 GruntJSは、開発者が反埩タスクを自動化するのに圹立぀JavaScriptコマンドラむンナヌティリティです。 MakeたたはAntのJavaScriptの代替ず考えるこずができたす。 圌は瞮小、コンパむル、単䜓テスト、リントなどのタスクを凊理したす。

Webアプリケヌションで単玔なナヌザヌプロファむルペヌゞを䜜成しおいるずしたす。 jQueryおよびアンダヌスコアラむブラリを䜿甚したす。 1぀の方法は、䞡方のファむルをHTMLに含めるこずです。 


<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>User Profile</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" media="screen"> <link rel="stylesheet" href="/css/style.css" media="screen"> </head> <body> <div class="container"> <div class="page-header"> <h1 id="timeline"></h1> </div> <ul class="timeline"> </ul> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> <script src="js/profile.js"></script> </body> </html>

これは、ブヌトストラップを備えた単玔なHTMLです。 スクリプトタグを䜿甚しおjQueryずアンダヌスコアを接続したした。


接続したラむブラリを䜿甚するprofile.jsファむルを芋おみたしょう。 コヌドは、アプリケヌションのビゞネスロゞックを栌玍する匿名のクロヌゞャヌ内にありたす。 コヌドを関数にロックしないず、倉数はグロヌバル環境になり、これは悪いこずです。


 (function(){ var user = { name : "Shekhar Gulati", messages : [ "hello", "bye", "good night" ] }; $("#timeline").text(user.name+ " Timeline"); _.each(user.messages, function(msg){ var html = "<li><div class='timeline-heading'><h4 class='timeline-title'>"+msg+"</h4></div></li>"; $(".timeline").append(html); }); }());

スクリプトが呌び出されるず、コヌドが実行されたす。 ブラりザでペヌゞを開くず、プロファむルは次のようになりたす。



このコヌドには2぀のタスクがありたす。


  1. ナヌザヌ情報を取埗する
  2. タむムラむンを蚭定したす。

コンセプトの混合は悪い習慣であるこずが知られおいるため、特定のタスクを担圓する個別のモゞュヌルを䜜成する必芁がありたす。 profile.jsファむルでは、匿名クロヌゞャヌを䜿甚しおすべおのコヌドを保存したした。 JavaScriptには、モゞュヌルを改善する方法がありたす。 2぀の䞀般的な方法は、CommonJSずAMDです。



JavaScriptのモゞュヌルに぀いお詳しく知りたい堎合は、蚘事JavaScript ModulesA Beginner's Guideを読むこずをお勧めしたす。


この蚘事では、CommonJSでモゞュヌルを䜜成したす。 ヘッダヌずタむムラむンを蚭定するメ゜ッドを持぀タむムラむンモゞュヌルを䜜成したしょう。 CommonJSでは、 require関数を䜿甚しお䟝存関係をむンポヌトできたす。 タむムラむンはjqueryずunderscore䟝存しunderscore 。


 var $ = require('jquery'); var _ = require('underscore'); function timeline(user){ this.setHeader = function(){ $("#timeline").text(user.name+ " Timeline"); } this.setTimeline = function(){ _.each(user.messages, function(msg){ var html = "<li><div class='timeline-heading'><h4 class='timeline-title'>"+msg+"</h4></div></li>"; $(".timeline").append(html); }); } } module.exports = timeline;

このコヌドは、新しいtimelineモゞュヌルを䜜成したす。 setHeaderずsetTimeline 2぀の関数がありたす。 特別なmoduleオブゞェクトを䜿甚し、 module.exportsリンクを远加しmodule.exports 。 このようにしお、CommonJSモゞュラヌシステムに、他の機胜がモゞュヌルを䜿甚できるようにするこずを䌝えたす。


次にprofile.js曎新し、 timelineモゞュヌルを䜿甚する必芁がありたす。 ナヌザヌに関する情報をロヌドする新しいモゞュヌルを䜜成できたすが、ここでは、1぀のモゞュヌルに制限したす。


 var timeline = require('./timeline.js'); var user = { name : "Shekhar Gulati", messages : [ "hello", "bye", "good night" ] }; var timelineModule = new timeline(user); timelineModule.setHeader(user); timelineModule.setTimeline(user);

index.htmlをブラりザにロヌドするず、空癜のペヌゞが衚瀺されたす。 コン゜ヌル開発者ツヌルで゚ラヌを芋぀けるこずができたす。


 profile.js:1 Uncaught ReferenceError: require is not defined

問題は、ブラりザがCommonJSのようなモゞュラヌシステムを理解しないこずです。 ブラりザに期埅される圢匏を提䟛する必芁がありたす。


モゞュヌルバンドラヌが助けになりたす


Webブラりザヌは、これらのよく説明されおいるモゞュヌルを理解したせん。 すべおのJavaScriptコヌドを1぀のファむルに远加しおむンポヌトするか、 scriptタグを䜿甚しおすべおのファむルをペヌゞに手動で远加する必芁がありたす。 この問題を解決するには、モゞュヌルバンドラヌを䜿甚したす。 Bundlerモゞュヌルは、異なるモゞュヌルずそれらの䟝存関係を正しい順序で1぀のファむルに結合したす。 さたざたなモゞュラヌシステムを䜿甚しお蚘述されたコヌドを解析し、ブラりザヌが理解できる1぀の圢匏に結合できたす。 2぀の䞀般的なモゞュヌルバンドラヌは次のずおりです。


  1. browserify ブラりザヌで埌で䜿甚するためにnpmモゞュヌルをパックしたす。 browserifyの堎合、リント、テストの実行などのためにGruntたたはGulpを远加で接続する必芁がありたす。これは、いく぀かのツヌルず統合の䜜業に時間を費やす必芁があるこずを意味したす。
  2. webpack モゞュヌルのバンドルレむアりトを提䟛するだけでなく、 Gulp / Gruntが実行するタスクも実行できるビルドシステム。 さらに、webpackはJavsScriptファむルに限定されず、CSS、画像、htmlコンポヌネントなどの他の静的倉数ず連携できたす。webpackは、 code splitting  code splitting ずいう非垞に䟿利な機胜もサポヌトしたす。 倧芏暡なアプリケヌションは、必芁に応じおダりンロヌドされる断片に分割できたす。

webpackずは䜕ですか


公匏の定矩は次のずおりです。


webpackは䟝存関係のあるモゞュヌルを受け取り、これらのモゞュヌルが衚す静的リ゜ヌスを生成したす

この定矩は、解決される問題が理解されたずきに意味をなしたす。 Webpackはリ゜ヌスのセットを取埗し、それらをセットバンドルに倉換したす。



リ゜ヌスの倉換には、webpackの心臓郚であるロヌダヌが関係しおいたした。


動䜜䞭のWebpack


webpackをむンストヌルするには、ノヌドが必芁です。 公匏サむトからノヌドをダりンロヌドできたす。


これで、webpackをグロヌバルにむンストヌルできたす。


 $ npm install -g webpack

npm initコマンドで新しいモゞュヌルを䜜成したす。 圌女はpackage.jsonファむルを䜜成したす。 npmを䜿甚しお䟝存関係をむンストヌルしたす。


 $ npm install -S jquery $ npm install -S underscore

さらに、webpackを䟝存関係ずしおむンストヌルする必芁がありたす。


 $ npm install -S webpack

index.html次のコヌドに眮き換えたす。 ご芧のずおり、jqueryずunderscoreのスクリプトタグをすべお削陀したした。 たた、 js/profile.jsをむンポヌトする代わりにjs/profile.js dist/bundle.jsたす。


 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>User Profile</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" media="screen"> <link rel="stylesheet" href="/css/style.css" media="screen" title="no title"> </head> <body> <div class="container"> <div class="page-header"> <h1 id="timeline"></h1> </div> <ul class="timeline"> </ul> </div> <script src="dist/bundle.js" charset="utf-8"></script> </body> </html>

バンドルを䜜成したしょう。


 $ webpack js/profile.js dist/bundle.js 

 Hash: 6d83c7db8ae0939be3d0 Version: webpack 1.13.2 Time: 350ms Asset Size Chunks Chunk Names bundle.js 329 kB 0 [emitted] main [0] ./js/profile.js 252 bytes {0} [built] [1] ./js/timeline.js 427 bytes {0} [built] + 2 hidden modules

これで、ペヌゞは正垞に機胜しおいたす。


webpackモニタヌの倉曎を行い、自動的にバンドルを生成できたす。 これを行うには、次のフラグを指定しお実行したす。


 $ webpack -w js/profile.js dist/bundle.js

これで、webpackは自動的に終了したせん。 ファむルを倉曎するず、新しいバンドルが生成されたす。 ブラりザでペヌゞをリロヌドするだけです。 profile.js倉曎したしょう


 var user = { name : "Shekhar Gulati!!!", messages : [ "hello", "bye", "good night" ] };

bundle.jsによっお生成されたbundle.jsファむルには、webpack自䜓に関連する倚くのコヌドが含たれおおり、そこにあるコヌドは倉曎された圢匏になりたす。 ブラりザ、たずえば開発者ツヌルでアプリケヌションをデバッグするのは非垞に䞍䟿です。 生掻を簡玠化するために、devtoolsフラグを䜿甚しおwebpackを実行できたす。


 $ webpack -w --devtool source-map js/profile.js dist/bundle.js

webpackはbundle.jsファむルの゜ヌスマップを生成したす。 ゜ヌスマップは、最小化およびコンパむルされたコヌドを、゜ヌスのアセンブルされおいないコヌドず単䞀のファむルに関連付けたす。 テストのために、profile.jsにdebugger行を远加できdebugger


 var timeline = require('./timeline.js'); var user = { name : "Shekhar Gulati", messages : [ "hello", "bye", "good night" ] }; debugger; var timelineModule = new timeline(user); timelineModule.setHeader(user); timelineModule.setTimeline(user);

ペヌゞをリロヌドするず、アプリケヌションはこの行で停止したす。



CSSを远加する


䞊蚘のHTMLでは、 /css/style.cssを読み蟌んでいるこずが/css/style.cssたす。 Webpackは、JavaScriptだけでなく、CSSを含む他の静的倉数でも機胜したす。 index.htmlから/css/style.cssの行を削陀したす。 このように、 profile.jsにスタむルを含めたす。


 require('../css/style.css'); var timeline = require('./timeline.js'); var user = { name : "Shekhar Gulati", messages : [ "hello", "bye", "good night" ] }; var timelineModule = new timeline(user); timelineModule.setHeader(user); timelineModule.setTimeline(user);

webpackは倉曎をリロヌドし、コン゜ヌルに゚ラヌメッセヌゞが衚瀺されたす。


 ERROR in ./css/style.css Module parse failed: /Users/shekhargulati/dev/52-technologies-in-2016/36-webpack/code/css/style.css Unexpected token (1:0) You may need an appropriate loader to handle this file type.

問題は、webpackがデフォルトでCSSを理解しないこずです。 これには、いく぀かのブヌトロヌダヌをむンストヌルする必芁がありたす。 必芁なブヌトロヌダヌをむンストヌルするコマンドは次のずおりです。


 $ npm install style-loader css-loader --save-dev

Webpackはダりンロヌダヌを䜿甚しお、テキストを目的の圢匏に倉換したす。 次に、 requireを曎新require 。


 require('style!css!../css/style.css');

構文style!css! ぀たり、最初にcss倉換を適甚しおstyle.cssからCSSにテキストを倉換し、次にstyle倉換を䜿甚しおペヌゞにスタむルを適甚する必芁がありたす。


Webpackを再床実行したす。


 $ webpack -w --devtool source-map js/profile.js dist/bundle.js

構成


コマンドラむンですべおのオプションを指定しないために、アプリケヌションルヌトにwebpack.config.js構成ファむルを䜜成できたす。


 module.exports = { context: __dirname, devtool: "source-map", entry: "./js/profile.js", output: { path: __dirname + "/dist", filename: "bundle.js" } }

これで、シンプルなwebpack -wコマンドでwebpackを実行できたす。


style!css!を远加したずきstyle!css! profile.jsでは、量産コヌドずwebpack構成を混合したした。 このオプションを構成ファむルに転送できたす。


構成の倉曎埌、webpackを再起動する必芁がありたす。


 var webpack = require('webpack'); module.exports = { context: __dirname, devtool: "source-map", entry: "./js/profile.js", output: { path: __dirname + "/dist", filename: "bundle.js" }, module:{ loaders: [ {test : /\.css$/, loader: 'style!css!'} ] } }

ここで最も興味深いセクションは、モゞュヌルの宣蚀です。 ここで、ファむルが.cssで終わる堎合、 style!css!を適甚する必芁があるこずを指摘したしたstyle!css! 。


ホットリブヌト


ホットリロヌドにはwebpack-dev-serverが必芁webpack-dev-server 。 次のようにむンストヌルしたす。


 $ npm install -g webpack-dev-server

これで、 webpack-dev-serverコマンドを䜿甚しおサヌバヌを起動できwebpack-dev-server 。


http// localhost8080 / webpack-dev-server /でサヌバヌを起動し、 webpack.config.jsの構成を䜿甚しwebpack.config.js 。


ポヌトは--portオプションで倉曎できたす。


 $ webpack-dev-server --port 10000 

  http://localhost:10000/webpack-dev-server

webpack-dev-server構成は、 devServerセクションのwebpack.config.jsファむルでも指定できたす。


 module.exports = { context: __dirname, devtool: "source-map", entry: "./js/profile.js", output: { path: __dirname + "/dist", filename: "bundle.js" }, module:{ loaders: [ {test : /\.css$/, loader: 'style!css!'} ] }, devServer: { inline:true, port: 10000 }, }


今日は以䞊です。 Webpackの詳现に぀いおは、 ドキュメントをご芧ください。



Source: https://habr.com/ru/post/J309306/

More articles:


All Articles