Webpack بىلەن تونۇشۇش


بۇ تېمىىزدىمۇ ئوخشاشلا ئەڭ ئاۋۋال Webpack نىمە ئىكەنلىكى ۋە نىمگە ئىشلىتىلدىغانلىقى توغۇرلۇق پاراڭ قىلىپ باقايلى .Web تېخنىكسىنىڭ كۈنسايىن تەرەققىي قىلىشىغا ئەگىشىپ ،Web قۇرۇلمىسىدىكى سىستېمىلار ۋە تور بېكەتلەرنىڭ ئالدى يۈز تېخنىكىلىرى ۋە بۆلەكلىرى تېخىمۇ مۇرەككەپ ۋە كۆپ قاتلاملىق بولماقتا .مۇشۇنداق شارائىت ئاستىدا ئالدى يۈز قىسىمنىڭ مۇرەككەپلىك ،قۇرۇلما ۋە بۆلەكلەر مۇناسىۋىتىنى تەڭشەيدىغان كۆپ قوراللار بارلىققا كەلدى .مەسىلەن Grunt ، Gulp قاتارلىقلار.


Webpack زادى نىمە ؟

Webpack نى ئاددىيلا تىل بىلەن چۈشەنسەك ،بۆلەك بولاقلىغۇچ (模块打包机) . يەنى مەلۇم بىر كىچىك ياكى چوڭ بۆلەكنى پەقەت بىرلا كىرىش ئېغىزى شەكىلدە بولاقلاپ سىرتقا تەمىنلەيدۇ . (يۈزەكى مۇشۇنداقراق چۈشىنىپ تۇرلى دىمەكچىدە بۇ يەردە)


WebPack ۋە Grunt،Gulp نىڭ پەرقى

ئەمەلىيەتتە WebPack نى Grunt،Gulp لار بىلەن ئالاھىدە سىلىشتۇرۇشنىڭ زۆرۈيتىمۇ يوق . Gulp/Grunt بولسا ئالدى قىسىم تۈر ئېچىش جەريانىنى ئەلالاشتۇرىدىغان قورالدۇر . WebPack بولسا يۇقاردا تىلغا ئالغىنىمىزدەك بۆلەكلەشتۈرۈش (模块化解决方案) مەسىلنى ھەل قىلىدىغان قورال بولۇپ ،بەزەن شارائىت ئاستىدا Grunt،Gulp لەرنىڭ ئورنىنى ئالالايدۇ .


Grunt،Gulp نىڭ خىزمەت پىرىنسىپى 

پىروگرامما ئاچقۇچىنىڭ ئالدىن بەلگىلەپ بەرگەن تەڭشەك ھۆججىتى (ئادەتتە بۇ ھۆججەتتە ئوخشاشمىغان ھۆججەت تىپلىرىغان بولغان 编译 قىلىش قائىدىسى ، ھۆججەت كىچىكلىتىش ، كود قىسىش ... قاتارلىق تەڭشەكلەر يېزىلغان بولىدۇ)  گە ئاساسەن ئاپتوماتىك ھالدا مەشخۇلاتنى تاماملايدۇ .مەسىلەن تۆۋەندىكى رەسىمگە قارايلى .


00.png

Webpack نىڭ خىزمەت پىرىنسىپى

ئاددىيلام چۈشەنسەك پۈتۈن تۈردىكى بارلىق ئۆز ئارا تايىنىدىغان مۇناسىۋەتلەر (依赖文件) نى مەلۇم تەڭشەككە ئاساسەن بولاقلاپ چىقىرىپ ، تور كۆرگۈچلەر نورمال بىر تەرەپ قىلالايدىغان JavaScript ھۆججىتىگە ئايلاندۇرىدۇ .مەسىلەن تۆۋەندىكى رەسىمگە قارايلى .


001.png


يۇقارقىلاردىن كۆرىۋىلىشقا بولىدۇكى ، Webpack تېخىمۇ يۇقىرى ئۈنۈم ۋە ئاددىي جەريان ئارقىلىق كۆپلىگەن ئوخشاش بولىمىغان ھۆججەت تىپلىرىنى بىر تەرەپ قىلالايدۇ .


Webpack ئىشلىتىشنى باشلاش 

ئاۋۋال npm ئارقلىق Webpack نى قاچىلاش مەشخۇلاتى قىلىمىز . ( npm ۋە  nodejs توغۇرلۇق ئايرىم تېمىدا توختىلىمىز ).مەلۇم بىر ھۆججەت قىسقۇچ قۇرۇپ ،تېرمىنالدا شۇ ھۆججەت قىسقۇچقا كىرىپ قاچىلاش ئىلىپ بارساق بولىدۇ . مەسىلەن webpack-project دەپ ھۆججەت قىسقۇچ قۇردۇق دەپ تۇرايلى .


