摘要:全局安裝安裝成功之后,現(xiàn)在命令就在全局生效。為了將依賴關(guān)系與捆綁到一起,我們需要導(dǎo)入。執(zhí)行命令,入口文件為,輸出文件,其中未使用的依賴關(guān)系不會打入中。現(xiàn)在我們直接運(yùn)行命令實(shí)現(xiàn)與上面相同的功能。
源碼地址:https://github.com/silence717/webpack2-demos
webpack在你的應(yīng)用中是一個模塊打包工具。webpack可以簡化工作流,快速構(gòu)建一個應(yīng)用程序的依賴關(guān)系圖,按照它們正確的順序綁定。webpack可以配置定制優(yōu)化你的代碼,拆分vendor/css/js代碼用于生產(chǎn)環(huán)境,運(yùn)行一個可以及時部署代碼并且頁面無刷新的開發(fā)服務(wù)器,還有許多很酷的功能。
安裝webpack開始之前首先你得在本地安裝一個新版的nodejs。這是一個比較好的基礎(chǔ)。老版本你可能會遇到各種與webpack相關(guān)的功能丟失或者缺少一些依賴的包。
全局安裝</>復(fù)制代碼
npm install webpack -g
安裝成功之后,現(xiàn)在webpack命令就在全局生效。
然而,這不是一個最佳實(shí)踐,因為它會鎖定到一個特定版本的webpack,你在項目中使用不同版本的可能會失效。
</>復(fù)制代碼
npm install webpack --save-dev
npm install webpack@ --save-dev
這是一種比較推薦的方法。
如果你想運(yùn)行本地安裝的webpack,你可以進(jìn)入它的bin里面,就像這樣 node_modules/.bin/webpack
如果你對使用最新的webpack有極大的熱情(注意 - 可能是不穩(wěn)定的),你可以直接安裝webpack庫使用。
</>復(fù)制代碼
npm install webpack/webpack#
Creating a bundle
創(chuàng)建一個demo目錄去實(shí)踐webpack.
</>復(fù)制代碼
mkdir webpack2-demo && cd webpack2-demo
mkdir demo01-getting-started && cd demo01-getting-started
npm init -y
npm install --save-dev webpack
npm install --save lodash
現(xiàn)在我們創(chuàng)建一個index.js文件
getting-started/src/index.js
</>復(fù)制代碼
function component () {
var element = document.createElement("div");
/* lodash is required for the next line to work */
element.innerHTML = _.map(["Hello","webpack"], function(item){
return item + " ";
});
return element;
}
document.body.appendChild(component());
為了運(yùn)行這段代碼,我們創(chuàng)建一個一個html
index.html
</>復(fù)制代碼
<span class="hljs-attr">Webpack</span> <span class="hljs-string">demo</span>
在這栗子中,使用 script 標(biāo)簽引入依賴。
index.js依賴lodash,所以最最開始引入它。這個里面并沒有很直接的表明index.js依賴lodash庫,只是使用了lodash的變量 _。
這種管理javascript項目會存在一些問題:
如果一個依賴丟失,或者沒有按照正確的順序去引入,應(yīng)用將不會工作。
如果一個依賴被引入了,但是從未使用,瀏覽器就需要加載根本不需要的大段代碼。
為了將lodash依賴關(guān)系與index.js捆綁到一起,我們需要導(dǎo)入lodash。
</>復(fù)制代碼
+ import _ from "lodash";
function component () {
...
同樣我們需要改變index.html文件只包含一個bundlejs文件。
</>復(fù)制代碼
<span class="hljs-attr">Webpack</span> <span class="hljs-string">demo</span>
-
-
+
現(xiàn)在index.js明確表明依賴lodash,并且將其綁定到_,再也不會產(chǎn)生全局命名污染。
執(zhí)行webpack命令,入口文件為index.js,輸出bundle.js文件,其中未使用的依賴關(guān)系不會打入bundle.js中。
</>復(fù)制代碼
webpack src/index.js dist/bundle.js
// 輸出
Hash: 73259977daef4d7ca66c
Version: webpack 2.1.0-beta.28
Time: 558ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./src/index.js 371 bytes {0} [built]
用一個配置文件來使用webpack
webpack.config.js
</>復(fù)制代碼
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: "./dist"
}
};
使用webpack運(yùn)行這個文件:
</>復(fù)制代碼
webpack --config webpack.config.js
// 輸出
Hash: 54fb380c0318be007543
Version: webpack 2.1.0-beta.28
Time: 562ms
Asset Size Chunks Chunk Names
bundle.js 543 kB 0 [emitted] [big] main
[3] ./src/index.js 371 bytes {0} [built]
如果webpack.config.js已經(jīng)存在,webpack命令會默認(rèn)選擇它
配置文件能夠靈活使用webpack,添加loaders,插件,解析選項和許多其他增強(qiáng)功能。
我們在package.json中設(shè)置一個快捷方式,運(yùn)行webpack。
</>復(fù)制代碼
...
"scripts": {
"build": "webpack"
}
...
現(xiàn)在我們直接運(yùn)行npm run build命令實(shí)現(xiàn)與上面相同的功能。
總結(jié)在這個栗子中,我們了解了webpack的基本概念和配置,之后我們將按照API進(jìn)一步深入學(xué)習(xí)Webpack。
PS:本文完全屬于邊實(shí)踐學(xué)習(xí)邊寫,會不斷更新,希望不對的地方可以及時指出。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/86483.html
摘要:實(shí)踐筆記入門一官網(wǎng)文檔地址實(shí)踐工程地址本篇文章可切換到分支查看源代碼。簡單分步實(shí)踐創(chuàng)建一個空文件夾,進(jìn)入全局安裝創(chuàng)建文件創(chuàng)建執(zhí)行命令這個時候項目中多了一個文件,使用標(biāo)簽將其引入到中在瀏覽器中打開文件,頁面出現(xiàn)文字。 webpack 實(shí)踐筆記入門(一) [webpack官網(wǎng)文檔地址]:(http://webpack.github.io/docs...) [實(shí)踐工程地址]: (https:...
摘要:前言月份開始出沒社區(qū),現(xiàn)在差不多月了,按照工作的說法,就是差不多過了三個月的試用期,準(zhǔn)備轉(zhuǎn)正了一般來說,差不多到了轉(zhuǎn)正的時候,會進(jìn)行總結(jié)或者分享會議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客,博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū),現(xiàn)在差不多9月了,按照工作的說法,就是差不多過了三個月的試用期,準(zhǔn)備轉(zhuǎn)正了!一般來說,差不多到了轉(zhuǎn)正的時候,會進(jìn)行總結(jié)或者分享會議!那么今天我就...
摘要:特意對前端學(xué)習(xí)資源做一個匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多,可以很快搞定,沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方,歡迎補(bǔ)充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應(yīng)和斧正,會及時更新,平時業(yè)務(wù)工作時也會不定期更...
平日學(xué)習(xí)接觸過的網(wǎng)站積累,以每月的形式發(fā)布。2017年以前看這個網(wǎng)址:http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...
閱讀 3730·2021-11-24 09:39
閱讀 1888·2021-11-16 11:45
閱讀 618·2021-11-16 11:45
閱讀 1037·2021-10-11 10:58
閱讀 2480·2021-09-09 11:51
閱讀 1943·2019-08-30 15:54
閱讀 694·2019-08-29 13:13
閱讀 3470·2019-08-26 12:18
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要