Stilly

Stilly

بېكەت باشلىقى

يازمىلىرى
ئەگەشكۈچىلىرى
ئەگەشكەنلىرى
74
32
0

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