//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack


 ھازىرقى مۇندەرىجىگە package.json ناملىق ھۆججەتتىن بىرنى قۇرىمىز .ياكى 


npm init


ئارقىلىق ئۆلچەملىك package.json ھۆججىتى ھاسىل قىلساقمۇ بولىدۇ .ئاندىن مۇشۇ ھۆججەتكە ئاساسەن مۇشۇ مۇندەرىجىگە webpack نى يىلىنما مۇناسىۋەت بىر تەرەپ قىلىش بولاقچىسى شەكلىدە قاچىلىساقمۇ بولىدۇ .


// 安装Webpack
npm install --save-dev webpack



webpack ئەمەلىي سىنىقى 

 ھازىر مۇندەرىجىگە يەنە public ، app ناملىق ئىككى ھۆججەت قىسقۇچ ۋە تۆۋەندىكى ھۆججەتلەرنى قۇرايلى .

index.html ھۆججىتى (public مۇندەرىجىسى ئاستىدا) 

learnfans.js ھۆججىتى (app مۇندەرىجىسى ئاستىدا) 

main.js ھۆججىتى (app مۇندەرىجىسى ئاستىدا) 

قۇرۇلمىسى تۆۋەندىكى رەسىمدىكىدەك .


01.png


ئاندىن index.html ھۆججىتىگە ئاددىيلا بىر نەچچە قۇر html كودى يازايلى .


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack-Project learn@fans</title>
</head>
<body>
<div id='root'></div>
    <script src="bundle.js"></script>
</body>
</html>


دىققەت قىلساق ،يۇقارقى كودتىكى bundle.js ھۆججىتى ئەمەلىيەتتە مەۋجۇت ئەمەس . بۇنىڭ نىمە ئىش ئىكەنلىكىنى سەل تۇرۇپ سۆزلەيمىز .


ئاندىن learnfans.js ھۆججىتىگە تۆۋەندىكىدەك نەچچە قۇر js كودى يازايلى .( ES6 گىرامماتىكىسى) كودنى چۈشەنمىسەكمۇ ھىچقىسى يوق جۇمۇ ھازىرچە .


module.exports = function() {
var leanfans = document.createElement('div');
leanfans.textContent = "hello webpack! by learn@fans";
return leanfans;
};


ئاندىن main.js ھۆججىتىگە تۆۋەندىكىدەك نەچچە قۇر js كودى يازايلى .( ES6 گىرامماتىكىسى)


const learner = require('./learnfans.js');
document.querySelector("#root").appendChild(learner());


ئاندىن غول مۇندەرىجىگە webpack.config.js ناملىق ھۆججەت قۇرۇپ ،تۆۋەندىكى كودنى يازىمىز .( كودنىڭ تەخمىنەن نىمە مەنىسى بارلىقىنى چۈشەندۈرۈش جۈملىسىگە قاراپ پەرەز قىلىپ تۇرايلى ھازىرچە )


module.exports = {
entry:  __dirname + "/app/main.js",//唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}


تۆۋەندىكى بۇيرۇق ئارقلىق يۇقارقى مەشخۇلاتلارغا قارىتا بولاقلاش ئىلىپ بارىمىز .

webpack


last.png


بۇ چاغدا webpack بىزگە main.js ۋە learnfans.js ھۆججىتىنى bundle.js نامىدا بولاقلاپ ھاسىللاپ بىرىدۇ . تور كۆرگۈچتە index.html نى زىيارەت قىلىپ كۆرسەك تۆۋەندىكىدەك بولىدۇ .


last-last.png



خا خا ! پەچەتمىكەن !؟ webpack ئىشلىتىشنىڭ تۇنجى قەدىمىنى ئوڭۇشلۇق بىسىۋالدۇق . webpack توغۇرلۇق يازمىلىرىمىز داۋاملىق تولۇقلىنىدۇ.


مۇناسىۋەتلىك ئۇلانمىلار :

 webpack كە دائىر يازمىلار : https://github.com/webpack-china/awesome-webpack-cn

webpack خەنزۇچە ئورگان بېتى : https://webpack-china.org

webpack ئىنگىلىزچە ئورگان بېتى : http://webpack.github.io


سىز تېخى كىرمەپسىز،كىرگەندىن كىيىن ئىنكاس يازالايسىز
كىرىش|تېزىملىتىش

  • heweskar

    كود تەھرىرلىگۈچىڭىز قايسى دېتالدۇ ، ھۆججەتلەرنىڭ ئايكونلىرى چىرايلىقكەن .

    Stilly

    كود تەھرىرلىگۈچ Visual Studio Code . ئايكونغا Material Theme UI ئۇسلۇبىنى ئىشلەتكەن . قىستۇرما بازىرىدىن ئىزدەپلا قاچىلاشقا بولىدۇ .

  • php-fans

    ېېڭى دەرىسلەر يوللانمايدىغۇ ئويغان ئەپەندىم ؟ بار دەرىسلەرمۇ قويۇلمايدىكەن .

    Stilly

    乐视云 ڧىلىم مۇلازىمىتىنى ھەقلىق قىپتۇ ئەمەسمۇ ، ئەمدى بۇنىڭغىمۇ پۇل خەجلەيدىغان گەپتە ھىي...

  • yurqi

    يامان بەلەن تېما يېزىپسىز جۇما ، بۇ webpack دىگەن نەسدە كودنى بولاقلىساق ئازراق كودنى بىرمۇنچە قىلىۋېتىدىكە بۇنىڭغا ماقۇل دىسەم ، مىنىڭ يازغان فونكىسيەرىمنى HTML دا كونۇپكىنىڭ onclick ھادىسىسىدا ئىشلەتسەم بۇ فونكىسيەنى تاپالمىدى ، كود تەھرىرلىگۈچمۇ ئەسكەرتمىدى، ھاسىل قىلغان كودقا قارىسام ھەممە نەرسىنى ([ ]) ({ }) مۇشۇنىڭ ئىچىگە ئېلىپ قويۇپتۇ، گەپنىڭ پوسكاللىسىنى دىسەم بۇ webpack ھاسىل قىلىپ بەرگەن كودنى قانداق ئىشلىتىمىز ؟ چىراي ئىپادىسى يوللاي دىسەم تاپالمىدىم ،،،، گەپلىرىم سەل قوپال بىلىنىپ قالمىغاندۇ ؟

    Stilly

    تېمىنى ئەستايىدىل ئوقۇغان بولسىڭىز bundle.js ناملىق ھۆججەتنىڭ index.html ھۆججىتىگە ئۇلانغانلىقىنى بايقايتتىڭىز ، مۇشۇ ھالقا دەل سىزنىڭ سۇئالىڭىزنىڭ جاۋابى . (چىراي ئىپادىسى قاتسام بولغۇدەك ئىنكاس رامكىسىغا)

  • yurqi

    ئەلۋەتتە بىر نەچچە قېتىم تەپسىلى ئوقۇدۇم ، سىزگە ئوخشاش سىناقنى ئېلىپ باردىم نورمال بولدى ، لىكىن بىر فونكىسسيە يېزىپ ئۇنى click ھادىسىگە باغلاپ ئىشلەتسەم بۇنداق نەسە يوق دەپ خاتالىق چىقىۋالدى ، ، ،ئۈستىدىكى سىناق بەت يۈكلىنىۋاتقاندا ئىجرا بولىدىكەن ، مەن قىلغىنى بەت يۈكلىنىپ بولغاندا ئاندىن ئىجرا قىلىدۇ ، ، ، شۇ فونكىسسيەنى تاپالمىدى

    Stilly

    ES6 نىڭ ئاساسىي گىرامماتىكىسىنى بىر قۇر كۆرۈپ چىقسىڭىز ياخشى بولاركەنتۇق ، بەلكىم ئېلمىنىت تاللاش ،ھادىسە باغلاش جەريانىڭىزدا ئەنئەنىۋىي js گىرامماتىكىسى قوللانغان بولسىڭىز Webpack توغرا بىر تەرەپ قىلماي قالغان بولىشىمۇ ھەم مومكىن .

  • user_yeganaaa

    بۇ نەرسىغۇ شۇنداق ياخشى نەرسىكەن ئەمما راس ئازراق كودنى نۇرغۇن قىلىۋىتىدىكەن ئۆلگۈر... Vue يازغاندا يىزىش تازا ئوخشىمايدىكەن مەسىلەن Vue.component("component", () => {/*xxxx*/}) نى سەل باشقىچە يىزىشقا توغرا كىلىدىكەن خەپ... تازا بىر تۇتۇشۇپ باقمىسام مۇنۇ ئوقەت بىلەن.

    Stilly

    Webpack نىڭ كودنى بولاقلىغاندا بىرمۇنچە ئوشۇق كود قېتىۋىتىشىمۇ بەلكىم Webpackنىڭ خىزمەت پىرىنسىپىدۇر مېنىڭچە . مەنمۇ بەك ئىچكىرلەپ تەتقىق قىپ باقماپتىمەن بۇ تەرەپلەرنى .